/* global React, Icon, Chip, Btn, Price, VehicleCard, SectionHead */
const { useState, useEffect, useMemo, useRef } = React;

// ─── Fleet listing page ──────────────────────────────────────────────────
function FleetPage({ onSelect, initialCategory }) {
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState(initialCategory || "all");
  const [body, setBody] = useState("all");
  const [seats, setSeats] = useState("all");
  const [priceMax, setPriceMax] = useState(3500);
  const [transmission, setTransmission] = useState("all");
  const [fuel, setFuel] = useState("all");
  const [sort, setSort] = useState("featured");
  const [view, setView] = useState("grid");

  const filtered = useMemo(() => {
    let arr = [...window.FLEET];
    if (search) arr = arr.filter(v => (v.make + " " + v.model).toLowerCase().includes(search.toLowerCase()));
    if (category !== "all") arr = arr.filter(v => v.category === category);
    if (body !== "all") arr = arr.filter(v => v.body === body);
    if (seats !== "all") arr = arr.filter(v => v.seats >= Number(seats));
    if (transmission !== "all") arr = arr.filter(v => v.transmission === transmission);
    if (fuel !== "all") arr = arr.filter(v => v.fuel === fuel);
    arr = arr.filter(v => v.price == null || v.price <= priceMax);
    if (sort === "priceAsc") arr.sort((a,b) => (a.price ?? 99999) - (b.price ?? 99999));
    if (sort === "priceDesc") arr.sort((a,b) => (b.price ?? 99999) - (a.price ?? 99999));
    if (sort === "featured") arr.sort((a,b) => (b.featured?1:0) - (a.featured?1:0));
    return arr;
  }, [search, category, body, seats, priceMax, transmission, fuel, sort]);

  const FilterGroup = ({ label, value, options, onChange }) => (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", marginBottom: 10 }}>{label}</div>
      <div style={{ display:"flex", flexDirection:"column", gap: 2 }}>
        {options.map(o => {
          const val = Array.isArray(o) ? o[0] : o;
          const lbl = Array.isArray(o) ? o[1] : o;
          const active = value === val;
          return (
            <button key={val} onClick={() => onChange(val)} style={{
              textAlign:"left", padding:"7px 10px", borderRadius: 4, border:"none", cursor:"pointer",
              background: active ? "rgba(225,108,42,0.1)" : "transparent",
              color: active ? "var(--primary)" : "var(--text)",
              fontSize: 13, fontWeight: active ? 600 : 400, display:"flex", justifyContent:"space-between"
            }}>
              <span>{lbl}</span>
              {active && <Icon name="check" size={12}/>}
            </button>
          );
        })}
      </div>
    </div>
  );

  return (
    <div style={{ background:"var(--bg)" }}>
      {/* Header band */}
      <header style={{ padding:"56px 0 32px", borderBottom:"1px solid var(--border)" }}>
        <div className="container" style={{ padding:"0 32px" }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", flexWrap:"wrap", gap: 24 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 12 }}>The Fleet · {filtered.length} of {window.FLEET.length} shown</div>
              <h1 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize:"clamp(40px, 6vw, 72px)", fontWeight: 600, letterSpacing:-1.5, lineHeight: 1 }}>
                Pick your <span style={{ color:"var(--primary)", fontStyle:"italic" }}>ride.</span>
              </h1>
            </div>
            <div style={{ display:"flex", gap: 10, alignItems:"center" }}>
              <div style={{ position:"relative" }}>
                <Icon name="search" size={14}/>
                <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search make or model…"
                  style={{ background:"var(--surface)", border:"1px solid var(--border)", color:"var(--text)", borderRadius: 4, padding:"11px 14px 11px 36px", fontSize: 13, width: 280, outline:"none" }}/>
                <span style={{ position:"absolute", left: 12, top:"50%", transform:"translateY(-50%)", color:"var(--muted)", pointerEvents:"none" }}><Icon name="search" size={14}/></span>
              </div>
              <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ background:"var(--surface)", border:"1px solid var(--border)", color:"var(--text)", borderRadius: 4, padding:"11px 14px", fontSize: 13, cursor:"pointer", outline:"none" }}>
                <option value="featured">Featured first</option>
                <option value="priceAsc">Price: low → high</option>
                <option value="priceDesc">Price: high → low</option>
              </select>
              <div style={{ display:"flex", border:"1px solid var(--border)", borderRadius: 4, overflow:"hidden" }}>
                <button onClick={() => setView("grid")} style={{ padding: 11, background: view === "grid" ? "var(--primary)" : "transparent", color: view === "grid" ? "#0E0F12" : "var(--muted)", border:"none", cursor:"pointer" }}><Icon name="grid" size={14}/></button>
                <button onClick={() => setView("list")} style={{ padding: 11, background: view === "list" ? "var(--primary)" : "transparent", color: view === "list" ? "#0E0F12" : "var(--muted)", border:"none", cursor:"pointer" }}><Icon name="list" size={14}/></button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="container" style={{ padding:"32px 32px 96px", display:"grid", gridTemplateColumns:"240px 1fr", gap: 32 }}>
        {/* Sidebar filters */}
        <aside style={{ display:"flex", flexDirection:"column", gap: 28, position:"sticky", top: 90, alignSelf:"flex-start", maxHeight:"calc(100vh - 110px)", overflowY:"auto" }}>
          <FilterGroup label="Category" value={category} onChange={setCategory} options={[["all", `All (${window.FLEET.length})`], ["supercar","Supercar"], ["luxury","Luxury"], ["sports","Sports"], ["suv","SUV"], ["electric","Electric"]]}/>
          <FilterGroup label="Body" value={body} onChange={setBody} options={[["all","Any"], "SUV","Sedan","Convertible","Coupe","Off-road","Pickup"]}/>
          <FilterGroup label="Seats" value={seats} onChange={setSeats} options={[["all","Any"], ["2","2+"], ["4","4+"], ["5","5+"], ["7","7+"]]}/>
          <FilterGroup label="Transmission" value={transmission} onChange={setTransmission} options={[["all","Any"], "Auto"]}/>
          <FilterGroup label="Fuel" value={fuel} onChange={setFuel} options={[["all","Any"], "Petrol","Electric","Hybrid"]}/>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", marginBottom: 10 }}>Max price / day</div>
            <input type="range" min="300" max="3500" step="50" value={priceMax} onChange={(e) => setPriceMax(Number(e.target.value))} style={{ width:"100%", accentColor:"var(--primary)" }}/>
            <div style={{ display:"flex", justifyContent:"space-between", fontSize: 11, color:"var(--muted)", marginTop: 6, fontVariantNumeric:"tabular-nums" }}>
              <span>AED 300</span><span style={{ color:"var(--primary)", fontWeight: 700 }}>AED {priceMax.toLocaleString()}</span>
            </div>
          </div>
          <button onClick={() => { setSearch(""); setCategory("all"); setBody("all"); setSeats("all"); setPriceMax(3500); setTransmission("all"); setFuel("all"); setSort("featured"); }} style={{ background:"transparent", border:"1px solid var(--border)", color:"var(--muted)", padding:"10px 14px", borderRadius: 4, fontSize: 12, fontWeight: 600, cursor:"pointer", letterSpacing: 1, textTransform:"uppercase" }}>Reset filters</button>
        </aside>

        {/* Results */}
        <div>
          {filtered.length === 0 ? (
            <div style={{ padding: 80, textAlign:"center", color:"var(--muted)", border:"1px dashed var(--border)", borderRadius: 8 }}>No vehicles match your filters. Try widening the range.</div>
          ) : view === "grid" ? (
            <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 18 }}>
              {filtered.map(v => <VehicleCard key={v.id} v={v} onSelect={onSelect}/>)}
            </div>
          ) : (
            <div style={{ display:"flex", flexDirection:"column", gap: 12 }}>
              {filtered.map(v => <FleetListRow key={v.id} v={v} onSelect={onSelect}/>)}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
window.FleetPage = FleetPage;

function FleetListRow({ v, onSelect }) {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={() => onSelect(v)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background:"var(--surface)", border:"1px solid", borderColor: hover ? "var(--primary)" : "var(--border)", borderRadius: 8, padding: 16, display:"grid", gridTemplateColumns:"180px 1fr auto auto", gap: 24, alignItems:"center", cursor:"pointer", transition:"border-color .2s ease" }}>
      <img src={v.image} alt="" style={{ width:"100%", aspectRatio:"3/2", objectFit:"cover", borderRadius: 4 }}/>
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase" }}>{v.make}</div>
        <h3 style={{ margin:"4px 0 8px", fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600 }}>{v.model}</h3>
        <div style={{ display:"flex", gap: 6, flexWrap:"wrap" }}>
          <Chip size="sm">{v.category}</Chip>
          <Chip size="sm">{v.body}</Chip>
          <Chip size="sm">{v.seats} seats</Chip>
          <Chip size="sm">{v.fuel}</Chip>
          {v.tags.map(t => <Chip key={t} tone="primary" size="sm">{t}</Chip>)}
        </div>
      </div>
      <div style={{ textAlign:"right" }}><Price value={v.price}/></div>
      <Btn variant={hover ? "primary" : "ghost"} iconRight="arrow" size="sm">Book</Btn>
    </div>
  );
}

