/* global React, VEHICLES, fmt$, Eyebrow, SectionHead, VehicleCard, Photo, Reveal, Counter, CTABand, FuzzySearch, LeadForm, TOTAL_INVENTORY, COUNTS */
const { useState, useEffect } = React;

/* ============ HERO ============ */
function Hero({ variant, setPage, openVehicle }) {
  const featured = VEHICLES.filter(v => v.featured);
  const [active, setActive] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % featured.length), 5800);
    return () => clearInterval(t);
  }, [featured.length]);
  const cur = featured[active];

  if (variant === 'minimal') {
    return (
      <section className="hero">
        <div style={{ textAlign: 'center', padding: '40px 0 24px' }} className="rise">
          <Eyebrow>Winchester, VA · Live inventory</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(64px, 12vw, 196px)', lineHeight: 0.92, marginTop: 28, letterSpacing: '-0.04em', maxWidth: '14ch', marginInline: 'auto' }}>
            <span className="mask-line"><span style={{ '--d': '60ms' }}>Honest trucks.</span></span>
            <span className="mask-line"><span style={{ '--d': '180ms' }}><em style={{ color: 'var(--accent)' }}>Honest deals.</em></span></span>
          </h1>
          <p className="rise rise-d2" style={{ maxWidth: 560, margin: '24px auto 0', color: 'var(--fg-mute)', fontSize: 17, lineHeight: 1.65 }}>
            Forty-four used vehicles in the live inventory feed. See price, miles, stock number, and VIN, then call or text the lot to confirm availability.
          </p>
        </div>
        <div className="hero-image-main rise rise-d3" style={{ position: 'relative', aspectRatio: '16/9' }}>
          <Photo hue={cur.hue} photo={cur.photo} aspect="" tag={`Stock ${cur.stock}`} label={`${cur.year} ${cur.make} ${cur.model}`} style={{ position: 'absolute', inset: 0, animation: 'kenburns 22s ease-in-out infinite alternate' }} />
        </div>
        <FuzzySearch setPage={setPage} onPickVehicle={openVehicle} />
      </section>
    );
  }

  return (
    <section className="hero hero-premium">
      <div className="hero-premium-bg" aria-hidden="true"></div>
      <div className="hero-premium-grid">
        <div className="hero-copy rise">
          <Eyebrow>American Dream Motors · Winchester, VA</Eyebrow>
          <h1 className="hero-h1 hero-h1-premium">
            <span className="mask-line"><span style={{ '--d': '80ms' }}>Find the right truck.</span></span>
            <span className="mask-line"><span style={{ '--d': '220ms' }}><em>Reach the lot fast.</em></span></span>
          </h1>
          <p className="hero-lede">
            Current inventory, clear stock numbers, quick contact. Most visitors give us about two minutes, so the site is built around the next action: call, browse, finance, trade, or book a drive.
          </p>
          <div className="hero-cta-row">
            <a href="tel:540-450-5373" className="btn btn-primary btn-lg">Call (540) 450-5373</a>
            <button className="btn btn-lg" onClick={() => setPage('inventory')}>Browse {TOTAL_INVENTORY} vehicles <span className="btn-arrow">→</span></button>
          </div>
          <div className="hero-microgrid">
            {[
              ['Live feed', `${TOTAL_INVENTORY} listed`],
              ['Pickups', `${COUNTS.pickup || 0} on feed`],
              ['Starts at', fmt$(Math.min(...VEHICLES.map(v => v.price)))],
              ['Location', 'Winchester'],
            ].map(([l, v]) => (
              <div className="hero-micro" key={l}>
                <span>{l}</span>
                <strong>{v}</strong>
              </div>
            ))}
          </div>
        </div>

        <aside className="hero-lead-card rise rise-d2">
          <div className="hero-lead-top">
            <span className="chip chip-rust"><span className="chip-dot"/>Fast contact</span>
            <span className="mono">No account required</span>
          </div>
          <LeadForm intent="general" compact={true} idPrefix="hero" />
          <div className="hero-lead-foot">
            <button onClick={() => window.openLead && window.openLead('finance')}>Financing</button>
            <button onClick={() => window.openLead && window.openLead('trade')}>Trade-in</button>
            <button onClick={() => window.openLead && window.openLead('testdrive')}>Test drive</button>
          </div>
        </aside>
      </div>

      <div className="hero-feature-row rise rise-d3">
        <button className="hero-feature-main" onClick={() => openVehicle(cur)}>
          <Photo hue={cur.hue} photo={cur.photo} aspect="" tag={`Featured · Stock ${cur.stock}`} label={`${cur.year} ${cur.make} ${cur.model}`} />
          <div className="hero-feature-copy">
            <span>Featured unit</span>
            <strong>{fmt$(cur.price)}</strong>
            <small>{cur.miles.toLocaleString()} mi · VIN {cur.vin.slice(-6)}</small>
          </div>
        </button>
        <div className="hero-feature-list">
          {featured.slice(1, 4).map((v, i) => (
            <button key={v.id} className={i + 1 === active ? 'active' : ''} onClick={() => { setActive(i + 1); openVehicle(v); }}>
              <span>{v.year} {v.make}</span>
              <strong>{v.model}</strong>
              <em>{fmt$(v.price)}</em>
            </button>
          ))}
        </div>
      </div>

      <FuzzySearch setPage={setPage} onPickVehicle={openVehicle} placeholder="Search stock, VIN, F-150, Wrangler, under $10k..." />
    </section>
  );
}

