// Alba Cars — Vehicle Detail page (the flagship cinematic page) const { useState: useStateV } = React; function VehiclePage({ id, setRoute, setVehicleId }) { const v = VEHICLES.find(x => x.id === id); const [tab, setTab] = useStateV('specs'); if (!v) { return (

Vehicle not found

setRoute('buy')}>Back to inventory
); } const isPOA = v.price == null; const similar = VEHICLES.filter(x => x.body === v.body && x.id !== v.id).slice(0, 4); return (
{/* Breadcrumbs */}
{v.year} {v.model}
{/* Hero — full-bleed photo */}
900 ? '21/9' : '4/3', background: 'var(--surface-2)', }}> {`${v.year}
{/* Top badges */}
Certified Pre-Owned ● 150+ Point Inspected RTA Certified
{/* Bottom info */}
{v.year} · {v.make} · {v.stockId}

{v.model} {v.variant}

{isPOA ? 'Inquire for price' : 'Demo price'}
{fmtAED(v.price)}
{/* Thumb strip - placeholder */}
900 ? 'flex' : 'none', gap: 6 }}> {[1,2,3,4,5,6,7,8].map(i => (
{i.toString().padStart(2,'0')}
))}
{/* Key facts row */}
900 ? 'repeat(6, 1fr)' : 'repeat(3, 1fr)', gap: 0, }}> {[ { l: 'Year', v: v.year, icon: 'calendar' }, { l: 'Mileage', v: fmtMileage(v.mileage), icon: 'gauge' }, { l: 'Engine', v: v.engine, icon: 'fuel' }, { l: 'Power', v: v.power, icon: 'sparkle' }, { l: 'Transmission', v: v.trans, icon: 'transmission' }, { l: 'Drivetrain', v: v.drive, icon: 'cog' }, ].map((k, i) => (
900 ? 6 : 3) !== (window.innerWidth > 900 ? 5 : 2)) ? '1px solid var(--border)' : 'none', display: 'flex', flexDirection: 'column', gap: 6, }}>
{k.l}
{k.v}
))}
{/* Main body — content + sticky enquiry */}
1100 ? '1.6fr 1fr' : '1fr', gap: 60 }}> {/* Left content */}
{/* Tabs */}
{['specs', 'inspection', 'history', 'features'].map(t => ( ))}
{tab === 'specs' && } {tab === 'inspection' && } {tab === 'history' && } {tab === 'features' && }
{/* Right enquiry */}
{/* Similar */}
setRoute('buy')}>All inventory} />
1100 ? 'repeat(4, 1fr)' : window.innerWidth > 700 ? 'repeat(2, 1fr)' : '1fr', gap: 20, }}> {similar.map(s => ( { setVehicleId(s.id); window.scrollTo({top:0}); }} /> ))}
); } function crumbBtn() { return { background: 'none', border: 'none', color: 'inherit', fontSize: 12, cursor: 'pointer', padding: 0, }; } function pillStyle(bg, fg) { return { background: bg, color: fg, padding: '5px 12px', borderRadius: 999, fontFamily: 'var(--f-display)', fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase', backdropFilter: 'blur(4px)', display: 'inline-flex', alignItems: 'center', gap: 5, }; } function iconCircle() { return { width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', border: 'none', color: 'var(--ink)', display: 'grid', placeItems: 'center', cursor: 'pointer', backdropFilter: 'blur(8px)', }; } function TabSpecs({ v }) { const rows = [ ['Make', v.make], ['Model', v.model], ['Variant', v.variant], ['Year', v.year], ['Body type', v.body], ['Mileage', fmtMileage(v.mileage)], ['Exterior colour', v.ext], ['Interior', v.intC], ['Engine', v.engine], ['Power output', v.power], ['Transmission', v.trans], ['Drivetrain', v.drive], ['Stock ID', v.stockId], ['VIN', 'WDD2050651F••••••'], ['Registration', 'Dubai · Private'], ['Owners', '1 previous'], ]; return (
700 ? '1fr 1fr' : '1fr', columnGap: 40 }}> {rows.map(([k, val]) => (
{k} {val}
))}
); } function TabInspection({ v }) { const cats = [ { t: 'Engine & Drivetrain', n: 38, p: 38 }, { t: 'Transmission', n: 24, p: 24 }, { t: 'Body & Paint', n: 32, p: 31, note: 'Minor stone chip on front bumper — re-touched' }, { t: 'Electronics & ADAS', n: 28, p: 28 }, { t: 'Suspension & Brakes', n: 18, p: 18 }, { t: 'Interior & Comfort', n: 14, p: 14 }, ]; return (

Inspected on 2026-05-18 by senior technician R. Nair. 154 points checked, 153 passed, 1 noted (cosmetic). Full digital report below.

{cats.map(c => (
{c.t}
{c.note &&
{c.note}
}
{c.p} /{c.n} pass
))}
Full report
154-point inspection PDF
Download report
); } function TabHistory({ v }) { const timeline = [ { d: '2022-03', t: 'First registered', sub: 'Dubai, UAE — Private use' }, { d: '2023-04', t: 'Service · 15,000 km', sub: 'Authorized dealer · oil, filters, brake fluid' }, { d: '2024-06', t: 'Service · 30,000 km', sub: 'Authorized dealer · major service, brake pads' }, { d: '2026-05', t: 'Acquired by Alba Cars', sub: '154-point inspection passed · Listed on showroom floor' }, ]; return (

Single owner, GCC-spec, full service history at authorized dealer. No accidents recorded against the VIN.

{timeline.map((item, i) => (
{item.d}
{item.t}
{item.sub}
))}
); } function TabFeatures({ v }) { const groups = [ { t: 'Performance', items: ['Adaptive Damping', 'Sport Exhaust', 'Launch Control', 'Drive Mode Select', 'Limited-Slip Differential'] }, { t: 'Comfort', items: ['Heated & Ventilated Seats', '4-Zone Climate', 'Memory Seats', 'Panoramic Roof', 'Soft-Close Doors'] }, { t: 'Technology', items: ['Heads-Up Display', '360° Camera', 'Wireless CarPlay', 'Burmester Sound', 'Digital Cockpit'] }, { t: 'Safety', items: ['Adaptive Cruise', 'Lane Keep Assist', 'Blind Spot Monitor', 'Pre-Collision', 'Surround Airbags'] }, ]; return (
700 ? 'repeat(2, 1fr)' : '1fr', gap: 28 }}> {groups.map(g => (
{g.t}
    {g.items.map(it => (
  • {it}
  • ))}
))}
); } function EnquiryPanel({ v, setRoute }) { const [name, setName] = useStateV(''); const [phone, setPhone] = useStateV(''); const [intent, setIntent] = useStateV('request-price'); const [submitted, setSubmitted] = useStateV(false); const isPOA = v.price == null; const intents = [ { id: 'request-price', label: 'Request price' }, { id: 'book-viewing', label: 'Book viewing' }, { id: 'trade-in', label: 'Trade-in' }, { id: 'finance', label: 'Finance' }, ]; if (submitted) { return (

Got it — we'll be in touch.

A specialist will reach out about the {v.year} {v.model} within 30 minutes during showroom hours.

Continue on WhatsApp
); } return (
{isPOA ? 'Price on Application' : 'Demo price'}
{fmtAED(v.price)}
{!isPOA && (
From / mo
AED {Math.round(v.price / 60).toLocaleString()}
)}
{!isPOA && (
Finance from 2.99% reducing · 60-mo · 20% down
)}
{intents.map(it => ( ))}
{ e.preventDefault(); setSubmitted(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}> setName(e.target.value)} required /> setPhone(e.target.value)} required />