// ─── Vehicle Detail ──────────────────────────────────────────────────────
function VehicleDetail({ v, onClose, onBook }) {
  if (!v) return null;
  const similar = window.FLEET.filter(x => x.category === v.category && x.id !== v.id).slice(0, 4);
  const specs = [
    { label:"Category", value: v.category },
    { label:"Body", value: v.body },
    { label:"Seats", value: v.seats },
    { label:"Transmission", value: v.transmission },
    { label:"Fuel", value: v.fuel },
    { label:"Engine", value: v.power }
  ];
  return (
    <div style={{ background:"var(--bg)" }}>
      {/* Crumb */}
      <div className="container" style={{ padding:"24px 32px 0", display:"flex", alignItems:"center", gap: 10, fontSize: 12, color:"var(--muted)" }}>
        <a href="#" onClick={(e) => { e.preventDefault(); window.go("home"); }} style={{ color:"var(--muted)", textDecoration:"none" }}>Home</a>
        <Icon name="chevron" size={10} stroke={2}/>
        <a href="#" onClick={(e) => { e.preventDefault(); window.go("fleet"); }} style={{ color:"var(--muted)", textDecoration:"none" }}>Fleet</a>
        <Icon name="chevron" size={10} stroke={2}/>
        <span style={{ color:"var(--text)" }}>{v.make} {v.model}</span>
      </div>

      <div className="container" style={{ padding:"32px 32px 80px", display:"grid", gridTemplateColumns:"1.4fr 1fr", gap: 56 }}>
        {/* Gallery */}
        <div>
          <div style={{ position:"relative", borderRadius: 10, overflow:"hidden", background:"#000", aspectRatio:"4/3" }}>
            <img src={v.image} alt={`${v.make} ${v.model}`} style={{ width:"100%", height:"100%", objectFit:"cover" }}/>
            <div style={{ position:"absolute", top: 16, left: 16, display:"flex", gap: 6, flexWrap:"wrap" }}>
              <Chip tone="primary" icon="check">No deposit</Chip>
              {v.tags.map(t => <Chip key={t} tone="paper" size="sm">{t}</Chip>)}
            </div>
          </div>
          {/* Thumb strip — placeholder */}
          <div style={{ marginTop: 12, display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 8 }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{ aspectRatio:"3/2", background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 4, overflow:"hidden", opacity: i === 0 ? 1 : 0.55, position:"relative", cursor:"pointer" }}>
                <img src={v.image} alt="" style={{ width:"100%", height:"100%", objectFit:"cover", filter: i === 1 ? "hue-rotate(20deg)" : i === 2 ? "saturate(0.7)" : i === 3 ? "brightness(0.7)" : "none" }}/>
                {i === 3 && <div style={{ position:"absolute", inset: 0, background:"rgba(0,0,0,0.45)", display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", fontSize: 12, fontWeight: 700 }}>+12</div>}
              </div>
            ))}
          </div>

          {/* Spec table */}
          <div style={{ marginTop: 48 }}>
            <div style={{ fontFamily:"var(--font-display)", fontSize: 12, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 16 }}>The spec</div>
            <div style={{ border:"1px solid var(--border)", borderRadius: 6, overflow:"hidden" }}>
              {specs.map((s, i) => (
                <div key={s.label} style={{ display:"grid", gridTemplateColumns:"180px 1fr", padding:"16px 20px", borderBottom: i < specs.length-1 ? "1px solid var(--border)" : "none", background: i % 2 === 0 ? "var(--surface)" : "transparent" }}>
                  <span style={{ fontSize: 12, color:"var(--muted)", letterSpacing: 1, textTransform:"uppercase", fontWeight: 600 }}>{s.label}</span>
                  <span style={{ fontFamily:"var(--font-display)", fontSize: 15, fontWeight: 500, color:"var(--text)", textTransform:"capitalize" }}>{s.value}</span>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 12, fontSize: 12, color:"var(--muted)", lineHeight: 1.5 }}>
              <Icon name="shield" size={11}/> Spec fields shown only when verified by the live fleet feed. Year, mileage and plate confirmed at handover.
            </p>
          </div>

          {/* Inclusions */}
          <div style={{ marginTop: 48 }}>
            <div style={{ fontFamily:"var(--font-display)", fontSize: 12, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 16 }}>What's in the price</div>
            <div style={{ display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap: 12 }}>
              {[
                { icon:"shield", title:"Basic insurance", body:"Comprehensive cover included by default." },
                { icon:"pin", title:"Delivery & return", body:"To any hotel, airport or address in Dubai." },
                { icon:"bolt", title:"250 km / day", body:"Extra km charged at AED 2. No hidden fees." },
                { icon:"clock", title:"24/7 support", body:"Real human on WhatsApp, English / Arabic / Russian." }
              ].map(it => (
                <div key={it.title} style={{ padding: 18, border:"1px solid var(--border)", borderRadius: 6, background:"var(--surface)", display:"flex", gap: 14, alignItems:"flex-start" }}>
                  <span style={{ flexShrink: 0, width: 36, height: 36, borderRadius: 18, background:"rgba(225,108,42,0.12)", color:"var(--primary)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name={it.icon} size={16}/></span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{it.title}</div>
                    <div style={{ fontSize: 12, color:"var(--muted)", lineHeight: 1.5 }}>{it.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Booking column */}
        <aside style={{ position:"sticky", top: 90, alignSelf:"flex-start" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 2.5, textTransform:"uppercase" }}>{v.make}</div>
          <h1 style={{ margin:"6px 0 24px", fontFamily:"var(--font-display)", fontSize: 44, fontWeight: 600, letterSpacing:-1, lineHeight: 1 }}>{v.model}</h1>

          <div style={{ display:"flex", flexWrap:"wrap", gap: 6, marginBottom: 24 }}>
            <Chip tone="primary" icon="check">No deposit</Chip>
            <Chip>{v.body}</Chip>
            <Chip>{v.seats} seats</Chip>
            <Chip>{v.transmission}</Chip>
            <Chip>{v.fuel}</Chip>
          </div>

          <div style={{ padding:"28px 28px 24px", background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 10 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", marginBottom: 10 }}>{v.price ? "Daily rate" : "Pricing"}</div>
            <Price value={v.price} size="xl"/>
            <p style={{ marginTop: 14, color:"var(--muted)", fontSize: 13, lineHeight: 1.5 }}>
              {v.price ? "All-in. Car, basic insurance, delivery and 250 km/day included. Longer rentals → lower daily rate." : "Hyper-luxe segment — we'll send a tailored quote within 5 minutes of your enquiry."}
            </p>

            <div style={{ marginTop: 20, display:"flex", flexDirection:"column", gap: 10 }}>
              <Btn variant="primary" full size="lg" iconRight="arrow" onClick={() => onBook(v)}>Book this car</Btn>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 10 }}>
                <Btn variant="whatsapp" icon="whatsapp" href={`https://wa.me/971527269337?text=Hi%20Octane.Rent%2C%20I%27d%20like%20to%20book%20the%20${encodeURIComponent(v.make + " " + v.model)}.`}>WhatsApp</Btn>
                <Btn variant="ghost" icon="phone" href="tel:+97142536700">Call</Btn>
              </div>
            </div>

            <div style={{ marginTop: 24, padding:"16px 0 0", borderTop:"1px solid var(--border)", fontSize: 12, color:"var(--muted)", display:"flex", flexDirection:"column", gap: 8 }}>
              <span style={{ display:"flex", alignItems:"center", gap: 8 }}><Icon name="bolt" size={13}/>Replies in ~5 min, 24/7</span>
              <span style={{ display:"flex", alignItems:"center", gap: 8 }}><Icon name="pin" size={13}/>Delivery: Dubai · Abu Dhabi · Sharjah</span>
              <span style={{ display:"flex", alignItems:"center", gap: 8 }}><Icon name="user" size={13}/>Min age 21+ · IDP for tourists</span>
            </div>
          </div>

          <div style={{ marginTop: 24, padding: 20, border:"1px dashed var(--border)", borderRadius: 8, display:"flex", gap: 14, alignItems:"flex-start", fontSize: 12, color:"var(--muted)", lineHeight: 1.5 }}>
            <Icon name="award" size={16}/>
            <span><strong style={{ color:"var(--text)" }}>Demo snapshot.</strong> Vehicle imagery is live-rail stock. Final price, year and plate are confirmed by the fleet feed at booking — no fabrication.</span>
          </div>
        </aside>
      </div>

      {/* Similar */}
      <section style={{ padding:"80px 0", borderTop:"1px solid var(--border)", background:"var(--surface)" }}>
        <div className="container" style={{ padding:"0 32px" }}>
          <SectionHead kicker="You might also like" title={`More ${v.category} options`}/>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 18 }}>
            {similar.map(s => <VehicleCard key={s.id} v={s} onSelect={(x) => { window.scrollTo(0, 0); window.openVehicle(x); }}/>)}
          </div>
        </div>
      </section>
    </div>
  );
}
window.VehicleDetail = VehicleDetail;

// ─── Booking Drawer ─────────────────────────────────────────────────────
function BookingDrawer({ vehicle, open, onClose }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    pickup:"", dropoff:"",
    location:"DXB Airport", customLocation:"",
    driverStatus:"tourist",
    name:"", phone:"", email:"", notes:""
  });
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (open) {
      const today = new Date(); const t3 = new Date(); t3.setDate(today.getDate()+3);
      setForm(f => ({ ...f, pickup: today.toISOString().slice(0,10), dropoff: t3.toISOString().slice(0,10) }));
      setStep(1); setSubmitted(false);
    }
  }, [open]);

  const days = useMemo(() => {
    if (!form.pickup || !form.dropoff) return 0;
    const ms = new Date(form.dropoff) - new Date(form.pickup);
    return Math.max(1, Math.ceil(ms / (1000*60*60*24)));
  }, [form.pickup, form.dropoff]);

  if (!open || !vehicle) return null;
  const total = vehicle.price ? vehicle.price * days : null;

  const update = (k) => (e) => setForm({ ...form, [k]: e.target?.value ?? e });

  return (
    <>
      <div onClick={onClose} style={{ position:"fixed", inset: 0, background:"rgba(0,0,0,0.6)", backdropFilter:"blur(4px)", zIndex: 90, animation:"fade .2s ease" }}/>
      <div style={{ position:"fixed", top: 0, right: 0, bottom: 0, width:"min(560px, 95vw)", background:"var(--surface)", borderLeft:"1px solid var(--border)", zIndex: 91, overflowY:"auto", animation:"slideIn .25s ease" }}>
        {/* Drawer header */}
        <div style={{ position:"sticky", top: 0, zIndex: 5, background:"var(--surface)", padding:"20px 28px", borderBottom:"1px solid var(--border)", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2, textTransform:"uppercase" }}>Booking enquiry · Step {submitted ? "✓" : step} / 3</div>
            <div style={{ marginTop: 4, fontFamily:"var(--font-display)", fontSize: 20, fontWeight: 600 }}>{vehicle.make} {vehicle.model}</div>
          </div>
          <button onClick={onClose} style={{ width: 40, height: 40, borderRadius: 20, background:"var(--bg)", border:"1px solid var(--border)", color:"var(--text)", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center" }}><Icon name="close" size={16}/></button>
        </div>

        {/* Progress */}
        {!submitted && (
          <div style={{ display:"flex", padding:"0 28px", marginTop: 20, gap: 4 }}>
            {[1,2,3].map(n => (
              <div key={n} style={{ flex: 1, height: 3, background: n <= step ? "var(--primary)" : "var(--border)", borderRadius: 2, transition:"background .25s ease" }}/>
            ))}
          </div>
        )}

        {/* Body */}
        <div style={{ padding:"28px" }}>
          {submitted ? (
            <SuccessBlock vehicle={vehicle} form={form} days={days} total={total} onClose={onClose}/>
          ) : step === 1 ? (
            <Step1 form={form} update={update} days={days} total={total} vehicle={vehicle}/>
          ) : step === 2 ? (
            <Step2 form={form} update={update}/>
          ) : (
            <Step3 form={form} update={update} vehicle={vehicle} days={days} total={total}/>
          )}
        </div>

        {/* Footer actions */}
        {!submitted && (
          <div style={{ position:"sticky", bottom: 0, padding:"20px 28px", borderTop:"1px solid var(--border)", background:"var(--surface)", display:"flex", gap: 10, justifyContent: step > 1 ? "space-between" : "flex-end" }}>
            {step > 1 && <Btn variant="ghost" icon="arrowDl" onClick={() => setStep(step-1)}>Back</Btn>}
            {step < 3 ? (
              <Btn variant="primary" iconRight="arrow" onClick={() => setStep(step+1)}>Continue</Btn>
            ) : (
              <Btn variant="primary" iconRight="check" onClick={() => setSubmitted(true)}>Send enquiry</Btn>
            )}
          </div>
        )}
      </div>
    </>
  );
}
window.BookingDrawer = BookingDrawer;

// Booking sub-steps ───────────────────────────────────────────────────────
function FieldShell({ label, icon, children, sub }) {
  return (
    <label style={{ display:"flex", flexDirection:"column", gap: 8 }}>
      <span style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", display:"flex", alignItems:"center", gap: 6 }}>
        {icon && <Icon name={icon} size={12}/>} {label}
      </span>
      {children}
      {sub && <span style={{ fontSize: 11, color:"var(--muted)", marginTop: 2 }}>{sub}</span>}
    </label>
  );
}

const inputCss = { background:"var(--bg)", border:"1px solid var(--border)", color:"var(--text)", padding:"12px 14px", borderRadius: 4, fontSize: 14, fontFamily:"inherit", outline:"none", width:"100%", colorScheme:"dark" };

function Step1({ form, update, days, total, vehicle }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap: 22 }}>
      <h3 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing:-0.4 }}>When & where</h3>
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 14 }}>
        <FieldShell label="Pickup date" icon="cal">
          <input type="date" value={form.pickup} onChange={update("pickup")} style={inputCss}/>
        </FieldShell>
        <FieldShell label="Drop-off date" icon="cal">
          <input type="date" value={form.dropoff} onChange={update("dropoff")} style={inputCss}/>
        </FieldShell>
      </div>
      <FieldShell label="Delivery location" icon="pin" sub="We deliver across Dubai, Abu Dhabi & Sharjah, 24/7. No extra fee inside Dubai.">
        <select value={form.location} onChange={update("location")} style={{ ...inputCss, cursor:"pointer" }}>
          {["DXB Airport","DWC Airport","Burj Al Arab","Atlantis The Palm","Address Downtown","Five Palm","Al Quoz Garage (self-pickup)","Other Dubai address","Abu Dhabi address","Sharjah address"].map(l => <option key={l} value={l} style={{background:"#16181D"}}>{l}</option>)}
        </select>
      </FieldShell>
      {form.location.startsWith("Other") && (
        <FieldShell label="Address detail" icon="pin">
          <input value={form.customLocation} onChange={update("customLocation")} placeholder="Hotel, building, street…" style={inputCss}/>
        </FieldShell>
      )}

      <SummaryBlock vehicle={vehicle} days={days} total={total} form={form}/>
    </div>
  );
}