/* ============ MARQUEE ============ */
function Marquee() {
  const items = ['Ford F-150', 'F-250 PowerStroke', 'F-350 Super Duty', 'Chevy Avalanche', 'GMC Canyon', 'Lincoln Mark LT', 'Jeep Wrangler TJ', 'Ford Ranger', 'OBS Chevy C/K', 'Mercedes S-Class', 'HUMMER H3', 'GMC Yukon XL Denali', 'Ford Mustang'];
  return (
    <div className="marquee">
      {[0, 1].map(k => (
        <div className="marquee-track" key={k} aria-hidden={k === 1}>
          {items.map((m, i) => <div className="marquee-item" key={i}>{m}</div>)}
        </div>
      ))}
    </div>
  );
}

/* ============ STAT BAND ============ */
function StatBand() {
  return (
    <Reveal>
      <div className="stat-band">
        <div className="stat-cell">
          <div className="stat-n"><Counter to={TOTAL_INVENTORY} /></div>
          <div className="stat-l">On the lot</div>
          <div className="stat-d">Live DealerCenter-backed feed. Call to confirm availability before you drive in.</div>
        </div>
        <div className="stat-cell">
          <div className="stat-n"><Counter to={1990} /><span style={{ fontSize: '0.36em', color: 'var(--accent-pop)', marginLeft: 6 }}>&nbsp;→ &apos;19</span></div>
          <div className="stat-l">Years on the page</div>
          <div className="stat-d">Older trucks, work vehicles, SUVs, vans, and value cars.</div>
        </div>
        <div className="stat-cell">
          <div className="stat-n"><Counter to={COUNTS.pickup || 0} /></div>
          <div className="stat-l">Pickups</div>
          <div className="stat-d">Ford, GMC, Chevrolet, Ram, Lincoln, and more.</div>
        </div>
        <div className="stat-cell">
          <div className="stat-n">$<Counter to={Math.min(...VEHICLES.map(v => v.price))} /></div>
          <div className="stat-l">Starts at</div>
          <div className="stat-d">Listed price from the current inventory feed.</div>
        </div>
      </div>
    </Reveal>
  );
}

