/* Screens: Home, Inventory, Vehicle Detail, Services, Export, Contact */

const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS, useRef: useRefS } = React;

/* ============================================================
   HOME
   ============================================================ */
function ScreenHome({ go, openLead, locale }) {
  const t = I18N[locale];
  const featured = VEHICLES.slice(0, 6);

  return (
    <main className="screen" data-screen-label="home">

      {/* ===== HERO ===== */}
      <Hero t={t} go={go} openLead={openLead} />

      {/* ===== TRUST STRIP ===== */}
      <section className="section section--tight section--dark" style={{ paddingTop: 48, paddingBottom: 48, borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 32, alignItems: 'center' }}>
            {t.trust.map((line, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span className="mono" style={{ color: 'var(--accent)', opacity: .8 }}>0{i + 1}</span>
                <span style={{ fontSize: 13, lineHeight: 1.4, color: 'var(--text-dim)' }}>{line}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FEATURED RAIL ===== */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, gap: 24, flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Just Arrived · Hand-Selected</div>
              <h2 className="h-display h2" style={{ margin: 0, maxWidth: 700 }}>
                Featured <em>vehicles</em> from the floor
              </h2>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <ArchivePill />
              <button className="btn btn--ghost btn--sm" onClick={() => go('inventory')}>View All Inventory<Icon.arrow /></button>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 28 }}>
            {featured.map((v) => (
              <VehicleCard key={v.id} v={v} onOpen={(id) => go('vehicle', id)} locale={locale} />
            ))}
          </div>
        </div>
      </section>

      {/* ===== ELITE APPROVED BAND ===== */}
      <section className="section section--dark" style={{ position: 'relative', overflow: 'hidden' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Elite Approved · 320-Point Inspection</div>
            <h2 className="h-display h2" style={{ margin: '0 0 22px' }}>
              Every pre-owned car<br />passes <em>320 checks.</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--text-dim)', maxWidth: 520, marginBottom: 28 }}>
              Specialist technicians inspect each Elite Approved vehicle against a 320-point technical
              standard — mechanical, electrical, cosmetic, documentation. RTA testing applied where
              applicable.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn--accent" onClick={() => go('vehicle', 'ferrari-california-t')}>See a Certified Car<Icon.arrow /></button>
              <button className="btn btn--ghost">How Approval Works<Icon.arrow /></button>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: 48, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
              {[
                ['Mechanical', '142'],
                ['Electrical', '76'],
                ['Cosmetic', '54'],
                ['Documentation', '48'],
              ].map(([k, n]) => (
                <div key={k}>
                  <div className="h-display" style={{ fontSize: 36, color: 'var(--accent)', lineHeight: 1 }}>{n}</div>
                  <div className="mono" style={{ color: 'var(--muted)', marginTop: 6 }}>{k}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', aspectRatio: '4/5' }}>
            <img src="media/service-bay.webp" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', bottom: 18, right: 18, padding: '8px 14px', background: 'rgba(11,13,15,.72)', border: '1px solid var(--accent-dim)', color: 'var(--accent-soft)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase' }}>
              The Elite Cars · Service Centre
            </div>
          </div>
        </div>
      </section>

      {/* ===== BRAND WALL ===== */}
      <section className="section section--tight">
        <div className="wrap">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36, flexWrap: 'wrap', gap: 20 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Marques in House</div>
              <h3 className="h-display h3" style={{ margin: 0 }}>Pre-owned · Distribution · <em>Authorised</em></h3>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', maxWidth: 360, textAlign: 'right' }}>
              All trademarks are property of their owners. The Elite Cars is not endorsed by any car manufacturer.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
            {[...BRANDS, ...DISTRIBUTION_BRANDS].map((b, i) => (
              <div key={b} style={{
                background: 'var(--bg)', padding: '28px 18px',
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400,
                textAlign: 'center', letterSpacing: '.02em',
                color: i >= BRANDS.length ? 'var(--accent)' : 'var(--text)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              }}>
                {b}
                {i >= BRANDS.length && <span className="mono" style={{ fontSize: 8, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>UAE</span>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== SERVICES TEASER ===== */}
      <section className="section section--tight">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { eyebrow: 'Sell · Trade-in · Consign', title: 'Sell your luxury car', body: 'Accurate valuations, smooth bank-loan settlements, and upgrade assistance — handled by our specialists.', kind: 'tradein' },
              { eyebrow: 'Finance & Leasing', title: 'Flexible EMI plans', body: 'Tailored finance packages with UAE banking partners. Easy, personalised, hassle-free.', kind: 'finance' },
              { eyebrow: 'Worldwide Export', title: 'Ship anywhere', body: 'Strong export capability, with shipping handled to buyers across GCC, Europe, Asia, and the Americas.', kind: 'export' },
            ].map((c) => (
              <article key={c.title} style={{
                background: 'var(--surface)', border: '1px solid var(--line)', padding: '36px 30px 30px',
                display: 'flex', flexDirection: 'column', gap: 16, transition: 'border-color .2s',
              }}
              onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'var(--accent-dim)')}
              onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--line)')}>
                <div className="eyebrow">{c.eyebrow}</div>
                <h4 className="h-display" style={{ fontSize: 30, margin: 0, fontWeight: 400 }}>{c.title}</h4>
                <p style={{ color: 'var(--text-dim)', fontSize: 14.5, lineHeight: 1.65, margin: 0, flex: 1 }}>{c.body}</p>
                <button className="link-arrow" onClick={() => openLead({ kind: c.kind })}>Enquire<Icon.arrow /></button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ===== SHOWROOM SPLIT ===== */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '180px 180px', gap: 10 }}>
              <img src="media/showroom-1.webp" style={{ width: '100%', height: '100%', objectFit: 'cover', gridRow: 'span 2' }} />
              <img src="media/gal-show-1.webp" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <img src="media/gal-show-2.webp" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Visit · Open 7 Days</div>
              <h2 className="h-display h2" style={{ margin: '0 0 22px' }}>Four showrooms<br /><em>across the UAE.</em></h2>
              <p style={{ color: 'var(--text-dim)', fontSize: 16, lineHeight: 1.7, marginBottom: 32, maxWidth: 480 }}>
                Two showrooms in Dubai (Al Quoz & Sheikh Zayed Road), our Sharjah location at Souq Al Haraj,
                and the Abu Dhabi flagship on Al Maqta Road. Concierge appointments available.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 28 }}>
                {SHOWROOMS.map((s) => (
                  <div key={s.id} style={{ padding: '14px 0', borderTop: '1px solid var(--line)' }}>
                    <div className="mono" style={{ color: 'var(--muted)', marginBottom: 4 }}>{s.city}{s.badge ? ` · ${s.badge}` : ''}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, marginBottom: 4 }}>{s.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5 }}>{s.address}</div>
                  </div>
                ))}
              </div>
              <button className="btn btn--ghost" onClick={() => go('contact')}>Find a Showroom<Icon.arrow /></button>
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}

/* ---------- HERO (variant-driven by Tweaks heroTreatment) ---------- */
function Hero({ t, go, openLead }) {
  const heroTreatment = document.documentElement.getAttribute('data-hero') || 'still';
  const [activeIdx, setActiveIdx] = useStateS(0);
  const heroImages = ['media/veh-bentley-bentayga.webp', 'media/gal-show-1.webp', 'media/showroom-1.webp', 'media/gal-ferrari-cal.webp'];

  useEffectS(() => {
    if (heroTreatment !== 'loop') return;
    const id = setInterval(() => setActiveIdx((i) => (i + 1) % heroImages.length), 4500);
    return () => clearInterval(id);
  }, [heroTreatment]);

  if (heroTreatment === 'split') {
    return (
      <section className="section--dark" style={{ minHeight: '88vh', display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'stretch' }}>
        <div style={{ padding: 'clamp(40px, 6vw, 96px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.hero.eyebrow}</div>
          <h1 className="h-display h1" style={{ margin: 0, marginBottom: 28 }}>
            {t.hero.title1}<br /><em>{t.hero.title2}</em><br />{t.hero.title3}.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--text-dim)', maxWidth: 460, marginBottom: 36 }}>{t.hero.body}</p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn--accent" onClick={() => go('inventory')}>{t.hero.ctaPrimary}<Icon.arrow /></button>
            <a className="btn" href="https://wa.me/971800354832277" style={{ borderColor: '#25D366', color: '#25D366' }}><Icon.wa />{t.hero.ctaSecondary}</a>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <img src="media/veh-bentley-bentayga.webp" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </section>
    );
  }

  return (
    <section className="section--dark" style={{ position: 'relative', minHeight: '92vh', overflow: 'hidden', display: 'flex', alignItems: 'flex-end', paddingBottom: 60 }}>
      {heroImages.map((src, i) => (
        <div key={src} style={{
          position: 'absolute', inset: 0,
          opacity: heroTreatment === 'loop' ? (i === activeIdx ? 1 : 0) : (i === 0 ? 1 : 0),
          transition: 'opacity 1.4s ease-in-out',
        }}>
          <img src={src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      ))}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(11,13,15,.55) 0%, rgba(11,13,15,.1) 40%, rgba(11,13,15,.9) 100%)',
      }} />

      <div className="wrap" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', alignItems: 'flex-end', gap: 60 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 28, color: 'var(--accent-soft)' }}>{t.hero.eyebrow}</div>
            <h1 className="h-display h1" style={{ color: '#F2EFE7', margin: 0, marginBottom: 32 }}>
              {t.hero.title1}<br /><em style={{ color: 'var(--accent-soft)', fontStyle: 'italic', fontWeight: 300 }}>{t.hero.title2}</em><br />{t.hero.title3}.
            </h1>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn--accent" onClick={() => go('inventory')}>{t.hero.ctaPrimary}<Icon.arrow /></button>
              <a className="btn" href="https://wa.me/971800354832277" style={{ borderColor: 'rgba(255,255,255,.4)', color: '#F2EFE7' }}><Icon.wa />{t.hero.ctaSecondary}</a>
            </div>
          </div>

          <div style={{ maxWidth: 380, alignSelf: 'flex-end' }}>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'rgba(242,239,231,.85)', margin: 0, paddingLeft: 24, borderLeft: '1px solid var(--accent-dim)' }}>
              {t.hero.body}
            </p>
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 16 }}>
              {heroTreatment === 'loop' && heroImages.map((_, i) => (
                <button key={i} onClick={() => setActiveIdx(i)}
                  style={{ width: i === activeIdx ? 28 : 12, height: 2, background: i === activeIdx ? 'var(--accent)' : 'rgba(242,239,231,.3)', transition: 'all .3s', padding: 0 }}
                  aria-label={`Slide ${i+1}`}
                />
              ))}
            </div>
          </div>
        </div>

        {/* hero footer ribbon */}
        <div style={{
          position: 'absolute', bottom: -60, left: 'var(--pad-x)', right: 'var(--pad-x)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 16,
          borderTop: '1px solid rgba(242,239,231,.16)',
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase',
          color: 'rgba(242,239,231,.6)',
        }}>
          <span>Elite Group Holding · ADGM-Registered</span>
          <span>Authorised Lynk & Co Distributor — UAE</span>
          <span>800-ELITE-CARS · WhatsApp Concierge</span>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   INVENTORY
   ============================================================ */
function ScreenInventory({ go, locale }) {
  const t = I18N[locale];
  const [filters, setFilters] = useStateS({ make: 'all', body: 'all', condition: 'all', sort: 'newest' });
  const [view, setView] = useStateS('grid'); // grid | list

  const filtered = useMemoS(() => {
    let r = VEHICLES.slice();
    if (filters.make !== 'all') r = r.filter((v) => v.make === filters.make);
    if (filters.body !== 'all') r = r.filter((v) => v.body === filters.body);
    if (filters.condition !== 'all') r = r.filter((v) => v.condition === filters.condition);
    if (filters.sort === 'newest') r.sort((a, b) => b.year - a.year);
    if (filters.sort === 'oldest') r.sort((a, b) => a.year - b.year);
    if (filters.sort === 'mileage') r.sort((a, b) => a.mileage - b.mileage);
    return r;
  }, [filters]);

  const makes = ['all', ...Array.from(new Set(VEHICLES.map((v) => v.make)))];
  const bodies = ['all', ...Array.from(new Set(VEHICLES.map((v) => v.body)))];
  const conditions = ['all', 'New', 'Elite Approved'];

  return (
    <main className="screen" data-screen-label="inventory">
      <section className="section section--tight section--dark" style={{ paddingTop: 60, paddingBottom: 48, borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Inventory · Live Feed Snapshot</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: 0, marginBottom: 20 }}>
            <em>Fine collection</em> of new and pre-owned luxury cars.
          </h1>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
            <p style={{ color: 'var(--text-dim)', maxWidth: 600, margin: 0, fontSize: 15 }}>
              {VEHICLES.length} vehicles in this snapshot · POA pricing · all stock viewable by appointment at our showrooms.
            </p>
            <ArchivePill />
          </div>
        </div>
      </section>

      {/* filters */}
      <div className="section--dark" style={{ borderBottom: '1px solid var(--line)', padding: '18px 0', position: 'sticky', top: 60, zIndex: 30, background: 'color-mix(in srgb, var(--bg) 95%, transparent)', backdropFilter: 'blur(10px)' }}>
        <div className="wrap" style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <FilterChip label="Make" value={filters.make} onChange={(v) => setFilters({ ...filters, make: v })} options={makes} />
          <FilterChip label="Body" value={filters.body} onChange={(v) => setFilters({ ...filters, body: v })} options={bodies} />
          <FilterChip label="Condition" value={filters.condition} onChange={(v) => setFilters({ ...filters, condition: v })} options={conditions} />
          <div style={{ flex: 1 }} />
          <FilterChip label="Sort" value={filters.sort} onChange={(v) => setFilters({ ...filters, sort: v })} options={['newest', 'oldest', 'mileage']} compact />
          <div style={{ display: 'flex', gap: 0, border: '1px solid var(--line)' }}>
            {['grid', 'list'].map((v) => (
              <button key={v} onClick={() => setView(v)} style={{
                padding: '8px 14px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase',
                background: view === v ? 'var(--text)' : 'transparent', color: view === v ? 'var(--bg)' : 'var(--text-dim)',
              }}>{v}</button>
            ))}
          </div>
        </div>
      </div>

      <section className="section section--dark" style={{ paddingTop: 48 }}>
        <div className="wrap">
          {view === 'grid' ? (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 28 }}>
              {filtered.map((v) => (
                <VehicleCard key={v.id} v={v} onOpen={(id) => go('vehicle', id)} locale={locale} />
              ))}
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {filtered.map((v) => (
                <InventoryRow key={v.id} v={v} onOpen={(id) => go('vehicle', id)} />
              ))}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

function FilterChip({ label, value, onChange, options, compact }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span className="mono" style={{ color: 'var(--muted)' }}>{label}</span>
      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
        {options.map((o) => (
          <button key={o} onClick={() => onChange(o)} style={{
            padding: compact ? '4px 8px' : '5px 11px',
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase',
            border: '1px solid ' + (value === o ? 'var(--accent)' : 'var(--line)'),
            color: value === o ? 'var(--accent)' : 'var(--text-dim)',
            background: value === o ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : 'transparent',
            transition: 'all .2s', cursor: 'pointer',
          }}>
            {o === 'all' ? 'All' : o}
          </button>
        ))}
      </div>
    </div>
  );
}

function InventoryRow({ v, onOpen }) {
  return (
    <div
      onClick={() => onOpen(v.id)}
      style={{
        display: 'grid', gridTemplateColumns: '220px 1.5fr 1fr 1fr auto', gap: 32, alignItems: 'center',
        padding: '20px 24px', borderTop: '1px solid var(--line)', cursor: 'pointer',
        transition: 'background .2s',
      }}
      onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--surface)')}
      onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
    >
      <div style={{ aspectRatio: '4/3', overflow: 'hidden' }}>
        <img src={v.photos[0]} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>
      <div>
        <div className="mono" style={{ color: 'var(--muted)', marginBottom: 4 }}>{v.year} · {v.body} · {v.stock}</div>
        <h3 className="h-display" style={{ fontSize: 24, margin: 0, fontWeight: 400 }}>
          {v.make} <em style={{ color: 'var(--accent)', fontStyle: 'italic', fontWeight: 300 }}>{v.model}</em> {v.trim}
        </h3>
      </div>
      <div style={{ fontSize: 13, color: 'var(--text-dim)' }}>
        <div className="mono" style={{ color: 'var(--muted)', marginBottom: 4 }}>Engine</div>
        {v.engine}
      </div>
      <div style={{ fontSize: 13, color: 'var(--text-dim)' }}>
        <div className="mono" style={{ color: 'var(--muted)', marginBottom: 4 }}>Mileage</div>
        {v.mileage.toLocaleString()} km
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="mono" style={{ color: 'var(--muted)' }}>POA</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--accent)' }}>POA</div>
      </div>
    </div>
  );
}