function Step2({ form, update }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap: 22 }}>
      <h3 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing:-0.4 }}>Driver status</h3>
      <p style={{ margin:"-8px 0 0", color:"var(--muted)", fontSize: 13, lineHeight: 1.5 }}>So we can pre-fill the rental contract with the right documents.</p>
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 12 }}>
        {[
          { id:"tourist", label:"Tourist", body:"Passport + visa + IDP + home licence" },
          { id:"resident", label:"UAE Resident", body:"Emirates ID + UAE driving licence" }
        ].map(opt => {
          const active = form.driverStatus === opt.id;
          return (
            <button key={opt.id} onClick={() => update("driverStatus")(opt.id)} style={{
              textAlign:"left", padding: 20, borderRadius: 6, cursor:"pointer",
              background: active ? "rgba(225,108,42,0.08)" : "var(--bg)",
              border: `1px solid ${active ? "var(--primary)" : "var(--border)"}`,
              color:"var(--text)"
            }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 8 }}>
                <span style={{ fontFamily:"var(--font-display)", fontSize: 18, fontWeight: 600 }}>{opt.label}</span>
                <span style={{ width: 18, height: 18, borderRadius: 9, border:"2px solid", borderColor: active ? "var(--primary)" : "var(--muted)", background: active ? "var(--primary)" : "transparent" }}/>
              </div>
              <p style={{ margin: 0, color:"var(--muted)", fontSize: 12, lineHeight: 1.5 }}>{opt.body}</p>
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 8 }}>
        <span style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", marginBottom: 10, display:"block" }}>Add-ons (optional)</span>
        <div style={{ display:"flex", flexDirection:"column", gap: 10 }}>
          {[
            { id:"chauffeur", label:"Chauffeur service", body:"Add a uniformed driver, English / Arabic / Russian." },
            { id:"insurance", label:"Premium insurance top-up", body:"Reduce excess to zero. From AED 75/day." },
            { id:"airport", label:"Meet & greet at airport", body:"We'll be at arrivals with your name on a plaque." }
          ].map(a => (
            <label key={a.id} style={{ padding: 14, background:"var(--bg)", border:"1px solid var(--border)", borderRadius: 6, display:"flex", gap: 14, alignItems:"flex-start", cursor:"pointer" }}>
              <input type="checkbox" style={{ marginTop: 3, accentColor:"var(--primary)" }}/>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{a.label}</div>
                <div style={{ fontSize: 12, color:"var(--muted)", marginTop: 2 }}>{a.body}</div>
              </div>
            </label>
          ))}
        </div>
      </div>
    </div>
  );
}

