// Home page — hero, search, featured listings, about strip, stats, services,
// testimonials, recent sold, insights teaser, CTA panel.

const HOME_HEROES = {
  skyline: "https://images.unsplash.com/photo-1609825488888-3a766db05542?w=2200&q=80&auto=format&fit=crop",
  interior: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=2200&q=80&auto=format&fit=crop",
  exterior: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=2200&q=80&auto=format&fit=crop",
};

const HomePage = ({ setRoute, openListing, faves, toggleFav, showToast, tweaks, t }) => {
  const tr = t || ((k) => k);
  useLucide();
  const featured = SITE_DATA.listings.filter(l => l.featured);
  const recentSold = SITE_DATA.sold.slice(0, 6);
  const [activeTesti, setActiveTesti] = React.useState(0);
  const heroVariant = (tweaks && tweaks.heroVariant) || 'skyline';

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero">
        <div className="hero-media">
          <img src={HOME_HEROES[heroVariant] || HOME_HEROES.skyline} alt="Vancouver" />
        </div>
        <div className="hero-inner">
          <div className="hero-eyebrow eyebrow">{tr('hero.eyebrow')}</div>
          <h1>
            {tr('hero.title1')}<br />
            <em>{tr('hero.title2')}</em>
          </h1>
          <div className="hero-meta">
            <button className="btn btn-primary" onClick={() => setRoute('listings')}>
              {tr('hero.cta1')} <Icon name="arrow-right" size={16} />
            </button>
            <button className="btn btn-ghost-on-dark" onClick={() => setRoute('about')}>
              {tr('hero.cta2')}
            </button>
          </div>
          <div className="hero-stats">
            {SITE_DATA.stats.map(s => (
              <div className="hero-stat" key={s.label}>
                <span className="v">{s.value}</span>
                <span className="l">{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Floating search */}
      <div className="container">
        <SearchBar setRoute={setRoute} t={tr} />
      </div>

      {/* Trust row */}
      <div className="trust-row">
        <span className="item">Magsen Realty Inc.</span>
        <span className="item"><span className="dot"></span> Medallion Club Member 2019–2025</span>
        <span className="item"><span className="dot"></span> Top 10% Greater Vancouver REALTOR®</span>
        <span className="item"><span className="dot"></span> REBGV · CREA</span>
      </div>

      {/* FEATURED */}
      <section className="section container">
        <div className="sec-head">
          <div className="titlewrap">
            <span className="eyebrow">{tr('featured.eyebrow')}</span>
            <h2>{tr('featured.title')}</h2>
          </div>
          <p className="lead">{tr('featured.lead')}</p>
        </div>
        <FeaturedListings listings={featured} openListing={openListing} faves={faves} toggleFav={toggleFav} />
        <div style={{ marginTop: 40, textAlign: 'center' }}>
          <button className="btn btn-ghost" onClick={() => setRoute('listings')}>
            {tr('featured.cta')} <Icon name="arrow-right" size={16} />
          </button>
        </div>
      </section>

      {/* ABOUT STRIP */}
      <section className="section container">
        <div className="about-strip">
          <div className="about-portrait">
            <img src={SITE_DATA.agent.portrait} alt="Steffanie Ting" />
          </div>
          <div className="about-body">
            <span className="eyebrow">About Steffanie</span>
            <h2 style={{ marginTop: 14 }}>I love working with people. I love working in real estate.</h2>
            <p>{SITE_DATA.agent.bio}</p>
            <p>Whether you're a first-time buyer in Tricities or a multi-property investor moving across Metro Vancouver, my promise is the same: tell you what you need to hear, not what you want to hear — and make the process easy and enjoyable along the way.</p>
            <div className="sig">— Steffanie</div>
            <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setRoute('about')}>My full story</button>
              <button className="btn btn-ghost" onClick={() => setRoute('contact')}>
                <Icon name="phone" size={16} /> {SITE_DATA.agent.phone}
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div className="sec-head">
            <div className="titlewrap">
              <span className="eyebrow">What I do</span>
              <h2>Full-service, end to end.</h2>
            </div>
            <p className="lead">Six ways I help clients. Each one is supported by twenty years of relationships — inspectors, mortgage brokers, stagers, contractors, lawyers — who do good work and pick up the phone.</p>
          </div>
          <div className="services-grid">
            {SITE_DATA.services.map(s => (
              <button
                key={s.id}
                className="service-card"
                onClick={() => setRoute('services')}
                style={{ textAlign: 'left' }}
              >
                <span className="service-icon"><Icon name={s.icon} size={26} stroke={1.6} /></span>
                <h3 className="serif">{s.title}</h3>
                <div className="tagline">{s.tagline}</div>
                <div className="blurb">{s.blurb}</div>
                <span className="btn-link" style={{ marginTop: 8 }}>Learn more</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* STATS BAND */}
      <section className="stats-band">
        <div className="container">
          <div className="sec-head" style={{ marginBottom: 56 }}>
            <div className="titlewrap">
              <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>By the numbers</span>
              <h2 style={{ color: '#fff' }}>Twenty years.<br />Three hundred forty million dollars.</h2>
            </div>
            <p className="lead" style={{ color: 'rgba(255,255,255,0.7)' }}>
              These numbers matter because they translate. Experience means I've seen this market in every weather — and I know where the offers actually need to land.
            </p>
          </div>
          <div className="stats-grid">
            {SITE_DATA.stats.map(s => (
              <div className="stat" key={s.label}>
                <span className="v">{s.value}</span>
                <span className="l">{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RECENT SOLD */}
      <section className="sold-strip section">
        <div className="container">
          <div className="sec-head">
            <div className="titlewrap">
              <span className="eyebrow">Recently sold</span>
              <h2>Closed deals, on the record.</h2>
            </div>
            <p className="lead">A selection from the last 18 months across Metro Vancouver. The full sold archive runs deeper — over 450 transactions and counting.</p>
          </div>
          <div className="sold-grid">
            {recentSold.map(s => (
              <SoldTile key={s.id} item={s} onClick={() => showToast(s.daysOnMarket != null ? `Sold for ${formatFullPrice(s.soldPrice)} in ${s.daysOnMarket} days` : `Sold for ${formatFullPrice(s.soldPrice)}`)} />
            ))}
          </div>
          <div style={{ marginTop: 40, textAlign: 'center' }}>
            <button className="btn btn-ghost" onClick={() => setRoute('sold')}>
              Full sold archive <Icon name="arrow-right" size={16} />
            </button>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section container">
        <div className="sec-head">
          <div className="titlewrap">
            <span className="eyebrow">In their words</span>
            <h2>What clients say.</h2>
          </div>
        </div>
        <div className="testimonial-card">
          <span className="mark">"</span>
          <p className="testimonial-quote">{SITE_DATA.testimonials[activeTesti].quote}</p>
          <div className="testimonial-author">
            <strong>{SITE_DATA.testimonials[activeTesti].author}</strong>
            <span className="role">{SITE_DATA.testimonials[activeTesti].role}</span>
          </div>
        </div>
        <div className="testimonial-nav">
          <button onClick={() => setActiveTesti(i => (i - 1 + SITE_DATA.testimonials.length) % SITE_DATA.testimonials.length)} aria-label="Previous">
            <Icon name="arrow-left" size={18} />
          </button>
          <button onClick={() => setActiveTesti(i => (i + 1) % SITE_DATA.testimonials.length)} aria-label="Next">
            <Icon name="arrow-right" size={18} />
          </button>
          <span style={{ marginLeft: 12, fontSize: 13, color: 'var(--ink-3)' }}>
            {activeTesti + 1} / {SITE_DATA.testimonials.length}
          </span>
        </div>
      </section>

      {/* INSIGHTS TEASER */}
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div className="sec-head">
            <div className="titlewrap">
              <span className="eyebrow">Market insights</span>
              <h2>What I'm watching this quarter.</h2>
            </div>
            <p className="lead">No fluff. Just clear-eyed market commentary, neighbourhood deep-dives, and the things I'd tell a friend over coffee.</p>
          </div>
          <div className="insights-grid">
            {SITE_DATA.insights.slice(0, 2).map(i => (
              <article key={i.id} className="insight-card" onClick={() => setRoute('insights')}>
                <div className="img"><img src={i.image} alt={i.title} loading="lazy" /></div>
                <div className="meta">
                  <span>{i.category}</span>
                  <span>·</span>
                  <span>{new Date(i.date).toLocaleDateString('en-CA', { month: 'long', day: 'numeric', year: 'numeric' })}</span>
                  <span>·</span>
                  <span>{i.readTime} min read</span>
                </div>
                <h3 className="serif">{i.title}</h3>
                <p className="excerpt">{i.excerpt}</p>
              </article>
            ))}
          </div>
          <div style={{ marginTop: 40, textAlign: 'center' }}>
            <button className="btn btn-ghost" onClick={() => setRoute('insights')}>
              All insights <Icon name="arrow-right" size={16} />
            </button>
          </div>
        </div>
      </section>

      {/* CTA PANEL */}
      <section className="section container">
        <ValuationCta showToast={showToast} setRoute={setRoute} />
      </section>
    </div>
  );
};

const FeaturedListings = ({ listings, openListing, faves, toggleFav }) => {
  if (listings.length === 0) return null;
  return (
    <div className="featured-row">
      {listings.map(l => (
        <ListingCard key={l.id} listing={l} onClick={openListing} faved={faves.includes(l.id)} onFav={toggleFav} />
      ))}
    </div>
  );
};
window.FeaturedListings = FeaturedListings;

const SearchBar = ({ setRoute, t }) => {
  const tr = t || ((k) => k);
  return (
    <div className="hero-search">
      <input type="text" className="input" placeholder={tr('search.placeholder')} />
      <select className="select">
        <option>{tr('search.type')}</option>
        <option>House</option>
        <option>Townhouse</option>
        <option>Condo</option>
      </select>
      <select className="select">
        <option>{tr('search.beds')}</option>
        <option>1+ bed</option>
        <option>2+ beds</option>
        <option>3+ beds</option>
        <option>4+ beds</option>
      </select>
      <select className="select">
        <option>{tr('search.price')}</option>
        <option>Under $750K</option>
        <option>$750K – $1.2M</option>
        <option>$1.2M – $2M</option>
        <option>$2M+</option>
      </select>
      <button className="btn btn-primary" onClick={() => setRoute('listings')}>
        <Icon name="search" size={16} /> {tr('search.btn')}
      </button>
    </div>
  );
};
window.SearchBar = SearchBar;

const ValuationCta = ({ showToast, setRoute }) => {
  const [form, setForm] = React.useState({ address: '', name: '', email: '' });
  const [err, setErr] = React.useState({});
  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.address) next.address = 'Property address required';
    if (!form.name) next.name = 'Your name please';
    if (!form.email || !form.email.includes('@')) next.email = 'Valid email please';
    setErr(next);
    if (Object.keys(next).length === 0) {
      showToast("Got it — Steffanie will be in touch within 24 hours.");
      setForm({ address: '', name: '', email: '' });
    }
  };
  return (
    <div className="cta-panel">
      <div>
        <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>Free · No obligation</span>
        <h2 style={{ marginTop: 14 }}>What's your home worth in today's market?</h2>
        <p className="sub">A real CMA — not an automated estimate. I'll pull recent comps in your building or block, factor in your home's specific features, and send you a candid range within 24 hours.</p>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button className="btn btn-ghost-on-dark" onClick={() => setRoute('contact')}>
            Or just send me a message <Icon name="arrow-right" size={16} />
          </button>
        </div>
      </div>
      <form onSubmit={submit}>
        <div>
          <label className="field-label">Property address</label>
          <input className="input" placeholder="123 Main St, Vancouver" value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
          {err.address && <div className="field-error">{err.address}</div>}
        </div>
        <div>
          <label className="field-label">Your name</label>
          <input className="input" placeholder="Full name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          {err.name && <div className="field-error">{err.name}</div>}
        </div>
        <div>
          <label className="field-label">Email</label>
          <input className="input" type="email" placeholder="you@example.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
          {err.email && <div className="field-error">{err.email}</div>}
        </div>
        <button type="submit" className="btn btn-primary" style={{ marginTop: 6 }}>
          Request a valuation <Icon name="arrow-right" size={16} />
        </button>
      </form>
    </div>
  );
};
window.ValuationCta = ValuationCta;

window.HomePage = HomePage;