// Alba Cars — Sell Your Car (multi-step funnel) + minor pages
const { useState: useStateS, useMemo: useMemoS, useEffect: useEffectS } = React;

// =============================================================
// SELL YOUR CAR — Multi-step funnel
// =============================================================
function SellPage({ setRoute }) {
  const [step, setStep] = useStateS(0);
  const [data, setData] = useStateS({
    make: '', model: '', year: '', mileage: '', condition: '',
    fuel: '', trans: '', service: '', accidents: '', owners: '1',
    name: '', phone: '', email: '', emirate: 'Dubai',
  });

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const steps = [
    { id: 'car', label: 'Your car' },
    { id: 'condition', label: 'Condition' },
    { id: 'contact', label: 'Contact' },
    { id: 'offer', label: 'Instant offer' },
  ];

  const canNext = useMemoS(() => {
    if (step === 0) return data.make && data.model && data.year && data.mileage;
    if (step === 1) return data.condition && data.fuel && data.trans;
    if (step === 2) return data.name && data.phone;
    return true;
  }, [step, data]);

  return (
    <div style={{ paddingTop: 88, minHeight: '100vh', background: 'var(--surface-2)' }}>
      {/* Header */}
      <div style={{ background: 'var(--noir)', color: '#fff', padding: '70px 0 110px', position: 'relative', overflow: 'hidden' }}>
        <img src="media/showroom-interior.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.3 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,13,16,0.5), rgba(11,13,16,0.95))' }} />
        <div className="container-wide" style={{ position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 720 }}>
              <Pill live>Avg time to cash · ~2 hours</Pill>
              <h1 className="display" style={{ fontSize: 'clamp(40px, 6.5vw, 96px)', marginTop: 18, color: '#fff', letterSpacing: '-0.045em' }}>
                Sell your car in Dubai —<br/>
                <span style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>get the best price instantly.</span>
              </h1>
              <p style={{ marginTop: 22, fontSize: 17, color: 'rgba(255,255,255,0.8)', maxWidth: 620, lineHeight: 1.55 }}>
                Three steps. Free in-person inspection. Payment after RTA verification &amp; pick-up. We settle outstanding finance.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 22 }}>
              {[
                { v: '~2hr', l: 'To cash' },
                { v: '0', l: 'Hidden fees' },
                { v: '+8k', l: 'Cars bought' },
              ].map(s => (
                <div key={s.l}>
                  <div className="display mono" style={{ fontSize: 38, color: 'var(--gold)', letterSpacing: '-0.04em' }}>{s.v}</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Wizard card */}
      <div className="container-wide" style={{ marginTop: -70, position: 'relative', zIndex: 5 }}>
        <div style={{
          background: 'var(--surface)', border: '1px solid var(--border)',
          borderRadius: 16, overflow: 'hidden',
          boxShadow: '0 30px 80px -30px rgba(11,13,16,0.3)',
        }}>
          {/* Stepper */}
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 0, borderBottom: '1px solid var(--border)' }}>
            {steps.map((s, i) => (
              <button key={s.id} onClick={() => i < step && setStep(i)} style={{
                padding: '24px 28px', textAlign: 'left',
                background: i === step ? 'var(--ink)' : i < step ? 'var(--surface)' : 'var(--surface-2)',
                color: i === step ? '#fff' : i < step ? 'var(--text)' : 'var(--text-muted)',
                border: 'none',
                borderRight: i < steps.length - 1 ? '1px solid var(--border)' : 'none',
                cursor: i < step ? 'pointer' : 'default',
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <span style={{
                  width: 30, height: 30, borderRadius: '50%',
                  background: i === step ? 'var(--alba-red)' : i < step ? '#2ECC71' : 'transparent',
                  border: '1px solid ' + (i === step ? 'var(--alba-red)' : i < step ? '#2ECC71' : 'currentColor'),
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--f-mono)', fontSize: 12, color: i <= step ? '#fff' : 'currentColor',
                  flexShrink: 0,
                }}>{i < step ? <Icon name="check" size={14} /> : (i + 1).toString().padStart(2,'0')}</span>
                <div>
                  <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7 }}>Step {i+1}</div>
                  <div style={{ fontFamily: 'var(--f-display)', fontSize: 14, fontWeight: 500, marginTop: 2 }}>{s.label}</div>
                </div>
              </button>
            ))}
          </div>

          {/* Body */}
          <div style={{ padding: 'clamp(28px, 5vw, 56px)' }}>
            {step === 0 && <StepCar data={data} update={update} />}
            {step === 1 && <StepCondition data={data} update={update} />}
            {step === 2 && <StepContact data={data} update={update} />}
            {step === 3 && <StepOffer data={data} setRoute={setRoute} />}

            {step < 3 && (
              <div style={{ marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                {step > 0 ? (
                  <button onClick={() => setStep(step - 1)} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    background: 'none', border: 'none', padding: 0,
                    color: 'var(--text-muted)', cursor: 'pointer',
                    fontFamily: 'var(--f-display)', fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase',
                  }}>
                    <Icon name="arrow-left" size={14} /> Back
                  </button>
                ) : <span />}

                <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                    {step === 0 ? 'Takes ~60 seconds' : step === 1 ? 'Almost there' : 'Last step before your offer'}
                  </span>
                  <Btn variant="primary" icon="arrow-right" onClick={() => canNext && setStep(step + 1)} style={{ opacity: canNext ? 1 : 0.4, pointerEvents: canNext ? 'auto' : 'none' }}>
                    {step === 2 ? 'Get Instant Offer' : 'Continue'}
                  </Btn>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Below — value props */}
        <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? 'repeat(3, 1fr)' : '1fr', gap: 16, marginTop: 50 }}>
          {[
            { i: '01', t: 'Share Your Car Details', d: 'A few quick details — make, model, year, mileage, condition. We give you the best price instantly.' },
            { i: '02', t: 'Car Inspection', d: 'Our experts inspect your car in person and present the final offer. Free, no obligation.' },
            { i: '03', t: 'Secure Payment & Pick-Up', d: 'We complete payment after RTA verification and arrange your car\'s pick-up. Same-day in most cases.' },
          ].map(s => (
            <div key={s.i} style={{ padding: 28, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12 }}>
              <div className="mono" style={{ fontSize: 14, color: 'var(--alba-red)' }}>{s.i} / 03</div>
              <h3 className="display" style={{ marginTop: 12, fontSize: 22, letterSpacing: '-0.02em' }}>{s.t}</h3>
              <p style={{ marginTop: 10, color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 60, padding: 36, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12, display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1fr auto' : '1fr', gap: 32, alignItems: 'center' }}>
          <div>
            <Eyebrow>Got finance left on it? No problem.</Eyebrow>
            <h3 className="display" style={{ marginTop: 14, fontSize: 26, letterSpacing: '-0.025em' }}>We settle your bank, you keep the difference.</h3>
            <p style={{ marginTop: 12, color: 'var(--text-muted)', fontSize: 15, maxWidth: 620, lineHeight: 1.55 }}>
              If your car has outstanding finance, we'll settle it directly with your bank. The remaining value lands in your account same-day, after RTA transfer.
            </p>
          </div>
          <Btn variant="ghost" icon="arrow-right">How it works</Btn>
        </div>
      </div>

      <div style={{ paddingBottom: 80 }} />
    </div>
  );
}

function StepCar({ data, update }) {
  return (
    <div>
      <Eyebrow>Step 1 of 3</Eyebrow>
      <h2 className="display" style={{ marginTop: 12, fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.035em' }}>
        Tell us about your car.
      </h2>
      <p style={{ marginTop: 12, color: 'var(--text-muted)', fontSize: 15 }}>Just the basics — we'll do the rest.</p>

      <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: window.innerWidth > 700 ? 'repeat(2, 1fr)' : '1fr', gap: 18 }}>
        <Field label="Make">
          <select className="select" value={data.make} onChange={e => update('make', e.target.value)}>
            <option value="">Select make</option>
            {BRANDS.map(b => <option key={b}>{b}</option>)}
            <option>Other</option>
          </select>
        </Field>
        <Field label="Model">
          <input className="input" placeholder="e.g. C 200, Q5, X5" value={data.model} onChange={e => update('model', e.target.value)} />
        </Field>
        <Field label="Year">
          <select className="select" value={data.year} onChange={e => update('year', e.target.value)}>
            <option value="">Select year</option>
            {Array.from({ length: 16 }, (_, i) => 2025 - i).map(y => <option key={y}>{y}</option>)}
          </select>
        </Field>
        <Field label="Mileage (km)">
          <input className="input" type="number" placeholder="e.g. 45,000" value={data.mileage} onChange={e => update('mileage', e.target.value)} />
        </Field>
      </div>
    </div>
  );
}

function StepCondition({ data, update }) {
  const conditions = [
    { id: 'excellent', l: 'Excellent', d: 'Like new, no visible flaws' },
    { id: 'good', l: 'Good', d: 'Minor wear consistent with age' },
    { id: 'fair', l: 'Fair', d: 'Visible wear, some repairs needed' },
    { id: 'poor', l: 'Poor', d: 'Significant cosmetic or mechanical issues' },
  ];
  return (
    <div>
      <Eyebrow>Step 2 of 3</Eyebrow>
      <h2 className="display" style={{ marginTop: 12, fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.035em' }}>
        Condition &amp; quick specs.
      </h2>
      <p style={{ marginTop: 12, color: 'var(--text-muted)', fontSize: 15 }}>Approximate is fine — we confirm everything at inspection.</p>

      <div style={{ marginTop: 32 }}>
        <div className="label">Condition</div>
        <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 700 ? 'repeat(4, 1fr)' : 'repeat(2, 1fr)', gap: 10 }}>
          {conditions.map(c => (
            <button key={c.id} onClick={() => update('condition', c.id)} style={{
              padding: 18, textAlign: 'left',
              background: data.condition === c.id ? 'var(--ink)' : 'transparent',
              color: data.condition === c.id ? '#fff' : 'var(--text)',
              border: '1px solid ' + (data.condition === c.id ? 'var(--ink)' : 'var(--border)'),
              borderRadius: 10, cursor: 'pointer',
              transition: 'all 0.15s',
            }}>
              <div className="display" style={{ fontSize: 17, letterSpacing: '-0.015em' }}>{c.l}</div>
              <div style={{ fontSize: 12, marginTop: 6, opacity: 0.7 }}>{c.d}</div>
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: window.innerWidth > 700 ? 'repeat(2, 1fr)' : '1fr', gap: 18 }}>
        <Field label="Fuel">
          <Segmented options={['Petrol','Hybrid','Electric','Diesel']} value={data.fuel} onChange={v => update('fuel', v)} />
        </Field>
        <Field label="Transmission">
          <Segmented options={['Automatic','Manual']} value={data.trans} onChange={v => update('trans', v)} />
        </Field>
        <Field label="Full service history">
          <Segmented options={['Yes','Partial','No']} value={data.service} onChange={v => update('service', v)} />
        </Field>
        <Field label="Accidents reported">
          <Segmented options={['None','Minor','Major']} value={data.accidents} onChange={v => update('accidents', v)} />
        </Field>
      </div>
    </div>
  );
}

function StepContact({ data, update }) {
  return (
    <div>
      <Eyebrow>Step 3 of 3</Eyebrow>
      <h2 className="display" style={{ marginTop: 12, fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.035em' }}>
        Where should we send your offer?
      </h2>
      <p style={{ marginTop: 12, color: 'var(--text-muted)', fontSize: 15 }}>
        We'll show your instant offer next — and a specialist will call within 30 minutes (showroom hours).
      </p>

      <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: window.innerWidth > 700 ? 'repeat(2, 1fr)' : '1fr', gap: 18 }}>
        <Field label="Your name">
          <input className="input" placeholder="Full name" value={data.name} onChange={e => update('name', e.target.value)} />
        </Field>
        <Field label="Phone / WhatsApp">
          <input className="input" type="tel" placeholder="+971 ..." value={data.phone} onChange={e => update('phone', e.target.value)} />
        </Field>
        <Field label="Email">
          <input className="input" type="email" placeholder="you@email.com" value={data.email} onChange={e => update('email', e.target.value)} />
        </Field>
        <Field label="Emirate">
          <Segmented options={['Dubai','Abu Dhabi','Sharjah','Other']} value={data.emirate} onChange={v => update('emirate', v)} />
        </Field>
      </div>

      <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 24, fontSize: 13, color: 'var(--text-muted)' }}>
        <input type="checkbox" defaultChecked style={{ marginTop: 3 }} />
        <span>I agree to be contacted by Alba Cars about my valuation. You can read our privacy policy.</span>
      </label>
    </div>
  );
}

function StepOffer({ data, setRoute }) {
  // illustrative offer formula — clearly labelled demo
  const base = useMemoS(() => {
    const years = data.year ? Math.max(0, 2026 - Number(data.year)) : 5;
    const km = Number(data.mileage) || 60000;
    const condMult = { excellent: 1.0, good: 0.93, fair: 0.82, poor: 0.7 }[data.condition] || 0.9;
    let basePrice = 120000;
    if (['Mercedes-Benz','BMW','Audi','Land Rover','Porsche'].includes(data.make)) basePrice = 220000;
    if (['Ferrari','Lamborghini','Bentley','Rolls Royce','Aston Martin','Maserati'].includes(data.make)) basePrice = 520000;
    const yearAdj = Math.max(0.45, 1 - years * 0.08);
    const kmAdj = Math.max(0.7, 1 - (km - 30000) / 400000);
    const result = Math.round(basePrice * yearAdj * kmAdj * condMult);
    const low = Math.round(result * 0.94 / 1000) * 1000;
    const high = Math.round(result * 1.06 / 1000) * 1000;
    return { low, high };
  }, [data]);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1fr 1.2fr' : '1fr', gap: 36, alignItems: 'flex-start' }}>
        <div>
          <Eyebrow>Your instant offer · illustrative</Eyebrow>
          <h2 className="display" style={{ marginTop: 12, fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.035em' }}>
            {data.year} {data.make} {data.model || ''}
          </h2>
          <div style={{ marginTop: 14, fontSize: 13, color: 'var(--text-muted)', display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <span><span className="mono">{data.mileage ? Number(data.mileage).toLocaleString() + ' km' : '—'}</span></span>
            <span style={{ color: 'var(--border)' }}>·</span>
            <span style={{ textTransform: 'capitalize' }}>{data.condition || '—'} condition</span>
            <span style={{ color: 'var(--border)' }}>·</span>
            <span>{data.fuel || '—'} · {data.trans || '—'}</span>
          </div>

          <div style={{
            marginTop: 36,
            padding: 32,
            background: 'var(--noir)', color: '#fff',
            borderRadius: 14,
          }}>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Estimated range — demo</div>
            <div className="mono" style={{ marginTop: 8, fontSize: 'clamp(36px, 5.5vw, 60px)', color: 'var(--gold)', letterSpacing: '-0.03em' }}>
              AED {base.low.toLocaleString()} – {base.high.toLocaleString()}
            </div>
            <div style={{ marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.7)', maxWidth: 460, lineHeight: 1.55 }}>
              Final offer presented after free in-person inspection. We settle outstanding finance &amp; handle all RTA paperwork. Payment same-day in most cases.
            </div>

            <div style={{ marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--line-dk)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn variant="light" icon="calendar">Book inspection</Btn>
              <Btn variant="ghost" icon="whatsapp" style={{ color: '#fff', borderColor: 'var(--line-dk)' }}>WhatsApp specialist</Btn>
            </div>
          </div>
        </div>

        <div>
          <div className="display" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>What happens next.</div>
          <ol style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              { t: 'Confirmation call', d: 'A specialist calls you within 30 minutes (during showroom hours) to confirm details.' },
              { t: 'Book inspection', d: 'Pick a slot at our Al Asayel showroom — or we come to you in Dubai.' },
              { t: 'Inspection & offer', d: '~45 minute full inspection. Final offer presented on the spot.' },
              { t: 'RTA & payment', d: 'We transfer the RTA, settle any finance, and pay you. Same-day where possible.' },
            ].map((s, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16, padding: '16px 0', borderTop: '1px solid var(--border)' }}>
                <span className="mono" style={{ color: 'var(--alba-red)', fontSize: 13 }}>0{i+1}</span>
                <div>
                  <div className="display" style={{ fontSize: 16, letterSpacing: '-0.015em' }}>{s.t}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.5 }}>{s.d}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div className="label">{label}</div>
      {children}
    </div>
  );
}

function Segmented({ options, value, onChange }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 6 }}>
      {options.map(opt => (
        <button key={opt} onClick={() => onChange(opt)} style={{
          padding: '12px 8px',
          background: value === opt ? 'var(--ink)' : 'var(--surface)',
          color: value === opt ? '#fff' : 'var(--text)',
          border: '1px solid ' + (value === opt ? 'var(--ink)' : 'var(--border)'),
          borderRadius: 8,
          fontFamily: 'var(--f-display)', fontSize: 13, fontWeight: 500,
          cursor: 'pointer', transition: 'all 0.15s',
        }}>{opt}</button>
      ))}
    </div>
  );
}

// =============================================================
// FINANCE PAGE — simplified
// =============================================================
function FinancePage({ setRoute }) {
  return (
    <div style={{ paddingTop: 88 }}>
      <div style={{ padding: '90px 0', background: 'var(--noir)', color: '#fff' }}>
        <div className="container-wide">
          <Eyebrow>Finance · EMI up to 5 years</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 110px)', marginTop: 18, letterSpacing: '-0.045em', color: '#fff' }}>
            Drive now,<br/><span style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--gold)' }}>pay monthly.</span>
          </h1>
          <p style={{ marginTop: 22, fontSize: 17, color: 'rgba(255,255,255,0.75)', maxWidth: 620, lineHeight: 1.55 }}>
            In partnership with leading UAE banks. EMI up to 5 years, lease-to-own up to 4. 60-second eligibility check, no credit pull.
          </p>
        </div>
      </div>
      <FinanceBand setRoute={setRoute} />
      <div className="section" style={{ background: 'var(--surface-2)' }}>
        <div className="container-wide">
          <SectionHead eyebrow="What we need" title="Eligibility, plainly." />
          <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? 'repeat(4, 1fr)' : 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
            {[
              { t: 'UAE residency', d: 'Valid Emirates ID and residency visa.' },
              { t: 'Income proof', d: '3 months\' salary slips or bank statements.' },
              { t: 'Down payment', d: 'Typically 20% — varies by bank & profile.' },
              { t: 'Bank approval', d: 'Final rate & tenure set by your bank.' },
            ].map((r, i) => (
              <div key={r.t} style={{ padding: 28, borderRight: (i < 3 && window.innerWidth > 900) ? '1px solid var(--border)' : 'none' }}>
                <div className="mono" style={{ fontSize: 13, color: 'var(--alba-red)' }}>0{i+1}</div>
                <div className="display" style={{ marginTop: 8, fontSize: 19, letterSpacing: '-0.02em' }}>{r.t}</div>
                <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.5 }}>{r.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// ABOUT PAGE — simplified
// =============================================================
function AboutPage({ setRoute }) {
  return (
    <div style={{ paddingTop: 88 }}>
      <section style={{ padding: '90px 0 60px' }}>
        <div className="container-wide">
          <Eyebrow>About · Alba Motors LLC</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 120px)', marginTop: 18, letterSpacing: '-0.045em' }}>
            Pre-owned, <span style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--alba-red)' }}>not pre-loved</span>.
          </h1>
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1fr 1fr' : '1fr', gap: 60, alignItems: 'flex-start' }}>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--text-muted)' }}>
              Alba Cars is a Dubai mainland company — Alba Motors LLC — operating one of the city's most trusted pre-owned showrooms in Al Quoz. We deal in British and German luxury, with curated selections across Japanese, American, and Italian marques.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--text-muted)' }}>
              Two-sided by design: we sell certified pre-owned cars with a 1-year warranty, and we buy from the public with an honest, ~2-hour offer. RTA and bank paperwork happens in-house, UAE delivery on us.
            </p>
          </div>
        </div>
      </section>
      <section>
        <div className="container-wide" style={{ padding: 0 }}>
          <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? 'repeat(3, 1fr)' : '1fr', gap: 0, borderTop: '1px solid var(--border)' }}>
            {[
              { img: 'media/showroom-exterior.webp', label: 'Showroom' },
              { img: 'media/showroom-interior.webp', label: 'Floor' },
              { img: 'media/showroom-team.webp', label: 'Team' },
            ].map((x, i) => (
              <div key={i} style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', borderRight: (i < 2 && window.innerWidth > 900) ? '1px solid var(--border)' : 'none' }}>
                <img src={x.img} alt={x.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                <div style={{ position: 'absolute', bottom: 18, left: 22, color: '#fff', textShadow: '0 2px 8px rgba(0,0,0,0.6)', fontFamily: 'var(--f-display)', letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 12 }}>{x.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container-wide">
          <SectionHead eyebrow="Track record" title="Numbers we'll stand behind." />
          <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 700 ? 'repeat(4, 1fr)' : 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
            {[
              { v: '~2hr', l: 'Avg sell time' },
              { v: '154', l: 'Inspection points' },
              { v: '1yr', l: 'Free warranty' },
              { v: '17', l: 'Marques on the floor' },
            ].map((s, i) => (
              <div key={s.l} style={{ padding: '40px 28px', borderRight: (i < 3 && window.innerWidth > 700) ? '1px solid var(--border)' : 'none' }}>
                <div className="display mono" style={{ fontSize: 56, letterSpacing: '-0.04em', color: 'var(--ink)' }}>{s.v}</div>
                <div style={{ marginTop: 10, fontSize: 12, color: 'var(--text-muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================================
// CONTACT PAGE — simplified
// =============================================================
function ContactPage({ setRoute }) {
  return (
    <div style={{ paddingTop: 88 }}>
      <section style={{ padding: '90px 0 50px' }}>
        <div className="container-wide">
          <Eyebrow>Contact</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 110px)', marginTop: 18, letterSpacing: '-0.045em' }}>
            Drop by, dial in,<br/><span style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--alba-red)' }}>or message.</span>
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 100 }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1.2fr 1fr' : '1fr', gap: 40 }}>
          {/* Map placeholder */}
          <div style={{
            borderRadius: 14, overflow: 'hidden', position: 'relative',
            aspectRatio: '4/3',
            background: 'var(--surface-2)',
            backgroundImage: 'linear-gradient(45deg, transparent 47.5%, var(--border) 47.5%, var(--border) 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, var(--border) 47.5%, var(--border) 52.5%, transparent 52.5%)',
            backgroundSize: '40px 40px',
          }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, transparent 0%, var(--surface-2) 80%)' }} />
            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', display: 'grid', placeItems: 'center', gap: 14 }}>
              <div style={{ width: 70, height: 70, borderRadius: '50%', background: 'var(--alba-red)', display: 'grid', placeItems: 'center', color: '#fff', boxShadow: '0 20px 50px -20px rgba(158,27,27,0.6)' }}>
                <Icon name="pin" size={28} />
              </div>
              <div style={{ textAlign: 'center', background: 'var(--surface)', padding: '12px 18px', borderRadius: 10, border: '1px solid var(--border)' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Alba Cars showroom</div>
                <div style={{ marginTop: 4, fontFamily: 'var(--f-display)', fontSize: 14 }}>Al Asayel St, Al Quoz Ind 1</div>
              </div>
            </div>
            <div style={{ position: 'absolute', bottom: 16, right: 16, fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--text-muted)', background: 'var(--surface)', padding: '4px 8px', borderRadius: 4, border: '1px solid var(--border)' }}>
              Map placeholder · live coords to confirm
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <ContactRow icon="pin" label="Showroom" lines={['Showroom 17, 18 & 20', 'Al Asayel Street', 'Al Quoz Ind 1, Dubai, UAE']} />
            <ContactRow icon="phone" label="Phone" lines={[<a href="tel:+97143772503" className="mono">+971 4 377 2503</a>]} />
            <ContactRow icon="whatsapp" label="WhatsApp" lines={[<a href="https://wa.me/97143772503" className="mono">+971 4 377 2503</a>]} />
            <ContactRow icon="mail" label="Email" lines={[<a href="mailto:info@albacars.ae">info@albacars.ae</a>]} />
            <ContactRow icon="calendar" label="Hours" lines={['Sunday – Saturday', '09:30 – 22:00']} />

            <div style={{ marginTop: 8, display: 'flex', gap: 10 }}>
              <Btn variant="primary" icon="whatsapp" href="https://wa.me/97143772503">WhatsApp us</Btn>
              <Btn variant="ghost" icon="phone" href="tel:+97143772503">Call</Btn>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactRow({ icon, label, lines }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '48px 110px 1fr', gap: 18, paddingBottom: 22, borderBottom: '1px solid var(--border)', alignItems: 'flex-start' }}>
      <div style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--border)', display: 'grid', placeItems: 'center', color: 'var(--alba-red)' }}>
        <Icon name={icon} size={16} />
      </div>
      <span style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.12em', paddingTop: 12 }}>{label}</span>
      <div style={{ paddingTop: 12 }}>
        {lines.map((l, i) => <div key={i} style={{ fontSize: 15, marginTop: i ? 4 : 0 }}>{l}</div>)}
      </div>
    </div>
  );
}

// =============================================================
// BRANDS PAGE — uses BrandWall + featured per brand
// =============================================================
function BrandsPage({ setRoute, setVehicleId }) {
  return (
    <div style={{ paddingTop: 88 }}>
      <section style={{ padding: '90px 0 50px' }}>
        <div className="container-wide">
          <Eyebrow>Brands · 17 marques</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 110px)', marginTop: 18, letterSpacing: '-0.045em' }}>
            Shop by <span style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--alba-red)' }}>marque</span>.
          </h1>
          <p style={{ marginTop: 20, fontSize: 16, color: 'var(--text-muted)', maxWidth: 600, lineHeight: 1.55 }}>
            British and German lead. Live counts shown — tap any marque to filter the inventory.
          </p>
        </div>
      </section>
      <BrandWall setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { SellPage, FinancePage, AboutPage, ContactPage, BrandsPage });