function Step3({ form, update, vehicle, days, total }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap: 22 }}>
      <h3 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing:-0.4 }}>Your details</h3>
      <p style={{ margin:"-8px 0 0", color:"var(--muted)", fontSize: 13, lineHeight: 1.5 }}>We'll confirm by WhatsApp in ~5 min. No card on file. No deposit.</p>
      <FieldShell label="Full name" icon="user"><input value={form.name} onChange={update("name")} placeholder="Yusuf Al-Rashid" style={inputCss}/></FieldShell>
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1.4fr", gap: 14 }}>
        <FieldShell label="Country code"><input defaultValue="+971" style={inputCss}/></FieldShell>
        <FieldShell label="WhatsApp / Mobile" icon="whatsapp"><input value={form.phone} onChange={update("phone")} placeholder="50 123 4567" style={inputCss}/></FieldShell>
      </div>
      <FieldShell label="Email (optional)"><input type="email" value={form.email} onChange={update("email")} placeholder="you@hotel.com" style={inputCss}/></FieldShell>
      <FieldShell label="Anything else?" sub="Drop-off times, child seats, fuel level on arrival…">
        <textarea value={form.notes} onChange={update("notes")} rows={3} placeholder="Optional notes" style={{ ...inputCss, resize:"vertical", fontFamily:"inherit" }}/>
      </FieldShell>
      <SummaryBlock vehicle={vehicle} days={days} total={total} form={form}/>
      <div style={{ display:"flex", gap: 10, fontSize: 12, color:"var(--muted)", lineHeight: 1.5, padding: 14, background:"var(--bg)", border:"1px dashed var(--border)", borderRadius: 6 }}>
        <Icon name="shield" size={16}/>
        <span>By sending this enquiry you accept Octane.Rent's terms and our use of WhatsApp / email to confirm. No payment is taken — confirmation only.</span>
      </div>
    </div>
  );
}

