// Alba Cars — Home page
const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH, useRef: useRefH } = React;

function HomePage({ setRoute, setVehicleId, heroVariant = 'split' }) {
  return (
    <div>
      {heroVariant === 'split' ? <HeroSplit setRoute={setRoute} /> : <HeroCinematic setRoute={setRoute} />}
      <TrustBand />
      <FeaturedCarousel setRoute={setRoute} setVehicleId={setVehicleId} />
      <TwoSidedSection setRoute={setRoute} />
      <BrandWall setRoute={setRoute} />
      <ProcessSection setRoute={setRoute} />
      <FinanceBand setRoute={setRoute} />
      <ShowroomSection setRoute={setRoute} />
      <PressStrip />
      <FAQSection />
    </div>
  );
}

// =============================================================
// HERO — Split (two-sided: Buy / Sell)
// =============================================================
function HeroSplit({ setRoute }) {
  return (
    <section style={{ background: 'var(--noir)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ paddingTop: 120, paddingBottom: 0 }}>
        {/* Headline band */}
        <div className="container-wide" style={{ paddingTop: 32, paddingBottom: 56 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, marginBottom: 36, flexWrap: 'wrap' }}>
            <Pill live>Live · 212 cars in stock right now</Pill>
            <div style={{ display: 'flex', gap: 18, fontSize: 12, color: 'var(--muted-dk)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="pin" size={13} /> Al Quoz, Dubai</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="calendar" size={13} /> Open today · 09:30 – 22:00</span>
            </div>
          </div>
          <h1 className="display" style={{
            fontSize: 'clamp(48px, 8.4vw, 138px)',
            letterSpacing: '-0.045em',
            lineHeight: 0.92,
            color: '#fff',
          }}>
            Dubai's most trusted<br />
            <span style={{
              fontFamily: 'var(--f-display)', fontStyle: 'italic', fontWeight: 300,
              color: 'var(--gold)',
            }}>pre-owned</span> showroom.
          </h1>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <p style={{ fontSize: 17, color: 'var(--muted-dk)', maxWidth: 520, lineHeight: 1.55 }}>
              Certified pre-owned British &amp; German luxury, plus a fast, fair offer if you're selling.
              <strong style={{ color: '#fff' }}> Sell your car in ~2 hours.</strong> Payment after RTA verification &amp; pick-up.
            </p>
            <div style={{ display: 'flex', gap: 24, color: 'var(--muted-dk)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              <span>150+ Point</span><span style={{ color: 'var(--gold)' }}>·</span>
              <span>RTA Certified</span><span style={{ color: 'var(--gold)' }}>·</span>
              <span>1-Yr Warranty</span>
            </div>
          </div>
        </div>

        {/* Split panels */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: window.innerWidth > 980 ? '1fr 1fr' : '1fr',
          gap: 0,
          borderTop: '1px solid var(--line-dk)',
        }}>
          <HeroPanel
            kicker="01 — Buy"
            title="Browse 212+ pre-owned, certified."
            sub="Every car: 150+ point inspection, RTA certified, 1-year warranty. Filterable by make, body type, year, and price."
            image="media/showroom-cars.webp"
            cta="Browse Inventory"
            ctaIcon="arrow-right"
            onCta={() => setRoute('buy')}
            sideCta={{ label: 'Just Arrived', sub: '7 new this week' }}
            align="left"
          />
          <HeroPanel
            kicker="02 — Sell"
            title="Get a fair offer in ~2 hours."
            sub="Free in-person inspection, instant valuation, payment after RTA verification. Trade-in welcome — we settle your loan."
            image="media/showroom-interior.webp"
            cta="Get Instant Offer"
            ctaIcon="arrow-up-right"
            onCta={() => setRoute('sell')}
            sideCta={{ label: 'Avg time', sub: '~2 hrs to cash' }}
            align="right"
            accent
          />
        </div>
      </div>
    </section>
  );
}

function HeroPanel({ kicker, title, sub, image, cta, ctaIcon, onCta, sideCta, align, accent }) {
  return (
    <div style={{
      position: 'relative',
      minHeight: 600,
      overflow: 'hidden',
      background: accent ? 'var(--alba-red-deep)' : 'var(--noir)',
      borderRight: align === 'left' && window.innerWidth > 980 ? '1px solid var(--line-dk)' : 'none',
    }}>
      <img src={image} alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover',
        opacity: accent ? 0.35 : 0.55,
        filter: accent ? 'saturate(0.7)' : 'brightness(0.7)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: accent
          ? 'linear-gradient(180deg, rgba(110,20,20,0.4) 0%, rgba(110,20,20,0.9) 100%)'
          : 'linear-gradient(180deg, rgba(11,13,16,0.2) 0%, rgba(11,13,16,0.9) 100%)',
      }} />
      <div style={{
        position: 'relative', zIndex: 2,
        padding: 'clamp(40px, 5vw, 70px)',
        minHeight: 600,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        color: '#fff',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
          <Eyebrow>{kicker}</Eyebrow>
          {sideCta && (
            <div style={{
              padding: '10px 16px',
              border: '1px solid rgba(255,255,255,0.2)',
              borderRadius: 8,
              backdropFilter: 'blur(8px)',
              background: 'rgba(0,0,0,0.2)',
            }}>
              <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)' }}>{sideCta.label}</div>
              <div className="mono" style={{ fontSize: 14, marginTop: 3, color: '#fff' }}>{sideCta.sub}</div>
            </div>
          )}
        </div>
        <div>
          <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', maxWidth: 520, letterSpacing: '-0.035em' }}>
            {title}
          </h2>
          <p style={{ marginTop: 16, fontSize: 15.5, maxWidth: 460, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55 }}>{sub}</p>
          <div style={{ marginTop: 32 }}>
            <Btn variant={accent ? 'light' : 'primary'} icon={ctaIcon} onClick={onCta}>{cta}</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// HERO — Cinematic (alt variant — single full-bleed)
// =============================================================
function HeroCinematic({ setRoute }) {
  return (
    <section style={{ position: 'relative', height: '100vh', minHeight: 700, color: '#fff', overflow: 'hidden', background: 'var(--noir)' }}>
      <img src="media/showroom-cars.webp" alt="Alba Cars showroom" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', opacity: 0.7,
        animation: 'kenburns 30s ease-in-out infinite alternate',
      }} />
      <style>{`@keyframes kenburns { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.14) translate(-2%, -2%); } }`}</style>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(11,13,16,0.6) 0%, rgba(11,13,16,0.2) 30%, rgba(11,13,16,0.95) 100%)',
      }} />
      <div className="container-wide" style={{
        position: 'relative', zIndex: 2, height: '100%',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        paddingBottom: 80, paddingTop: 130,
      }}>
        <div style={{ marginBottom: 24 }}><Pill live>Live · 212 cars in stock</Pill></div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 152px)', maxWidth: 1200, letterSpacing: '-0.045em' }}>
          A used luxury car<br/>
          <span style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--gold)' }}>shouldn't feel used.</span>
        </h1>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <p style={{ fontSize: 18, maxWidth: 580, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
            Dubai's most trusted pre-owned showroom — British &amp; German luxury, every car 150+ point inspected, RTA certified, and warrantied for a year.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <Btn variant="light" icon="arrow-right" onClick={() => setRoute('buy')}>Browse Cars</Btn>
            <Btn variant="ghost" icon="arrow-up-right" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.4)' }} onClick={() => setRoute('sell')}>Sell Your Car</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// TRUST BAND
// =============================================================
function TrustBand() {
  return (
    <div style={{ background: 'var(--noir)', color: 'var(--paper-dk)' }}>
      <div className="container-wide" style={{ padding: 0 }}>
        <TrustStrip inverted />
      </div>
    </div>
  );
}

// =============================================================
// FEATURED — horizontal scroll of cars
// =============================================================
function FeaturedCarousel({ setRoute, setVehicleId }) {
  const featured = useMemoH(() => VEHICLES.slice(0, 8), []);
  const scrollerRef = useRefH(null);

  const scroll = (dir) => {
    scrollerRef.current?.scrollBy({ left: dir * 440, behavior: 'smooth' });
  };

  return (
    <section className="section">
      <div className="container-wide">
        <SectionHead
          eyebrow="Just Arrived · Featured"
          title="Eight cars worth a second look."
          sub="A curated slice from this week's arrivals. Every car: 150+ point inspected, RTA certified, 1-year warranty."
          actions={
            <>
              <button onClick={() => scroll(-1)} style={arrowBtn}><Icon name="arrow-left" size={16} /></button>
              <button onClick={() => scroll(1)} style={arrowBtn}><Icon name="arrow-right" size={16} /></button>
              <Btn variant="ghost" icon="arrow-right" onClick={() => setRoute('buy')}>View all 212</Btn>
            </>
          }
        />
        <div ref={scrollerRef} style={{
          display: 'grid',
          gridAutoFlow: 'column',
          gridAutoColumns: 'minmax(360px, 1fr)',
          gap: 24,
          overflowX: 'auto',
          padding: '4px 0 30px',
          scrollSnapType: 'x mandatory',
          scrollbarWidth: 'none',
        }} className="scroll-x">
          <style>{`.scroll-x::-webkit-scrollbar { display: none; }`}</style>
          {featured.map(v => (
            <VehicleCard key={v.id} v={v} onClick={() => { setVehicleId(v.id); setRoute('vehicle'); window.scrollTo({top:0}); }} />
          ))}
        </div>
      </div>
    </section>
  );
}

const arrowBtn = {
  width: 44, height: 44, borderRadius: 999,
  background: 'transparent', border: '1px solid var(--border)',
  display: 'grid', placeItems: 'center',
  color: 'var(--text)', cursor: 'pointer',
};

// Vehicle card — used in carousels + inventory grid
function VehicleCard({ v, onClick, compact }) {
  const isPOA = v.price == null;
  return (
    <article className="veh-card" onClick={onClick} style={{ scrollSnapAlign: 'start' }}>
      <div className="veh-card-img">
        <img src={v.photo} alt={`${v.year} ${v.make} ${v.model}`} loading="lazy" />
        <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>
          {v.tags?.includes('Just Arrived') && (
            <span style={chip('var(--alba-red)', '#fff')}>● Just Arrived</span>
          )}
          {v.tags?.includes('POA') && (
            <span style={chip('var(--ink)', '#fff')}>POA</span>
          )}
          {v.tags?.includes('Performance') && (
            <span style={chip('var(--ink)', '#fff')}>Performance</span>
          )}
          {v.tags?.includes('Electric') && (
            <span style={chip('#0066B2', '#fff')}>Electric</span>
          )}
        </div>
        <div style={{ position: 'absolute', top: 14, right: 14 }}>
          <button onClick={(e) => { e.stopPropagation(); }} style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'rgba(255,255,255,0.9)', border: 'none',
            display: 'grid', placeItems: 'center', cursor: 'pointer',
            backdropFilter: 'blur(4px)',
          }}>
            <Icon name="heart" size={14} stroke={1.8} />
          </button>
        </div>
        <div style={{
          position: 'absolute', bottom: 12, left: 12,
          padding: '5px 10px', background: 'rgba(11,13,16,0.78)',
          color: '#fff', borderRadius: 4,
          fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.05em',
        }}>
          {v.stockId}
        </div>
      </div>
      <div style={{ padding: '22px 22px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', fontFamily: 'var(--f-display)', fontWeight: 500 }}>
            {v.year} · {v.make}
          </div>
          <h3 className="display" style={{ fontSize: 22, marginTop: 6, letterSpacing: '-0.02em' }}>
            {v.model} <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>{v.variant}</span>
          </h3>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4,
          padding: '14px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
        }}>
          <CardSpec icon="gauge" v={`${(v.mileage/1000).toFixed(1)}k km`} />
          <CardSpec icon="fuel" v={v.engine.split(' ')[0]} />
          <CardSpec icon="transmission" v={v.trans.split(' ')[0].replace('AMG','')} />
          <CardSpec icon="cog" v={v.drive} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <div>
            <div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--f-display)' }}>
              {isPOA ? 'Inquire' : 'Demo price'}
            </div>
            <div className="mono" style={{ fontSize: 19, fontWeight: 600, marginTop: 4 }}>
              {fmtAED(v.price)}
            </div>
          </div>
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: 'var(--ink)', color: '#fff', border: 'none',
            padding: '12px 16px', borderRadius: 999,
            fontFamily: 'var(--f-display)', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            cursor: 'pointer',
          }}>
            View <Icon name="arrow-right" size={13} />
          </button>
        </div>
      </div>
    </article>
  );
}