/* ============================================================
   VEHICLE DETAIL — flagship
   ============================================================ */
function ScreenVehicle({ id, go, openLead, locale }) {
  const t = I18N[locale];
  const v = useMemoS(() => VEHICLES.find((x) => x.id === id) || VEHICLES[0], [id]);
  const [activePhoto, setActivePhoto] = useStateS(0);

  const others = VEHICLES.filter((x) => x.id !== v.id).slice(0, 4);

  return (
    <main className="screen" data-screen-label="vehicle-detail">

      {/* ===== CINEMATIC HERO ===== */}
      <section className="section--dark" style={{ position: 'relative', borderBottom: '1px solid var(--line)' }}>
        {/* breadcrumb */}
        <div className="wrap" style={{ paddingTop: 28, paddingBottom: 16, display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          <a onClick={() => go('inventory')} style={{ cursor: 'pointer' }}>Inventory</a>
          <span>/</span>
          <span>{v.make}</span>
          <span>/</span>
          <span style={{ color: 'var(--accent)' }}>{v.model} {v.trim}</span>
        </div>

        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 60, alignItems: 'stretch' }}>
            {/* gallery */}
            <div>
              <div style={{ position: 'relative', aspectRatio: '16/10', background: 'var(--surface-2)', overflow: 'hidden' }}>
                <img src={v.photos[activePhoto]} key={activePhoto}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', animation: 'fadeUp .5s' }} />
                {v.certified && (
                  <div style={{
                    position: 'absolute', top: 22, left: 22,
                    padding: '8px 14px', background: 'rgba(11,13,15,.78)', backdropFilter: 'blur(8px)',
                    border: '1px solid var(--accent-dim)', color: 'var(--accent-soft)',
                    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
                    display: 'flex', alignItems: 'center', gap: 8,
                  }}>
                    <Icon.diamond />Elite Approved · 320-Point Certified
                  </div>
                )}
                <div style={{
                  position: 'absolute', bottom: 22, right: 22,
                  fontFamily: 'var(--font-mono)', fontSize: 11, color: '#F2EFE7',
                  background: 'rgba(11,13,15,.6)', backdropFilter: 'blur(8px)',
                  padding: '6px 12px', letterSpacing: '.14em',
                }}>
                  {activePhoto + 1} / {v.photos.length} · Stock {v.stock}
                </div>
              </div>
              {/* thumbs */}
              <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                {v.photos.map((p, i) => (
                  <button key={i} onClick={() => setActivePhoto(i)} style={{
                    width: 96, height: 64, padding: 0, overflow: 'hidden',
                    border: '1px solid ' + (i === activePhoto ? 'var(--accent)' : 'var(--line)'),
                    opacity: i === activePhoto ? 1 : .55, transition: 'all .2s',
                  }}>
                    <img src={p} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  </button>
                ))}
              </div>
            </div>

            {/* details panel */}
            <aside style={{ display: 'flex', flexDirection: 'column', gap: 22, paddingTop: 4 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>{v.category} · {v.condition}</div>
                <h1 className="h-display" style={{ fontSize: 'clamp(40px, 4.4vw, 68px)', margin: 0, lineHeight: 1, marginBottom: 12 }}>
                  {v.year}<br />{v.make}<br /><em style={{ color: 'var(--accent)', fontStyle: 'italic', fontWeight: 300 }}>{v.model}</em>
                </h1>
                <div style={{ color: 'var(--text-dim)', fontSize: 16, letterSpacing: '.04em' }}>{v.trim}</div>
              </div>

              <div style={{ padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 6 }}>{t.poa}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, color: 'var(--accent)', letterSpacing: '.02em' }}>POA</div>
                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 6 }}>
                  Price disclosed on enquiry. Finance & trade-in available.
                </div>
              </div>

              {/* primary CTAs */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <button className="btn btn--accent" style={{ justifyContent: 'space-between' }} onClick={() => openLead({ kind: 'price', vehicle: v })}>
                  <span>{t.request}</span><Icon.arrow />
                </button>
                <button className="btn btn--ghost" style={{ justifyContent: 'space-between' }} onClick={() => openLead({ kind: 'viewing', vehicle: v })}>
                  <span>{t.book}</span><Icon.arrow />
                </button>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <button className="btn btn--ghost btn--sm" onClick={() => openLead({ kind: 'tradein', vehicle: v })}>{t.tradeIn}</button>
                  <button className="btn btn--ghost btn--sm" onClick={() => openLead({ kind: 'finance', vehicle: v })}>{t.finance}</button>
                </div>
                <a className="btn btn--sm" href="https://wa.me/971800354832277" style={{ borderColor: '#25D366', color: '#25D366', justifyContent: 'space-between' }}>
                  <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Icon.wa />WhatsApp this car</span><Icon.arrow />
                </a>
              </div>

              {/* concierge note */}
              <div style={{ padding: 16, background: 'var(--surface-2)', border: '1px solid var(--line)', fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.55, display: 'flex', gap: 10 }}>
                <span style={{ color: 'var(--accent)' }}><Icon.spark /></span>
                <div>
                  Concierge response within 2 business hours. All inspections at our Dubai service centre. International export available.
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* ===== SUMMARY + HIGHLIGHTS ===== */}
      <section className="section section--tight">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>The Car</div>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2vw, 30px)', lineHeight: 1.45, fontWeight: 300, color: 'var(--text)', margin: 0, maxWidth: 720 }}>
                {v.summary}
              </p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Highlights</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {v.highlights.map((h, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, fontSize: 15, color: 'var(--text-dim)', lineHeight: 1.5, paddingBottom: 12, borderBottom: '1px solid var(--line)' }}>
                    <span style={{ color: 'var(--accent)', marginTop: 4 }}><Icon.check /></span>
                    {h}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ===== SPEC TABLE ===== */}
      <section className="section section--tight section--dark">
        <div className="wrap">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
            <h3 className="h-display h3" style={{ margin: 0 }}>Technical <em>specification</em></h3>
            <span className="mono" style={{ color: 'var(--muted)' }}>Source · Live feed · Verified by Elite Approved</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1px', background: 'var(--line)', border: '1px solid var(--line)' }}>
            {[
              ['Year', v.year],
              ['Body', v.body],
              ['Mileage', `${v.mileage.toLocaleString()} km`],
              ['Stock', v.stock],
              ['Engine', v.engine],
              ['Transmission', v.transmission],
              ['Drivetrain', v.drivetrain],
              ['Seats', v.seats],
              ['Power', v.power],
              ['Torque', v.torque],
              ['Exterior', v.exterior],
              ['Interior', v.interior],
            ].map(([k, val]) => (
              <div key={k} style={{ background: 'var(--bg)', padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>{k}</span>
                <span style={{ fontSize: 16, fontVariantNumeric: 'tabular-nums' }}>{val}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== APPROVED BAND ===== */}
      {v.certified && (
        <section className="section section--tight">
          <div className="wrap">
            <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 36, alignItems: 'center', padding: '36px 40px', background: 'var(--surface)', border: '1px solid var(--accent-dim)' }}>
              <div style={{ width: 52, height: 52, border: '1px solid var(--accent)', display: 'grid', placeItems: 'center', color: 'var(--accent)' }}>
                <Icon.diamond />
              </div>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Elite Approved Certificate</div>
                <p style={{ margin: 0, fontSize: 15.5, color: 'var(--text-dim)', lineHeight: 1.55 }}>
                  This vehicle has passed the 320-point Elite Approved technical inspection. Inspection report available on request.
                </p>
              </div>
              <button className="btn btn--ghost btn--sm">View Inspection Report<Icon.arrow /></button>
            </div>
          </div>
        </section>
      )}

      {/* ===== SIMILAR ===== */}
      <section className="section section--tight">
        <div className="wrap">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
            <h3 className="h-display h3" style={{ margin: 0 }}>You may also <em>consider</em></h3>
            <button className="link-arrow" onClick={() => go('inventory')}>All inventory<Icon.arrow /></button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {others.map((o) => (
              <VehicleCard key={o.id} v={o} onOpen={(id) => go('vehicle', id)} locale={locale} />
            ))}
          </div>
        </div>
      </section>

    </main>
  );
}