function SummaryBlock({ vehicle, days, total, form }) {
  return (
    <div style={{ padding:"18px 20px", border:"1px solid var(--border)", borderRadius: 8, background:"var(--bg)" }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 14 }}>
        <span style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 2, textTransform:"uppercase" }}>Quote summary</span>
        <Chip tone="primary" size="sm" icon="check">No deposit</Chip>
      </div>
      <div style={{ display:"flex", justifyContent:"space-between", padding:"8px 0", fontSize: 13 }}>
        <span style={{ color:"var(--muted)" }}>{vehicle.make} {vehicle.model}</span>
        <span style={{ fontVariantNumeric:"tabular-nums" }}>{vehicle.price ? `AED ${vehicle.price.toLocaleString()} × ${days}` : "On request"}</span>
      </div>
      <div style={{ display:"flex", justifyContent:"space-between", padding:"8px 0", fontSize: 13, borderBottom:"1px solid var(--border)" }}>
        <span style={{ color:"var(--muted)" }}>Insurance · delivery · 250 km/day × {days}</span>
        <span style={{ color:"var(--primary)", fontWeight: 600 }}>Included</span>
      </div>
      <div style={{ display:"flex", justifyContent:"space-between", padding:"14px 0 0", fontSize: 15, alignItems:"baseline" }}>
        <span style={{ fontFamily:"var(--font-display)", fontWeight: 600, fontSize: 16, letterSpacing: 0.3 }}>Estimated total</span>
        <span style={{ fontFamily:"var(--font-display)", fontWeight: 700, fontSize: 28, color:"var(--primary)", letterSpacing:-0.5, fontVariantNumeric:"tabular-nums" }}>
          {total ? `AED ${total.toLocaleString()}` : "On request"}
        </span>
      </div>
    </div>
  );
}