function chip(bg, fg) {
  return {
    background: bg, color: fg,
    padding: '4px 10px', borderRadius: 4,
    fontFamily: 'var(--f-display)', fontSize: 10, fontWeight: 500,
    letterSpacing: '0.1em', textTransform: 'uppercase',
  };
}

function CardSpec({ icon, v }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text)' }}>
      <span style={{ color: 'var(--text-muted)' }}><Icon name={icon} size={13} /></span>
      <span className="mono" style={{ fontSize: 11.5 }}>{v}</span>
    </div>
  );
}

// =============================================================
// TWO-SIDED — Buy + Sell mirrored cards
// =============================================================
function TwoSidedSection({ setRoute }) {
  return (
    <section className="section" style={{ background: 'var(--surface-2)' }}>
      <div className="container-wide">
        <SectionHead
          eyebrow="The Two-Sided Model"
          title="Buy or sell — both ways, both fast."
          sub="One showroom, two careers. We're equally good at finding you the right car as we are at writing you a cheque for the one in your driveway."
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: window.innerWidth > 900 ? '1fr 1fr' : '1fr',
          gap: 24,
        }}>
          <ProcessCard
            num="01"
            steps={[
              { n: '1', t: 'Browse Inventory', d: 'Filter 212+ cars by make, body, year, or price. Reserve online or walk in.' },
              { n: '2', t: 'Book or Visit', d: 'Reserve your car, or visit our Al Quoz showroom for a test drive.' },
              { n: '3', t: 'Drive With Confidence', d: 'Every car undergoes a rigorous 150+ point inspection.' },
              { n: '4', t: 'Complete Transparency', d: 'Full pricing and vehicle history. RTA & bank paperwork in-house.' },
            ]}
            title="Buying a used car in Dubai — simple &amp; transparent."
            cta="Browse Cars"
            onCta={() => setRoute('buy')}
            image="media/inv/bmw-x7.webp"
          />
          <ProcessCard
            num="02"
            steps={[
              { n: '1', t: 'Share Your Car Details', d: 'A few quick details. We give you the best price instantly.' },
              { n: '2', t: 'Free Inspection', d: 'Our experts inspect in person and present the final offer.' },
              { n: '3', t: 'Secure Payment & Pick-Up', d: 'Payment after RTA verification, car pick-up arranged.' },
            ]}
            title="Sell your car in ~2 hours — instant offer, no haggling."
            cta="Get Instant Offer"
            onCta={() => setRoute('sell')}
            image="media/inv/mercedes-g63.webp"
            accent
          />
        </div>
      </div>
    </section>
  );
}