/* ============================================================
   SERVICES
   ============================================================ */
function ScreenServices({ openLead }) {
  const services = [
    { eyebrow: '01', title: 'Specialised service centre', body: 'Marque-trained technicians, lift bays, and diagnostic equipment for every brand we sell.', img: 'media/service-bay-2.webp' },
    { eyebrow: '02', title: 'Genuine spare parts', body: 'OEM parts inventory and direct supply lines from manufacturers — fitted in-house.', img: 'media/showroom-2.webp' },
    { eyebrow: '03', title: 'Customisation', body: 'Tailored detailing, paint protection, interior re-trims, and bespoke options.', img: 'media/gal-show-3.webp' },
    { eyebrow: '04', title: 'Warranty & service packages', body: 'Tailored cover for new and Elite Approved vehicles — by enquiry.', img: 'media/gal-customer.webp' },
  ];
  return (
    <main className="screen" data-screen-label="services">
      <section className="section section--dark">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 22 }}>After-Sales</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 78px)', margin: 0, marginBottom: 24, maxWidth: 900 }}>
            Ownership, <em>handled</em>.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-dim)', maxWidth: 620, marginBottom: 56 }}>
            From first enquiry to final handover — and every service interval after.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
            {services.map((s) => (
              <article key={s.title} style={{ background: 'var(--surface)', border: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr 1.2fr' }}>
                <div style={{ position: 'relative', minHeight: 220 }}>
                  <img src={s.img} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <span className="eyebrow">{s.eyebrow}</span>
                  <h3 className="h-display" style={{ fontSize: 26, margin: 0, fontWeight: 400 }}>{s.title}</h3>
                  <p style={{ color: 'var(--text-dim)', margin: 0, fontSize: 14, lineHeight: 1.6, flex: 1 }}>{s.body}</p>
                  <button className="link-arrow" onClick={() => openLead({ kind: 'enquire' })}>Enquire<Icon.arrow /></button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   EXPORT
   ============================================================ */
function ScreenExport({ openLead }) {
  return (
    <main className="screen" data-screen-label="export">
      <section className="section section--dark" style={{ position: 'relative', minHeight: '60vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
        <img src="media/about-banner.webp" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: .5 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,13,15,.4), rgba(11,13,15,.95))' }} />
        <div className="wrap" style={{ position: 'relative', zIndex: 2, paddingTop: 80, paddingBottom: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 22 }}>Worldwide Export · RU · ZH · AR · EN</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px, 6vw, 96px)', margin: 0, color: '#F2EFE7', marginBottom: 24, maxWidth: 1000 }}>
            We export luxury cars <em style={{color:'var(--accent-soft)',fontStyle:'italic',fontWeight:300}}>worldwide</em>.
          </h1>
          <p style={{ fontSize: 19, color: 'rgba(242,239,231,.85)', maxWidth: 620, marginBottom: 36 }}>
            With strong worldwide shipping capabilities, The Elite Cars delivers exotic and luxury vehicles to buyers across the globe.
          </p>
          <button className="btn btn--accent" onClick={() => openLead({ kind: 'export' })}>Start an Export Enquiry<Icon.arrow /></button>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 30 }}>
            {[
              ['Buyer locale', 'EN · AR · RU · ZH'],
              ['Documentation', 'Customs · Shipping · Title'],
              ['Channels', 'Sea · Air · Land · By enquiry'],
              ['Verification', 'Inspection report · VIN · History'],
            ].map(([k, v]) => (
              <div key={k}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>{k}</div>
                <p style={{ margin: 0, fontSize: 17, fontFamily: 'var(--font-display)', fontWeight: 400 }}>{v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function ScreenContact({ openLead }) {
  return (
    <main className="screen" data-screen-label="contact">
      <section className="section section--dark">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 22 }}>Visit · Concierge · WhatsApp</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 78px)', margin: 0, marginBottom: 24, maxWidth: 900 }}>
            Find a <em>showroom</em>.
          </h1>
          <p style={{ fontSize: 17, color: 'var(--text-dim)', maxWidth: 600, marginBottom: 48 }}>
            Two Dubai showrooms, plus Sharjah and an Abu Dhabi flagship — open 7 days, concierge by appointment.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
            {SHOWROOMS.map((s) => (
              <article key={s.id} style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: '30px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <div className="mono" style={{ color: 'var(--muted)', marginBottom: 6 }}>{s.city}</div>
                    <h3 className="h-display" style={{ margin: 0, fontSize: 28, fontWeight: 400 }}>{s.name}</h3>
                  </div>
                  {s.badge && (
                    <div style={{ padding: '4px 10px', border: '1px solid var(--accent-dim)', color: 'var(--accent-soft)', fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '.18em', textTransform: 'uppercase' }}>
                      {s.badge}
                    </div>
                  )}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, color: 'var(--text-dim)' }}>
                  <div style={{ display: 'flex', gap: 10 }}><span className="mono" style={{ color: 'var(--muted)', minWidth: 70 }}>Address</span><span>{s.address}</span></div>
                  <div style={{ display: 'flex', gap: 10 }}><span className="mono" style={{ color: 'var(--muted)', minWidth: 70 }}>Hours</span><span>{s.hours}</span></div>
                  <div style={{ display: 'flex', gap: 10 }}><span className="mono" style={{ color: 'var(--muted)', minWidth: 70 }}>Phone</span><span>800-ELITE-CARS · 800 35483 2277</span></div>
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                  <button className="btn btn--ghost btn--sm" onClick={() => openLead({ kind: 'viewing' })}>Book Viewing</button>
                  <a className="btn btn--sm" href="https://wa.me/971800354832277" style={{ borderColor: '#25D366', color: '#25D366' }}><Icon.wa /> WhatsApp</a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ScreenHome, ScreenInventory, ScreenVehicle, ScreenServices, ScreenExport, ScreenContact });