function SuccessBlock({ vehicle, form, days, total, onClose }) {
  return (
    <div style={{ padding:"8px 0 24px", textAlign:"center" }}>
      <div style={{ width: 80, height: 80, borderRadius: 40, background:"rgba(225,108,42,0.12)", color:"var(--primary)", display:"inline-flex", alignItems:"center", justifyContent:"center", margin:"24px auto" }}>
        <Icon name="check" size={36} stroke={2}/>
      </div>
      <h3 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing:-0.6 }}>Enquiry sent.</h3>
      <p style={{ marginTop: 12, color:"var(--muted)", fontSize: 14, lineHeight: 1.6, maxWidth: 400, marginInline:"auto" }}>
        We've got your request for the <strong style={{ color:"var(--text)" }}>{vehicle.make} {vehicle.model}</strong>. A real human will WhatsApp you within 5 minutes to confirm and arrange delivery.
      </p>
      <div style={{ marginTop: 24, padding: 20, background:"var(--bg)", border:"1px solid var(--border)", borderRadius: 8, textAlign:"left" }}>
        <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 2, textTransform:"uppercase", marginBottom: 10 }}>What happens next</div>
        <ol style={{ margin: 0, paddingLeft: 20, fontSize: 13, color:"var(--text)", lineHeight: 1.8 }}>
          <li>WhatsApp confirmation with quote, delivery time and contract.</li>
          <li>You reply ✅. We'll be at <strong>{form.location}</strong> on <strong>{form.pickup}</strong>.</li>
          <li>Hand over docs, drive away. Pay on delivery — cash or card.</li>
        </ol>
      </div>
      <div style={{ marginTop: 24, display:"flex", gap: 10, justifyContent:"center" }}>
        <Btn variant="whatsapp" icon="whatsapp" href="https://wa.me/971527269337">Continue on WhatsApp</Btn>
        <Btn variant="ghost" onClick={onClose}>Close</Btn>
      </div>
    </div>
  );
}

// ─── About + Contact + How pages (lightweight) ──────────────────────────
function ContactPage() {
  return (
    <div style={{ background:"var(--bg)", padding:"56px 0 96px" }}>
      <div className="container" style={{ padding:"0 32px" }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 12 }}>Get in touch · 24 / 7</div>
          <h1 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize:"clamp(40px, 6vw, 80px)", fontWeight: 600, letterSpacing:-1.5, lineHeight: 1 }}>
            We're always <span style={{ color:"var(--primary)", fontStyle:"italic" }}>open.</span>
          </h1>
        </div>

        <div style={{ display:"grid", gridTemplateColumns:"1.2fr 1fr", gap: 40 }}>
          <div style={{ display:"flex", flexDirection:"column", gap: 16 }}>
            {[
              { icon:"whatsapp", title:"WhatsApp", value:"+971 52 726 9337", sub:"Fastest path. Replies in ~5 min.", href:"https://wa.me/971527269337" },
              { icon:"phone",    title:"Customer service", value:"+971 4 253 6700", sub:"Real human on the other end, 24/7.", href:"tel:+97142536700" },
              { icon:"phone",    title:"Corporate / fleet", value:"+971 4 253 6707", sub:"Long-term, monthly, commercial enquiries.", href:"tel:+97142536707" },
              { icon:"pin",      title:"Al Quoz Garage", value:"Al Quoz Industrial Area 3, 22nd St, Warehouse 3", sub:"Self-pickup or delivery hub. Open 24/7.", href:"https://www.google.com/maps/search/?api=1&query=25.129948,55.230154" }
            ].map(c => (
              <a key={c.title} href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noopener"
                style={{ display:"flex", gap: 18, padding: 24, background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 8, textDecoration:"none", color:"var(--text)", alignItems:"flex-start" }}>
                <span style={{ width: 44, height: 44, borderRadius: 22, background:"rgba(225,108,42,0.12)", color:"var(--primary)", display:"inline-flex", alignItems:"center", justifyContent:"center", flexShrink: 0 }}><Icon name={c.icon} size={20}/></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase" }}>{c.title}</div>
                  <div style={{ marginTop: 4, fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600 }}>{c.value}</div>
                  <div style={{ marginTop: 6, color:"var(--muted)", fontSize: 13 }}>{c.sub}</div>
                </div>
                <Icon name="ext" size={16}/>
              </a>
            ))}
            <div style={{ padding: 24, background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 8 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", marginBottom: 10 }}>Delivery coverage</div>
              <div style={{ display:"flex", gap: 8, flexWrap:"wrap" }}>
                <Chip tone="solid">Dubai</Chip>
                <Chip>Abu Dhabi</Chip>
                <Chip>Sharjah</Chip>
              </div>
              <p style={{ marginTop: 12, fontSize: 12, color:"var(--muted)", lineHeight: 1.5 }}>Abu Dhabi & Sharjah served by delivery from Dubai. Free inside Dubai; small fee elsewhere — flagged on quote.</p>
            </div>
          </div>

          {/* Map */}
          <div style={{ position:"relative", borderRadius: 8, overflow:"hidden", border:"1px solid var(--border)", minHeight: 600, background:"linear-gradient(135deg, #16181D 0%, #0E0F12 100%)" }}>
            <div style={{ position:"absolute", inset: 0, backgroundImage:`
              repeating-linear-gradient(0deg, transparent 0 39px, rgba(225,108,42,0.06) 39px 40px),
              repeating-linear-gradient(90deg, transparent 0 39px, rgba(225,108,42,0.06) 39px 40px)`}}/>
            {/* Roads */}
            <svg style={{ position:"absolute", inset: 0, width:"100%", height:"100%" }} viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice">
              <path d="M-50 200 L 650 280" stroke="#2A2E35" strokeWidth="38" fill="none"/>
              <path d="M-50 200 L 650 280" stroke="#16181D" strokeWidth="34" fill="none"/>
              <path d="M250 -50 L 320 850" stroke="#2A2E35" strokeWidth="28" fill="none"/>
              <path d="M250 -50 L 320 850" stroke="#16181D" strokeWidth="24" fill="none"/>
              <path d="M-50 550 L 650 600" stroke="#2A2E35" strokeWidth="20" fill="none"/>
              <path d="M-50 550 L 650 600" stroke="#16181D" strokeWidth="16" fill="none"/>
              <path d="M100 100 L 500 700" stroke="#2A2E35" strokeWidth="14" fill="none" strokeDasharray="4 6"/>
              {/* Pin */}
              <g transform="translate(290 390)">
                <circle r="60" fill="rgba(225,108,42,0.15)"/>
                <circle r="32" fill="rgba(225,108,42,0.3)"/>
                <circle r="12" fill="#E16C2A"/>
                <circle r="4" fill="#0E0F12"/>
              </g>
            </svg>
            <div style={{ position:"absolute", bottom: 20, left: 20, right: 20, padding: 18, background:"rgba(14,15,18,0.92)", border:"1px solid var(--border)", borderRadius: 6, backdropFilter:"blur(10px)" }}>
              <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2, textTransform:"uppercase", marginBottom: 6 }}>Al Quoz Industrial Area 3</div>
              <div style={{ fontFamily:"var(--font-display)", fontSize: 18, fontWeight: 600 }}>22nd Street, Warehouse 3, Dubai</div>
              <div style={{ marginTop: 6, fontSize: 12, color:"var(--muted)", fontVariantNumeric:"tabular-nums" }}>25.129948° N · 55.230154° E</div>
            </div>
            <div style={{ position:"absolute", top: 16, left: 16, padding:"6px 12px", background:"rgba(14,15,18,0.9)", border:"1px solid var(--border)", borderRadius: 4, fontSize: 11, fontWeight: 600, color:"var(--muted)", letterSpacing: 1, textTransform:"uppercase" }}>Garage map · Schematic</div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.ContactPage = ContactPage;

// How it works detail page
function HowPage() {
  return (
    <div style={{ background:"var(--bg)" }}>
      <header style={{ padding:"72px 0", borderBottom:"1px solid var(--border)" }}>
        <div className="container" style={{ padding:"0 32px", maxWidth: 920 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 14 }}>How it works</div>
          <h1 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize:"clamp(40px, 6vw, 80px)", fontWeight: 600, letterSpacing:-1.5, lineHeight: 1 }}>
            From browser to <span style={{ color:"var(--primary)", fontStyle:"italic" }}>behind the wheel.</span>
          </h1>
          <p style={{ marginTop: 20, color:"var(--muted)", fontSize: 17, lineHeight: 1.6, maxWidth: 640 }}>The whole thing takes about five minutes. No deposit, no card hold, no SaaS-looking forms.</p>
        </div>
      </header>

      <section style={{ padding:"80px 0", borderBottom:"1px solid var(--border)" }}>
        <div className="container" style={{ padding:"0 32px" }}>
          <SectionHead kicker="What's included" title="All-in. Every time."/>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 16 }}>
            {[
              { icon:"car", title:"The car", body:"Fresh from the fleet, full tank or fuel-equivalent on handover." },
              { icon:"shield", title:"Basic insurance", body:"Comprehensive third-party + own damage. Top-up available." },
              { icon:"pin", title:"24/7 delivery", body:"Hotel, airport, residence — anywhere in Dubai. No fee." },
              { icon:"bolt", title:"250 km / day", body:"Mileage included. Extra km AED 2 — no rounding tricks." }
            ].map(i => (
              <div key={i.title} style={{ padding: 24, border:"1px solid var(--border)", borderRadius: 8, background:"var(--surface)" }}>
                <Icon name={i.icon} size={28}/>
                <h3 style={{ margin:"16px 0 8px", fontFamily:"var(--font-display)", fontSize: 20, fontWeight: 600 }}>{i.title}</h3>
                <p style={{ margin: 0, color:"var(--muted)", fontSize: 13, lineHeight: 1.5 }}>{i.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding:"80px 0" }}>
        <div className="container" style={{ padding:"0 32px", display:"grid", gridTemplateColumns:"1fr 1fr", gap: 56 }}>
          <div>
            <SectionHead kicker="Documents" title="What you'll need."/>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 14 }}>
              <div style={{ padding: 22, background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 8 }}>
                <Chip tone="primary" size="sm">Tourist</Chip>
                <ul style={{ marginTop: 16, paddingLeft: 18, color:"var(--text)", fontSize: 13, lineHeight: 1.8 }}>
                  <li>Passport</li>
                  <li>Visit / tourist visa</li>
                  <li>IDP (Int'l Driving Permit)</li>
                  <li>Home country driving licence</li>
                </ul>
              </div>
              <div style={{ padding: 22, background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 8 }}>
                <Chip tone="primary" size="sm">UAE Resident</Chip>
                <ul style={{ marginTop: 16, paddingLeft: 18, color:"var(--text)", fontSize: 13, lineHeight: 1.8 }}>
                  <li>Emirates ID</li>
                  <li>UAE driving licence</li>
                </ul>
              </div>
            </div>
            <div style={{ marginTop: 20, padding: 18, border:"1px dashed var(--border)", borderRadius: 6, fontSize: 13, color:"var(--muted)", lineHeight: 1.5 }}>
              <strong style={{ color:"var(--text)" }}>Min age 21+</strong> across the fleet. Some supercars require 25+ or 3 years' experience — we'll flag it on the quote.
            </div>
          </div>
          <div>
            <SectionHead kicker="FAQ" title="Common questions."/>
            <FAQ/>
          </div>
        </div>
      </section>
    </div>
  );
}
window.HowPage = HowPage;