function ProcessCard({ num, steps, title, cta, onCta, image, accent }) {
  return (
    <div style={{
      background: accent ? 'var(--noir)' : 'var(--surface)',
      color: accent ? '#fff' : 'var(--text)',
      borderRadius: 14,
      border: accent ? 'none' : '1px solid var(--border)',
      overflow: 'hidden',
    }}>
      <div style={{ position: 'relative', aspectRatio: '21/9', overflow: 'hidden' }}>
        <img src={image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: accent ? 'brightness(0.6)' : 'none' }} />
        <div style={{
          position: 'absolute', top: 24, left: 24,
          fontFamily: 'var(--f-mono)', fontSize: 13,
          color: '#fff', background: 'rgba(0,0,0,0.55)',
          padding: '5px 12px', borderRadius: 4, letterSpacing: '0.1em',
        }}>
          {num} {accent ? 'Sell' : 'Buy'}
        </div>
      </div>
      <div style={{ padding: 36 }}>
        <h3 className="display" style={{ fontSize: 28, letterSpacing: '-0.025em' }}>{title}</h3>
        <ol style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 4 }}>
          {steps.map((s, i) => (
            <li key={i} style={{
              display: 'grid',
              gridTemplateColumns: '36px 1fr',
              gap: 18, padding: '16px 0',
              borderTop: '1px solid ' + (accent ? 'var(--line-dk)' : 'var(--border)'),
              alignItems: 'flex-start',
            }}>
              <span className="mono" style={{
                fontSize: 13,
                color: accent ? 'var(--gold)' : 'var(--alba-red)',
              }}>0{s.n}</span>
              <div>
                <div style={{ fontFamily: 'var(--f-display)', fontWeight: 500, fontSize: 16 }}>{s.t}</div>
                <div style={{ fontSize: 14, color: accent ? 'var(--muted-dk)' : 'var(--text-muted)', marginTop: 4, lineHeight: 1.5 }}>{s.d}</div>
              </div>
            </li>
          ))}
        </ol>
        <div style={{ marginTop: 32 }}>
          <Btn variant={accent ? 'light' : 'dark'} icon="arrow-right" onClick={onCta}>{cta}</Btn>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// BRAND WALL — typographic