/* ============ CATEGORIES ============ */
function Categories({ setPage }) {
  const cats = [
    { t: 'Pickups',     n: 22, sub: 'F-Series · Ranger · Avalanche', photo: '1568605117036-5fe5e7bab0b7' },
    { t: 'Heavy Duty',  n: 7,  sub: 'Super Duty · diesel · long bed', photo: '1605236453806-6ff36851218e' },
    { t: 'SUVs',        n: 10, sub: 'Wrangler · Yukon · Sport Trac', photo: '1582639590011-f5a8416d1101' },
    { t: 'Daily Driver',n: 13, sub: 'Sedans · coupes · the Veloster', photo: '1517524008697-84bbe3c3fd98' },
  ];
  return (
    <section className="container section">
      <SectionHead num={2} title={<>Shop by shape.</>} sub="What we&apos;ve got" action={
        <button className="btn btn-sm" onClick={() => setPage('inventory')}>All inventory <span className="btn-arrow">→</span></button>
      } />
      <div className="grid-4">
        {cats.map((c, i) => (
          <Reveal key={c.t} delay={i * 80}>
            <a className="cat-tile" onClick={() => { window.dd && window.dd.track('category_click', { cat: c.t }); setPage('inventory'); }}>
              <Photo photo={c.photo} aspect="4/5" />
              <div className="cat-overlay"></div>
              <div className="cat-body">
                <div className="cat-t">{c.t}</div>
                <div className="cat-n">{c.n} on the lot · {c.sub} →</div>
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ============ FEATURED INVENTORY ============ */
function FeaturedInventory({ setPage, openVehicle }) {
  const featured = VEHICLES.slice(0, 4);
  return (
    <section className="container section">
      <SectionHead
        num={3}
        title={<>This week&apos;s picks.</>}
        sub="Our buyer&apos;s top four"
        action={<button className="btn btn-sm" onClick={() => setPage('inventory')}>View all {TOTAL_INVENTORY} <span className="btn-arrow">→</span></button>}
      />
      <div className="grid-4">
        {featured.map((v, i) => (
          <Reveal key={v.id} delay={i * 80}>
            <VehicleCard v={v} onClick={openVehicle} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ============ TWO MINUTE PATH ============ */
function TwoMinutePath({ setPage }) {
  const cards = [
    {
      n: '01',
      t: 'Find the right unit',
      d: `${TOTAL_INVENTORY} vehicles in the live feed with price, miles, stock number, and VIN up front.`,
      cta: 'Browse inventory',
      action: () => setPage('inventory'),
    },
    {
      n: '02',
      t: 'Ask the lot directly',
      d: 'Call or text the sales desk. No account, no portal, no waiting for a hidden form to load.',
      cta: 'Call now',
      action: () => window.open('tel:540-450-5373'),
    },
    {
      n: '03',
      t: 'Get into the CRM',
      d: 'Every website lead creates a follow-up task in Twenty so it lands in the actual dealership workflow.',
      cta: 'Send my info',
      action: () => window.openLead && window.openLead('general'),
    },
  ];
  return (
    <section className="container section-tight">
      <div className="process" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        {cards.map(card => (
          <button key={card.n} className="process-step" onClick={card.action} style={{ textAlign: 'left', cursor: 'pointer' }}>
            <div className="process-num">/ {card.n}</div>
            <div style={{ marginTop: 'auto' }}>
              <div className="process-t">{card.t}</div>
              <div className="process-d" style={{ marginTop: 10 }}>{card.d}</div>
              <div className="btn btn-sm btn-ghost" style={{ marginTop: 22 }}>{card.cta} <span className="btn-arrow">→</span></div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

/* ============ WHY AMD ============ */
function WhyAMD() {
  const points = [
    { t: 'Truck-heavy inventory', d: `${COUNTS.pickup || 0} pickups in today’s feed, plus SUVs, vans, coupes, sedans, and value cars.` },
    { t: 'Plain first step', d: 'Send name and phone, then a human follows up. No long account flow just to ask a question.' },
    { t: 'Winchester local', d: '691 N. Loudoun St, Winchester, VA. Call or text (540) 450-5373 before you drive in.' },
    { t: 'Financing path', d: 'Start the conversation online, then finish the real approval with the lot.' },
  ];
  return (
    <section className="container section">
      <SectionHead num={4} title={<>Why people start here.</>} sub="Built for quick decisions" />
      <div className="grid-4">
        {points.map((p, i) => (
          <Reveal key={p.t} delay={i * 70}>
            <div className="award" style={{ minHeight: 210, alignItems: 'flex-start', textAlign: 'left' }}>
              <div className="process-num">/ {String(i + 1).padStart(2, '0')}</div>
              <div className="award-t" style={{ marginTop: 28 }}>{p.t}</div>
              <div className="award-d" style={{ marginTop: 10, lineHeight: 1.55 }}>{p.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ============ THE YARDSTICK (truck inspection) ============ */
function Yardstick() {
  const items = [
    { l: 'Frame, hitch &amp; bed', meta: 'Lifted, measured, photographed', status: 'ok' },
    { l: 'Engine &amp; transmission', meta: 'OBD scan + road test',  status: 'ok' },
    { l: '4WD case &amp; axles', meta: 'High, low, locking checked',  status: 'ok' },
    { l: 'Cooling &amp; HVAC', meta: 'Coolant tested, vents measured',  status: 'ok' },
    { l: 'Brakes &amp; suspension', meta: 'Pad gauge, ball joints, shocks', status: 'ok' },
    { l: 'Electrical &amp; cabin', meta: 'Every switch, light, gauge',  status: 'note' },
  ];
  return (
    <section className="container section">
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
        <Reveal>
          <Eyebrow num={4}>The yardstick</Eyebrow>
          <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 96px)', marginTop: 22, lineHeight: 0.93, letterSpacing: '-0.025em' }}>
            We check it<br/>
            top to bottom.<br/>
            <em style={{ color: 'var(--accent)' }}>You see the report.</em>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-mute)', maxWidth: 480, marginTop: 26 }}>
            Every truck goes up on the lift before it hits the page. We check the frame for rust, scan the computer, road-test it on a 12-mile loop with hills and a stop sign that climbs. Whatever we find — good or bad — goes in the listing.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
            <button className="btn btn-primary" onClick={() => window.openLead && window.openLead('report')}>See a sample report <span className="btn-arrow">→</span></button>
            <a href="tel:540-450-5373" className="btn btn-ghost">Ask how we price</a>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="yardstick">
            <div className="yard-head">
              <div>
                <div className="yard-h">Pre-sale check · {VEHICLES[0].stock}</div>
                <div className="yard-title">{VEHICLES[0].year} {VEHICLES[0].make} {VEHICLES[0].model}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="yard-h">Signed</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 20, marginTop: 6 }}>R. Mahmood</div>
              </div>
            </div>
            {items.map((it, i) => (
              <div key={i} className="yard-row">
                <div className="yard-n">{String(i + 1).padStart(2, '0')}</div>
                <div className="yard-l" dangerouslySetInnerHTML={{ __html: it.l }}></div>
                <div className="yard-meta" dangerouslySetInnerHTML={{ __html: it.meta }}></div>
                <div className={'yard-status ' + (it.status === 'ok' ? 'ok' : 'note')}>{it.status === 'ok' ? '✓ PASS' : '◐ NOTED'}</div>
              </div>
            ))}
            <div className="yard-foot">
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', color: 'var(--fg-dim)', fontWeight: 600 }}>VIN {VEHICLES[0].vin}</div>
              <div className="chip chip-sage"><span className="chip-dot"/>Ready for the lot</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ THE SHOP (atmosphere) ============ */
function TheShop() {
  return (
    <section style={{ position: 'relative', margin: '40px 44px', borderRadius: 8, overflow: 'hidden' }}>
      <Reveal>
        <div className="parallax-img" style={{ position: 'relative', aspectRatio: '21/9', minHeight: 420, overflow: 'hidden', borderRadius: 8 }}>
          <Photo photo="1486825586573-7131f7991bdd" aspect="" hue={28} style={{ position: 'absolute', inset: 0 }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(90deg, rgba(20,17,13,0.82) 0%, rgba(20,17,13,0.32) 55%, rgba(20,17,13,0) 100%)',
          }}/>
          <div style={{
            position: 'absolute', inset: 0,
            padding: 'clamp(28px, 6vw, 80px)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: 'var(--bone)',
          }}>
            <div>
              <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.22em', opacity: 0.75 }}>691 N. LOUDOUN ST · WINCHESTER, VA</div>
              <h2 className="display" style={{ fontSize: 'clamp(48px, 7vw, 104px)', lineHeight: 0.93, letterSpacing: '-0.03em', marginTop: 22, maxWidth: '14ch' }}>
                Built on the<br/>
                <em style={{ color: 'var(--accent-soft)' }}>Shenandoah Valley.</em>
              </h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 'clamp(20px, 5vw, 64px)', alignItems: 'end' }}>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', opacity: 0.65, fontWeight: 600 }}>SINCE</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 'clamp(38px, 4vw, 56px)', letterSpacing: '-0.02em', marginTop: 6 }}>2018</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', opacity: 0.65, fontWeight: 600 }}>FAMILIES SERVED</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 'clamp(38px, 4vw, 56px)', letterSpacing: '-0.02em', marginTop: 6 }}>1,600+</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', opacity: 0.65, fontWeight: 600 }}>HRS / WEEK ON THE LIFT</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 'clamp(38px, 4vw, 56px)', letterSpacing: '-0.02em', marginTop: 6 }}>54</div>
              </div>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

/* ============ BRAND WALL ============ */
function BrandWall() {
  const brands = [
    { b: 'Ford', n: 26 },
    { b: 'GMC', n: 4 },
    { b: 'Chevrolet', n: 3 },
    { b: 'Jeep', n: 4 },
    { b: 'Lincoln', n: 2 },
    { b: 'Ram', n: 2 },
    { b: 'Mercedes-Benz', n: 3 },
    { b: 'BMW', n: 2 },
    { b: 'Cadillac', n: 1 },
    { b: 'Dodge', n: 2 },
    { b: 'HUMMER', n: 1 },
    { b: 'Hyundai', n: 2 },
  ];
  return (
    <section className="container section-tight">
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <Eyebrow num={5}>What&apos;s on the lot</Eyebrow>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--fg-dim)', textTransform: 'uppercase', fontWeight: 500 }}>12 makes · 44 vehicles</div>
      </div>
      <div className="brand-wall">
        {brands.map((b) => (
          <a key={b.b} className="brand-tile">
            {b.b}
            <small>{b.n} on the lot</small>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ============ CUSTOMER WALL ============ */
function CustomerWall() {
  return (
    <section className="container section">
      <SectionHead num={6} title={<>Real trucks.<br/>Real folks.</>} sub="Winchester &amp; the Valley" />
      <Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridTemplateRows: 'repeat(2, 1fr)', gap: 8, aspectRatio: '16/9' }}>
          <div style={{ gridRow: '1 / 3', position: 'relative', borderRadius: 6, overflow: 'hidden' }}>
            <Photo photo="1605236453806-6ff36851218e" aspect="" tag="@dale.r" label="13 F-350 · Front Royal" style={{ position: 'absolute', inset: 0 }} />
          </div>
          <div style={{ position: 'relative', borderRadius: 6, overflow: 'hidden' }}>
            <Photo photo="1546614042-7df3c24c9e5d" aspect="" tag="@karen.m" label="04 F-350 Lariat · Berryville" style={{ position: 'absolute', inset: 0 }} />
          </div>
          <div style={{ position: 'relative', borderRadius: 6, overflow: 'hidden' }}>
            <Photo photo="1582639590011-f5a8416d1101" aspect="" tag="@hank" label="TJ Wrangler · Strasburg" style={{ position: 'absolute', inset: 0 }} />
          </div>
          <div style={{ position: 'relative', borderRadius: 6, overflow: 'hidden' }}>
            <Photo photo="1532581140115-3e355d1ed1de" aspect="" tag="@junior_b" label="90 C/K · Stephens City" style={{ position: 'absolute', inset: 0 }} />
          </div>
          <div style={{ position: 'relative', borderRadius: 6, overflow: 'hidden' }}>
            <Photo photo="1612825173281-9a193378527e" aspect="" tag="@tyler" label="14 F-150 XLT · Winchester" style={{ position: 'absolute', inset: 0 }} />
          </div>
        </div>
      </Reveal>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, alignItems: 'baseline', gap: 20, flexWrap: 'wrap' }}>
        <p style={{ fontSize: 14, color: 'var(--fg-mute)', maxWidth: 480, lineHeight: 1.65 }}>
          Tag <strong>#AmericanDreamWinchester</strong> when you drive home. We pick a customer photo every Friday and put it on the lot window.
        </p>
        <button className="btn btn-sm">See the wall <span className="btn-arrow">→</span></button>
      </div>
    </section>
  );
}

/* ============ PROCESS ============ */
function Process({ setPage }) {
  const steps = [
    { n: '01', t: 'See the real feed', d: 'Price, miles, stock number, and VIN are visible before you talk to anyone.', icon: '⌕' },
    { n: '02', t: 'Call, text, or send the form', d: 'One tap from the page. No account, no long portal, no hidden contact path.', icon: '☎' },
    { n: '03', t: 'Confirm the details', d: 'The lot confirms availability, answers vehicle questions, and sets the next step.', icon: '↻' },
    { n: '04', t: 'Come see it', d: 'Drive the vehicle, look it over, and decide with the sales desk in person.', icon: '✓' },
  ];
  return (
    <section className="container section">
      <SectionHead num={7} title={<>From browse<br/>to contact, fast.</>} sub="How the site should work" />
      <Reveal>
        <div className="process">
          {steps.map((s) => (
            <div className="process-step" key={s.n}>
              <div className="process-icon">{s.icon}</div>
              <div className="process-num">/ {s.n}</div>
              <div style={{ marginTop: 'auto' }}>
                <div className="process-t" dangerouslySetInnerHTML={{ __html: s.t }}></div>
                <div className="process-d" style={{ marginTop: 10 }} dangerouslySetInnerHTML={{ __html: s.d }}></div>
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

/* ============ TESTIMONIALS ============ */
function Testimonials() {
  const [active, setActive] = useState(0);
  const quotes = [
    { q: 'Drove three hours from Lynchburg. They had the truck pulled up front, the keys on the dash, and a folder with every receipt. Cash deal in forty minutes. That&apos;s how it should be.', by: 'Dale R.', car: '2013 F-350 PowerStroke', loc: 'Front Royal, VA' },
    { q: 'I came in skeptical because the price was below what other lots had it for. The Carfax was on the windshield. They handed me the keys, said come back when I&apos;m done. I came back and bought it.', by: 'Karen M.', car: '2004 F-350 Lariat', loc: 'Berryville, VA' },
    { q: 'My nephew called me about the OBS Chevy on their lot. I drove up from Charlottesville the next morning. It was exactly what the page said it was. Patina and all.', by: 'Hank D.', car: '1990 Chevy C/K 1500', loc: 'Strasburg, VA' },
  ];
  useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % quotes.length), 8500);
    return () => clearInterval(t);
  }, [quotes.length]);
  return (
    <section className="container section">
      <SectionHead num={8} title={<>What folks say<br/>after they drive off.</>} sub="Google · DealerRater · the porch" />
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64, alignItems: 'start' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--display)', fontSize: 72, lineHeight: 0.6, color: 'var(--accent)', marginBottom: 22 }}>&ldquo;</div>
          <blockquote className="quote" style={{ margin: 0 }} dangerouslySetInnerHTML={{ __html: quotes[active].q }}></blockquote>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 30 }}>
            <div style={{
              width: 46, height: 46, borderRadius: '50%',
              background: 'var(--bg-2)', border: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--display)', fontSize: 20, color: 'var(--accent)',
            }}>{quotes[active].by[0]}</div>
            <div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 20 }}>{quotes[active].by}</div>
              <div className="quote-by" style={{ margin: 0 }}>{quotes[active].car} · {quotes[active].loc}</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 36 }}>
            {quotes.map((_, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                width: i === active ? 36 : 16, height: 2,
                background: i === active ? 'var(--accent)' : 'var(--line-strong)',
                transition: 'all 320ms',
              }} aria-label={`Quote ${i+1}`}/>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="stat-band" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              <div className="stat-cell"><div className="stat-n"><Counter to={44} /></div><div className="stat-l">Winchester dealer</div></div>
              <div className="stat-cell"><div className="stat-n"><Counter to={184} /></div><div className="stat-l">Reviews</div></div>
            </div>
            <div className="stat-band" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              <div className="stat-cell"><div className="stat-n"><Counter to={8} /><span style={{ fontSize: '0.4em', color: 'var(--accent-pop)', marginLeft: 8 }}>yrs</span></div><div className="stat-l">In Winchester</div></div>
              <div className="stat-cell"><div className="stat-n"><Counter to={1600} suffix="+" /></div><div className="stat-l">Vehicles sold</div></div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ AWARDS ============ */
function Awards() {
  const items = [
    { t: 'A+ BBB', d: 'Better Business Bureau' },
    { t: 'Winchester, VA', d: 'Used cars and trucks' },
    { t: 'VIADA Member', d: 'Virginia Independent Auto' },
    { t: 'Carfax Advantage', d: 'Free report on every car' },
    { t: 'Family-owned', d: 'Eight years in Winchester' },
  ];
  return (
    <section className="container section-tight">
      <div className="awards">
        {items.map(a => (
          <div className="award" key={a.t}>
            <div className="award-icon">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1.5l2.7 7.3 7.8.4-6.1 4.9 2.1 7.5L12 17l-6.5 4.6 2.1-7.5L1.5 9.2l7.8-.4z" /></svg>
            </div>
            <div className="award-t">{a.t}</div>
            <div className="award-d">{a.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============ HOME COMPOSITION ============ */
function Home({ setPage, openVehicle, hero }) {
  return (
    <>
      <Hero variant={hero} setPage={setPage} openVehicle={openVehicle} />
      <StatBand />
      <TwoMinutePath setPage={setPage} />
      <FeaturedInventory setPage={setPage} openVehicle={openVehicle} />
      <WhyAMD />
      <Process setPage={setPage} />
      <CTABand setPage={setPage} />
    </>
  );
}

window.Home = Home;