function FAQ() {
  const items = [
    { q:"Is there really no deposit?", a:"Yes — no security deposit on any vehicle category, including supercars. You're still responsible for damages, traffic fines and fuel policy compliance, but we never place a hold on your card." },
    { q:"How fast is delivery?", a:"Inside Dubai we aim for under 60 minutes. Abu Dhabi and Sharjah typically within 2-3 hours. WhatsApp us for the current ETA — we're 24/7." },
    { q:"Can I extend the rental?", a:"Just message us. We'll quote a lower daily rate for any extension and update the contract — no fresh handover needed." },
    { q:"What if the car breaks down?", a:"Replacement vehicle within two hours, anywhere in Dubai. (Marketing SLA — pending client sign-off.)" },
    { q:"Do you take card on delivery?", a:"Yes — Visa, Mastercard, Amex, or cash. We don't authorise the card or place a hold." }
  ];
  const [open, setOpen] = useState(0);
  return (
    <div style={{ display:"flex", flexDirection:"column", gap: 0, border:"1px solid var(--border)", borderRadius: 8, overflow:"hidden" }}>
      {items.map((it, i) => (
        <div key={i} style={{ borderBottom: i < items.length-1 ? "1px solid var(--border)" : "none", background: open === i ? "var(--surface)" : "transparent" }}>
          <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width:"100%", padding:"18px 22px", background:"transparent", border:"none", color:"var(--text)", fontSize: 15, fontWeight: 500, textAlign:"left", display:"flex", justifyContent:"space-between", alignItems:"center", cursor:"pointer", fontFamily:"inherit" }}>
            {it.q}
            <Icon name={open === i ? "minus" : "plus"} size={16}/>
          </button>
          {open === i && <div style={{ padding:"0 22px 20px", color:"var(--muted)", fontSize: 14, lineHeight: 1.6 }}>{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

// About page
function AboutPage() {
  return (
    <div style={{ background:"var(--bg)" }}>
      <section style={{ position:"relative", minHeight: 560, overflow:"hidden", background:"#000" }}>
        <img src="media/car-mercedes-g63-amg.webp" alt="" style={{ position:"absolute", inset: 0, width:"100%", height:"100%", objectFit:"cover", opacity: 0.55 }}/>
        <div style={{ position:"absolute", inset: 0, background:"linear-gradient(180deg, rgba(14,15,18,0.5) 0%, rgba(14,15,18,0.95) 100%)" }}/>
        <div className="container" style={{ position:"relative", padding:"160px 32px 80px", maxWidth: 1000 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 14 }}>About Octane.Rent</div>
          <h1 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize:"clamp(48px, 8vw, 112px)", fontWeight: 600, letterSpacing:-2.5, lineHeight: 0.95 }}>
            Performance,<br/><span style={{ color:"var(--primary)", fontStyle:"italic" }}>delivered.</span>
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.6, color:"var(--text)", maxWidth: 640 }}>
            Octane.Rent is a Dubai-based no-deposit luxury, exotic and supercar rental operator with a 400+ vehicle fleet refreshed every six months, and 24/7 delivery across Dubai, Abu Dhabi and Sharjah.
          </p>
        </div>
      </section>

      <section style={{ padding:"96px 0", borderBottom:"1px solid var(--border)" }}>
        <div className="container" style={{ padding:"0 32px" }}>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 32 }}>
            {[
              { stat:"400+", label:"Vehicles in the fleet" },
              { stat:"24/7", label:"Delivery & support" },
              { stat:"3", label:"Emirates covered" },
              { stat:"0", label:"AED deposit, always" }
            ].map(s => (
              <div key={s.label} style={{ borderTop:"1px solid var(--primary)", paddingTop: 20 }}>
                <div style={{ fontFamily:"var(--font-display)", fontSize: 72, fontWeight: 600, color:"var(--text)", letterSpacing:-2.5, lineHeight: 0.9 }}>{s.stat}</div>
                <div style={{ marginTop: 12, fontSize: 13, color:"var(--muted)", letterSpacing: 1, textTransform:"uppercase", fontWeight: 600 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <AwardStrip/>

      <section style={{ padding:"96px 0" }}>
        <div className="container" style={{ padding:"0 32px", maxWidth: 760 }}>
          <SectionHead kicker="The honest bit" title="What we don't pretend."/>
          <div style={{ display:"flex", flexDirection:"column", gap: 18, color:"var(--text)", fontSize: 15, lineHeight: 1.7 }}>
            <p>We don't print a founding year. We don't have a single, consistent one — and our research turned up "7 years," "10 years," and "since 2021" depending on which page you read.</p>
            <p>We don't bake a star rating into the page. Trustpilot, Google and our own marketing list different numbers — somewhere between 4.8 and 4.9, from 1,100 to 1,600+ reviews. We'll plug a live widget here when it's wired.</p>
            <p>We don't fabricate prices. Daily rates change with season, demand and what's parked at Al Quoz that week. Every price you see is "from" or "on request" — the real quote arrives in WhatsApp inside five minutes.</p>
            <p style={{ color:"var(--primary)", fontFamily:"var(--font-display)", fontSize: 18, fontWeight: 600 }}>What we will tell you: no deposit, no hold, no surprises. Ever.</p>
          </div>
        </div>
      </section>
    </div>
  );
}
window.AboutPage = AboutPage;