// =============================================================
function BrandWall({ setRoute }) {
  return (
    <section className="section">
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 50, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>Brand Roster · 17 marques</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4.6vw, 60px)', marginTop: 16 }}>British &amp; German lead, the rest curated.</h2>
          </div>
          <Btn variant="ghost" icon="arrow-right" onClick={() => setRoute('buy')}>Shop by brand</Btn>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 0,
          borderTop: '1px solid var(--border)',
        }}>
          {BRANDS.map((b, i) => {
            const count = VEHICLES.filter(v => v.make === b).length;
            return (
              <button key={b} onClick={() => setRoute('buy')} style={{
                background: 'none', border: 'none',
                borderRight: '1px solid var(--border)',
                borderBottom: '1px solid var(--border)',
                padding: '28px 24px',
                textAlign: 'left',
                cursor: count ? 'pointer' : 'default',
                opacity: count ? 1 : 0.5,
                transition: 'background 0.15s',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}
              onMouseEnter={(e) => count && (e.currentTarget.style.background = 'var(--surface-2)')}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
              >
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>
                  {count} {count === 1 ? 'car' : 'cars'}
                </div>
                <div className="display" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>{b}</div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// PROCESS — 150+ point inspection breakdown
// =============================================================
function ProcessSection({ setRoute }) {
  const buckets = [
    { n: 38, t: 'Engine & Drivetrain', items: ['Compression test', 'Oil & fluid analysis', 'Belt & pulley inspection', 'Mounts, gaskets, seals'] },
    { n: 24, t: 'Transmission & Clutch', items: ['Shift quality road test', 'Fluid level & condition', 'Selector, cables, mounts'] },
    { n: 32, t: 'Body & Paint', items: ['Panel gap measurement', 'Paint depth gauge (full car)', 'Re-spray detection', 'Underbody corrosion'] },
    { n: 28, t: 'Electronics & ADAS', items: ['Full OBD diagnostic scan', 'ADAS calibration check', 'Infotainment & connectivity'] },
    { n: 18, t: 'Suspension & Brakes', items: ['Pad & disc wear', 'Bushings, links, struts', 'Wheel alignment & tracking'] },
    { n: 14, t: 'Interior & Comfort', items: ['Upholstery, trims, AC', 'All seat motors & memory', 'Keys, fobs, remotes'] },
  ];
  return (
    <section className="section" style={{ background: 'var(--noir)', color: '#fff' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1fr 1.4fr' : '1fr', gap: 60, marginBottom: 70 }}>
          <div>
            <Eyebrow>The 150+ Point Inspection</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.8vw, 64px)', marginTop: 18, color: '#fff' }}>
              We don't list a car<br/>we wouldn't drive ourselves.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 17, color: 'var(--muted-dk)', maxWidth: 580, lineHeight: 1.6 }}>
              Every Alba car passes a 154-point inspection across six systems — measured, photographed, and signed off before it ever lands on a stock card. Fail any item and the car doesn't make the floor.
            </p>
            <p style={{ marginTop: 16, fontSize: 17, color: 'var(--muted-dk)', maxWidth: 580, lineHeight: 1.6 }}>
              You see the full report on every vehicle page, alongside the 1-year warranty terms.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: window.innerWidth > 900 ? 'repeat(3, 1fr)' : 'repeat(auto-fit, minmax(250px, 1fr))',
          gap: 0,
          border: '1px solid var(--line-dk)',
        }}>
          {buckets.map((b, i) => (
            <div key={b.t} style={{
              padding: '36px 32px',
              borderRight: (i % 3 !== 2 && window.innerWidth > 900) ? '1px solid var(--line-dk)' : 'none',
              borderBottom: (i < 3 && window.innerWidth > 900) ? '1px solid var(--line-dk)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span className="display mono" style={{ fontSize: 48, color: 'var(--gold)', letterSpacing: '-0.04em' }}>{b.n}</span>
                <span style={{ fontSize: 12, color: 'var(--muted-dk)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>checks</span>
              </div>
              <h3 className="display" style={{ fontSize: 22, color: '#fff', letterSpacing: '-0.02em' }}>{b.t}</h3>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {b.items.map(it => (
                  <li key={it} style={{ fontSize: 13.5, color: 'var(--muted-dk)', display: 'flex', gap: 10 }}>
                    <span style={{ color: 'var(--alba-red-bright)' }}>—</span> {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 48, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
            <div>
              <div className="display mono" style={{ fontSize: 56, color: 'var(--gold)', letterSpacing: '-0.04em', lineHeight: 1 }}>154</div>
              <div style={{ fontSize: 12, color: 'var(--muted-dk)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>Total points</div>
            </div>
            <div>
              <div className="display mono" style={{ fontSize: 56, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1 }}>1<span style={{ fontSize: 24 }}>yr</span></div>
              <div style={{ fontSize: 12, color: 'var(--muted-dk)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>Free warranty</div>
            </div>
            <div>
              <div className="display mono" style={{ fontSize: 56, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1 }}>0</div>
              <div style={{ fontSize: 12, color: 'var(--muted-dk)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>Hidden issues</div>
            </div>
          </div>
          <Btn variant="light" icon="arrow-right" onClick={() => setRoute('buy')}>See inspection reports</Btn>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// FINANCE BAND
// =============================================================
function FinanceBand({ setRoute }) {
  const [price, setPrice] = useStateH(220000);
  const [years, setYears] = useStateH(4);
  const [down, setDown] = useStateH(20);
  const monthly = useMemoH(() => {
    const principal = price * (1 - down / 100);
    const r = 0.0299 / 12; // illustrative
    const n = years * 12;
    if (!n) return 0;
    return (principal * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
  }, [price, years, down]);

  return (
    <section className="section">
      <div className="container-wide">
        <div style={{
          display: 'grid',
          gridTemplateColumns: window.innerWidth > 980 ? '1fr 1.2fr' : '1fr',
          gap: 0,
          background: 'var(--surface)',
          border: '1px solid var(--border)',
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          <div style={{ padding: 'clamp(36px, 5vw, 60px)' }}>
            <Eyebrow>Finance — terms up to 5 years</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.8vw, 60px)', marginTop: 18, letterSpacing: '-0.04em' }}>
              Monthly that fits your life,<br/>not the other way around.
            </h2>
            <p style={{ marginTop: 20, color: 'var(--text-muted)', fontSize: 16, maxWidth: 460, lineHeight: 1.55 }}>
              In partnership with leading UAE banks. EMI up to 5 years, lease-to-own up to 4. Eligibility takes about 60 seconds.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <Btn variant="primary" icon="arrow-right" onClick={() => setRoute('finance')}>Check Eligibility</Btn>
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>~60 seconds · No credit pull</span>
            </div>
            <div style={{
              marginTop: 36, padding: 20,
              background: 'var(--surface-2)',
              borderRadius: 10,
              borderLeft: `3px solid var(--gold)`,
            }}>
              <div style={{
                fontFamily: 'var(--f-display)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--text-muted)',
              }}>Seasonal partner offer</div>
              <div style={{ marginTop: 6, fontSize: 14, lineHeight: 1.5 }}>
                <strong>120-day deferred payment</strong> in partnership with Emirates NBD — on select financing plans, when purchasing from Alba Cars.
                <span style={{ color: 'var(--text-muted)' }}> Terms apply. Check current availability.</span>
              </div>
            </div>
          </div>
          <div style={{
            background: 'var(--noir)', color: '#fff',
            padding: 'clamp(36px, 5vw, 60px)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', inset: 0, opacity: 0.08, backgroundImage: 'radial-gradient(circle at 20% 20%, var(--gold), transparent 40%)' }} />
            <div style={{ position: 'relative' }}>
              <Eyebrow>EMI Estimator · illustrative</Eyebrow>
              <h3 className="display" style={{ marginTop: 14, fontSize: 26, color: '#fff' }}>Your monthly estimate</h3>

              <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 22 }}>
                <SliderRow label="Vehicle price" valueLabel={fmtAED(price)} min={50000} max={1200000} step={5000} value={price} onChange={setPrice} />
                <SliderRow label="Down payment" valueLabel={`${down}%`} min={0} max={50} step={5} value={down} onChange={setDown} />
                <SliderRow label="Tenure" valueLabel={`${years} yr${years>1?'s':''}`} min={1} max={5} step={1} value={years} onChange={setYears} />
              </div>

              <div style={{ marginTop: 36, paddingTop: 26, borderTop: '1px solid var(--line-dk)' }}>
                <div style={{ fontSize: 11, color: 'var(--muted-dk)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Estimated monthly</div>
                <div className="mono" style={{ fontSize: 54, marginTop: 6, color: 'var(--gold)', letterSpacing: '-0.03em' }}>
                  AED {monthly ? Math.round(monthly).toLocaleString() : '—'}
                </div>
                <div style={{ marginTop: 8, fontSize: 12, color: 'var(--muted-dk)' }}>
                  Illustrative at 2.99% reducing · final rate by bank approval
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SliderRow({ label, valueLabel, min, max, step, value, onChange }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <span style={{ fontSize: 12, color: 'var(--muted-dk)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{label}</span>
        <span className="mono" style={{ fontSize: 14, color: '#fff' }}>{valueLabel}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(+e.target.value)} style={{
        width: '100%', appearance: 'none', height: 4, borderRadius: 2,
        background: `linear-gradient(to right, var(--gold) 0%, var(--gold) ${((value-min)/(max-min))*100}%, var(--line-dk) ${((value-min)/(max-min))*100}%, var(--line-dk) 100%)`,
        cursor: 'pointer',
      }} />
      <style>{`
        input[type="range"]::-webkit-slider-thumb {
          appearance: none; width: 18px; height: 18px; border-radius: 50%;
          background: #fff; border: 3px solid var(--gold); cursor: pointer;
        }
      `}</style>
    </div>
  );
}

// =============================================================
// SHOWROOM SECTION
// =============================================================
function ShowroomSection({ setRoute }) {
  return (
    <section className="section" style={{ background: 'var(--surface-2)' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1.3fr 1fr' : '1fr', gap: 40 }}>
          <div style={{
            borderRadius: 14, overflow: 'hidden',
            aspectRatio: window.innerWidth > 900 ? '4/3' : '4/3',
            position: 'relative',
          }}>
            <img src="media/showroom-exterior.webp" alt="Alba Cars showroom exterior" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', bottom: 24, left: 24,
              background: 'rgba(11,13,16,0.7)', color: '#fff',
              padding: '14px 18px', borderRadius: 8,
              backdropFilter: 'blur(8px)',
              maxWidth: 320,
            }}>
              <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>Visit the showroom</div>
              <div style={{ marginTop: 4, fontFamily: 'var(--f-display)', fontSize: 16 }}>Al Asayel St, Al Quoz Ind 1</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <Eyebrow>Showroom</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4.4vw, 56px)', marginTop: 18, letterSpacing: '-0.04em' }}>
              Three units, one floor, every car under one roof.
            </h2>
            <p style={{ marginTop: 18, fontSize: 16, color: 'var(--text-muted)', lineHeight: 1.55 }}>
              Drop in any day — drive away the same week. Our team handles RTA transfer, bank paperwork, and UAE-wide delivery, so paperwork never gets between you and your car.
            </p>
            <ul style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { l: 'Address', v: 'Showroom 17, 18 & 20, Al Asayel Street, Al Quoz Ind 1, Dubai' },
                { l: 'Open', v: 'Sun – Sat · 09:30 – 22:00' },
                { l: 'Phone', v: '+971 4 377 2503', mono: true },
                { l: 'Email', v: 'info@albacars.ae' },
              ].map(r => (
                <li key={r.l} style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 18, paddingBottom: 16, borderBottom: '1px solid var(--border)' }}>
                  <span style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{r.l}</span>
                  <span className={r.mono ? 'mono' : ''} style={{ fontSize: 15 }}>{r.v}</span>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn variant="primary" icon="arrow-right" onClick={() => setRoute('contact')}>Get directions</Btn>
              <Btn variant="ghost" icon="phone">Book a viewing</Btn>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// PRESS STRIP — text marquee
// =============================================================
function PressStrip() {
  const items = ['Gulf News', 'Khaleej Times', 'Arabian Business', 'MEA Markets · Best Used Car Dealership', 'Dubizzle · Showroom of the Month', 'YourStory'];
  return (
    <section style={{ padding: '50px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container-wide" style={{ display: 'flex', alignItems: 'center', gap: 50, justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <div style={{
          fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--text-muted)', fontFamily: 'var(--f-display)', fontWeight: 500,
          flexShrink: 0,
        }}>As featured in / awarded by</div>
        <div className="marquee" style={{ flex: 1, minWidth: 0 }}>
          <div className="marquee-track">
            {[...items, ...items].map((x, i) => (
              <span key={i} className="display" style={{
                fontSize: 22, letterSpacing: '-0.02em',
                color: 'var(--text)', opacity: 0.7, whiteSpace: 'nowrap',
              }}>{x} <span style={{ color: 'var(--gold)', margin: '0 24px' }}>✦</span></span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// FAQ
// =============================================================
function FAQSection() {
  const [open, setOpen] = useStateH(0);
  const faqs = [
    { q: 'How long does selling my car take?', a: "About 2 hours from form to cash. We give an instant online valuation, do a free in-person inspection, and pay you after RTA verification and pick-up — same-day in most cases." },
    { q: 'Is the 1-year warranty really free?', a: "Yes. Every certified Alba car ships with a free 1-year warranty covering major mechanical and electrical systems. Full terms are printed on every vehicle's certificate." },
    { q: "Can I finance a car without a UAE bank account?", a: 'We work with leading UAE banks; an account with one of them (or willingness to open one) is typically required. Tenures up to 5 years; lease-to-own up to 4. Final eligibility is bank-driven.' },
    { q: "What's the 150+ point inspection?", a: "Across engine, transmission, body & paint, electronics, suspension, and interior — measured, photographed, and signed off. Fail any item and the car doesn't make our floor. The full report is on every vehicle page." },
    { q: 'Do you deliver outside Dubai?', a: 'Yes — UAE-wide delivery on completed sales, door to door. We also handle RTA transfer and bank paperwork in-house.' },
  ];
  return (
    <section className="section">
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1fr 1.4fr' : '1fr', gap: 60 }}>
        <div>
          <Eyebrow>FAQ</Eyebrow>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 60px)', marginTop: 18, letterSpacing: '-0.04em' }}>
            Common questions, plain answers.
          </h2>
        </div>
        <ul style={{ display: 'flex', flexDirection: 'column' }}>
          {faqs.map((f, i) => (
            <li key={i} style={{ borderTop: '1px solid var(--border)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                background: 'none', border: 'none',
                padding: '24px 0',
                display: 'flex', justifyContent: 'space-between', gap: 24,
                alignItems: 'center', cursor: 'pointer',
              }}>
                <span className="display" style={{ fontSize: 20, letterSpacing: '-0.02em' }}>{f.q}</span>
                <span style={{
                  width: 32, height: 32, borderRadius: 999,
                  border: '1px solid var(--border)',
                  display: 'grid', placeItems: 'center',
                  flexShrink: 0,
                  transition: 'transform 0.2s',
                  transform: open === i ? 'rotate(45deg)' : 'none',
                }}>
                  <Icon name="plus" size={14} />
                </span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 24, color: 'var(--text-muted)', fontSize: 15.5, lineHeight: 1.6, maxWidth: 640 }}>
                  {f.a}
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });