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

// ─── Navbar ───────────────────────────────────────────────────────────────
function Navbar({ locale, setLocale, route }) {
  const items = [
    { id:"fleet", label:"Fleet" },
    { id:"categories", label:"Categories" },
    { id:"longterm", label:"Long-Term" },
    { id:"corporate", label:"Corporate" },
    { id:"how", label:"How it works" },
    { id:"about", label:"About" },
    { id:"contact", label:"Contact" }
  ];
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position:"sticky", top:0, zIndex:50,
      background: scrolled ? "rgba(14,15,18,0.92)" : "rgba(14,15,18,0.55)",
      backdropFilter:"blur(14px)", WebkitBackdropFilter:"blur(14px)",
      borderBottom:`1px solid ${scrolled ? "var(--border)" : "transparent"}`,
      transition:"background .2s ease, border-color .2s ease"
    }}>
      <div className="container" style={{ display:"flex", alignItems:"center", justifyContent:"space-between", gap: 24, padding:"18px 32px" }}>
        <Logo height={24}/>
        <div style={{ display:"flex", alignItems:"center", gap: 28 }} className="navlinks">
          {items.map(it => (
            <a key={it.id} href={`#/${it.id}`} onClick={(e) => { e.preventDefault(); window.go(it.id); }}
               style={{ color: route === it.id ? "var(--text)" : "var(--muted)", textDecoration:"none", fontSize: 13, fontWeight: 500, letterSpacing: 0.3, position:"relative", padding:"4px 0" }}>
              {it.label}
              {route === it.id && <span style={{ position:"absolute", left:0, right:0, bottom:-4, height: 2, background:"var(--primary)" }}/>}
            </a>
          ))}
        </div>
        <div style={{ display:"flex", alignItems:"center", gap: 12 }}>
          <LocaleToggle locale={locale} setLocale={setLocale}/>
          <Btn variant="ghost" icon="whatsapp" size="sm" href="https://wa.me/971527269337">WhatsApp</Btn>
          <Btn variant="primary" size="sm" iconRight="arrow" onClick={() => window.go("fleet")}>Book a car</Btn>
        </div>
      </div>
    </nav>
  );
}
window.Navbar = Navbar;

function LocaleToggle({ locale, setLocale }) {
  const [open, setOpen] = useState(false);
  const langs = [{id:"en", label:"EN"}, {id:"ar", label:"عربي"}, {id:"ru", label:"RU"}, {id:"zh", label:"中文"}];
  return (
    <div style={{ position:"relative" }}>
      <button onClick={() => setOpen(!open)} style={{ background:"transparent", border:"1px solid var(--border)", color:"var(--muted)", borderRadius: 4, padding:"6px 10px", fontSize: 12, fontWeight: 600, cursor:"pointer", display:"flex", alignItems:"center", gap: 6, letterSpacing: 0.5 }}>
        {langs.find(l => l.id === locale)?.label || "EN"} <Icon name="chevron" size={12}/>
      </button>
      {open && (
        <div onMouseLeave={() => setOpen(false)} style={{ position:"absolute", top:"calc(100% + 6px)", right:0, background:"var(--surface-2)", border:"1px solid var(--border)", borderRadius: 6, minWidth: 100, padding: 4, zIndex: 60 }}>
          {langs.map(l => (
            <button key={l.id} onClick={() => { setLocale(l.id); setOpen(false); }}
              style={{ display:"block", width:"100%", textAlign:"left", padding:"8px 10px", background: locale === l.id ? "rgba(225,108,42,0.1)" : "transparent", border:"none", color: locale === l.id ? "var(--primary)" : "var(--text)", fontSize: 12, fontWeight: 500, cursor:"pointer", borderRadius: 4 }}>
              {l.label}{locale === l.id && " ✓"}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────
function Hero({ locale, heroVariant = "ferrari" }) {
  const t = (window.STRINGS[locale] || window.STRINGS.en).hero;
  const cta = (window.STRINGS[locale] || window.STRINGS.en).cta;
  const heroSrc = ({
    huracan: "media/car-lamborghini-huracan.webp",
    bentley: "media/car-bentley-bentayga.webp",
    ferrari: "media/car-ferrari-f8.webp",
    cybertruck: "media/car-tesla-cybertruck.webp",
    audi: "media/car-audi-r8.webp"
  })[heroVariant] || "media/car-ferrari-f8.webp";
  return (
    <section style={{ position:"relative", minHeight:"min(90vh, 880px)", overflow:"hidden", background:"#000" }}>
      {/* Hero image */}
      <div style={{ position:"absolute", inset: 0 }}>
        <img src={heroSrc} alt="" data-hero-img
             style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center 60%", filter:"saturate(1.1) contrast(1.05)" }}/>
        <div style={{ position:"absolute", inset: 0, background:"linear-gradient(180deg, rgba(14,15,18,0.7) 0%, rgba(14,15,18,0.4) 40%, rgba(14,15,18,0.95) 100%)" }}/>
        {/* diagonal accent stripe */}
        <div style={{ position:"absolute", top: 0, bottom: 0, right: 0, width: 6, background:"var(--primary)" }}/>
      </div>

      {/* Content */}
      <div className="container" style={{ position:"relative", zIndex: 2, padding:"120px 32px 80px", display:"flex", flexDirection:"column", justifyContent:"space-between", minHeight:"min(90vh, 880px)" }}>
        <div style={{ display:"flex", alignItems:"center", gap: 12, color:"var(--accent)", fontSize: 12, fontWeight: 700, letterSpacing: 2.5, textTransform:"uppercase" }}>
          <Icon name="award" size={16}/> {t.kicker}
        </div>

        <div style={{ maxWidth: 920 }}>
          <h1 style={{ margin: 0, fontFamily:"var(--font-display)", fontWeight: 600, fontSize:"clamp(56px, 11vw, 168px)", lineHeight: 0.92, letterSpacing:-3.5, color:"var(--text)" }}>
            {t.h1a}<br/>
            <span style={{ color:"var(--primary)", fontStyle:"italic", fontWeight: 500 }}>{t.h1b}</span>
          </h1>
          <p style={{ marginTop: 28, maxWidth: 560, color:"var(--muted)", fontSize: 17, lineHeight: 1.55 }}>{t.sub}</p>

          <div style={{ marginTop: 36, display:"flex", gap: 12, flexWrap:"wrap" }}>
            <Btn size="lg" iconRight="arrow" onClick={() => window.go("fleet")}>{cta.browse}</Btn>
            <Btn size="lg" variant="ghost" icon="whatsapp" href="https://wa.me/971527269337">{cta.whatsapp}</Btn>
          </div>
        </div>

        {/* Quick-search dock */}
        <div style={{ marginTop: 60 }}>
          <QuickSearchDock/>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;

function QuickSearchDock() {
  const today = new Date();
  const tomorrow = new Date(); tomorrow.setDate(today.getDate()+3);
  const fmt = (d) => d.toISOString().slice(0,10);
  const [pickup, setPickup] = useState(fmt(today));
  const [dropoff, setDropoff] = useState(fmt(tomorrow));
  const [location, setLocation] = useState("DXB Airport");
  const [category, setCategory] = useState("any");

  const fields = [
    { label:"Delivery", icon:"pin", value: location, options:["DXB Airport","Burj Al Arab","Atlantis The Palm","Address Downtown","Al Quoz Garage","Other Dubai address","Abu Dhabi","Sharjah"], onChange: setLocation },
    { label:"Pick-up date", icon:"cal", type:"date", value: pickup, onChange: setPickup },
    { label:"Drop-off date", icon:"cal", type:"date", value: dropoff, onChange: setDropoff },
    { label:"Category", icon:"car", value: category, options:[["any","Any category"],["supercar","Supercar"],["luxury","Luxury"],["sports","Sports"],["suv","SUV"],["electric","Electric"]], onChange: setCategory }
  ];

  return (
    <div style={{ background:"rgba(22,24,29,0.72)", border:"1px solid var(--border)", backdropFilter:"blur(20px)", WebkitBackdropFilter:"blur(20px)", borderRadius: 8, padding: 6, display:"grid", gridTemplateColumns:"repeat(4, 1fr) auto", gap: 6, alignItems:"stretch" }}>
      {fields.map((f, i) => (
        <div key={i} style={{ padding:"14px 18px", borderRight: i < 3 ? "1px solid var(--border)" : "none", display:"flex", flexDirection:"column", gap: 4, minWidth: 0 }}>
          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.5, textTransform:"uppercase", color:"var(--muted)", display:"flex", alignItems:"center", gap: 5 }}>
            <Icon name={f.icon} size={11}/> {f.label}
          </span>
          {f.type === "date" ? (
            <input type="date" value={f.value} onChange={(e) => f.onChange(e.target.value)}
              style={{ background:"transparent", border:"none", color:"var(--text)", fontFamily:"var(--font-display)", fontSize: 15, fontWeight: 500, padding: 0, outline:"none", colorScheme:"dark" }}/>
          ) : Array.isArray(f.options) ? (
            <select value={f.value} onChange={(e) => f.onChange(e.target.value)}
              style={{ background:"transparent", border:"none", color:"var(--text)", fontFamily:"var(--font-display)", fontSize: 15, fontWeight: 500, padding: 0, outline:"none", appearance:"none", cursor:"pointer" }}>
              {f.options.map(o => Array.isArray(o) ? <option key={o[0]} value={o[0]} style={{background:"#16181D"}}>{o[1]}</option> : <option key={o} value={o} style={{background:"#16181D"}}>{o}</option>)}
            </select>
          ) : null}
        </div>
      ))}
      <Btn size="lg" icon="search" onClick={() => window.go("fleet")}>Search Fleet</Btn>
    </div>
  );
}

// ─── Marquee / brands ────────────────────────────────────────────────────
function BrandStrip() {
  const brands = ["Rolls-Royce","Bentley","Ferrari","Lamborghini","Porsche","Mercedes-AMG","BMW M","Audi","Range Rover","Cadillac","Tesla","Aston Martin","McLaren","Maserati","Brabus"];
  return (
    <section style={{ borderTop:"1px solid var(--border)", borderBottom:"1px solid var(--border)", background:"var(--bg)", overflow:"hidden", padding:"24px 0" }}>
      <div style={{ display:"flex", gap: 56, animation:"marquee 60s linear infinite", whiteSpace:"nowrap", fontFamily:"var(--font-display)", fontWeight: 600, fontSize: 18, color:"var(--muted)", letterSpacing: 2, textTransform:"uppercase" }}>
        {[...brands, ...brands, ...brands].map((b,i) => (
          <span key={i} style={{ display:"inline-flex", alignItems:"center", gap: 56 }}>
            {b} <span style={{ width: 6, height: 6, borderRadius: 3, background:"var(--primary)", display:"inline-block" }}/>
          </span>
        ))}
      </div>
    </section>
  );
}
window.BrandStrip = BrandStrip;

// ─── No Deposit band ─────────────────────────────────────────────────────
function NoDepositBand({ locale }) {
  const t = (window.STRINGS[locale] || window.STRINGS.en).nodep;
  const items = [
    { kicker:"01", title:"Car", body:"Hand-picked from a 400+ fleet, freshly detailed before every handover." },
    { kicker:"02", title:"Insurance", body:"Basic insurance included by default. Top-up cover available on request." },
    { kicker:"03", title:"Delivery", body:"To your hotel, airport, residence — anywhere in Dubai, 24/7." },
    { kicker:"04", title:"250 km / day", body:"Generous mileage built into the price. Extra km AED 2 — no surprises." }
  ];
  return (
    <section style={{ background:"var(--bg)", padding:"96px 0", borderBottom:"1px solid var(--border)" }}>
      <div className="container" style={{ padding:"0 32px" }}>
        <SectionHead kicker="The Octane USP" title={t.title} sub={t.body}/>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 0, border:"1px solid var(--border)", borderRadius: 8, overflow:"hidden" }}>
          {items.map((it, i) => (
            <div key={i} style={{ padding: 32, borderRight: i < 3 ? "1px solid var(--border)" : "none", background:"var(--surface)" }}>
              <div style={{ fontFamily:"var(--font-display)", fontSize: 48, color:"var(--primary)", fontWeight: 500, letterSpacing:-1, lineHeight: 1 }}>{it.kicker}</div>
              <h3 style={{ margin:"20px 0 10px", fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600 }}>{it.title}</h3>
              <p style={{ margin: 0, color:"var(--muted)", fontSize: 14, lineHeight: 1.55 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.NoDepositBand = NoDepositBand;

// ─── Featured Fleet ──────────────────────────────────────────────────────
function FeaturedFleet({ onSelect }) {
  const featured = window.FLEET.filter(v => v.featured).slice(0, 8);
  return (
    <section style={{ padding:"96px 0", background:"var(--bg)" }}>
      <div className="container" style={{ padding:"0 32px" }}>
        <SectionHead
          kicker="Hand-picked"
          title="The headliners"
          sub="A taste of what's parked at Al Quoz right now. Browse 400+ across every category — economy to hypercar."
          action={<Btn variant="outline" iconRight="arrow" onClick={() => window.go("fleet")}>See full fleet</Btn>}
        />
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 18 }}>
          {featured.map(v => <VehicleCard key={v.id} v={v} onSelect={onSelect}/>)}
        </div>
      </div>
    </section>
  );
}
window.FeaturedFleet = FeaturedFleet;

// ─── Categories block ────────────────────────────────────────────────────
function CategoriesBlock({ onPick }) {
  const cats = [
    { id:"supercar", label:"Supercar", img:"media/car-ferrari-f8.webp", count:"40+" },
    { id:"luxury",   label:"Luxury",   img:"media/car-rolls-royce-cullinan.webp", count:"120+" },
    { id:"sports",   label:"Sports",   img:"media/car-porsche-911.webp", count:"60+" },
    { id:"suv",      label:"SUV",      img:"media/car-mercedes-g63-amg.webp", count:"90+" },
    { id:"electric", label:"Electric", img:"media/car-tesla-cybertruck.webp", count:"15+" },
    { id:"convertible", label:"Convertible", img:"media/car-bentley-continental.webp", count:"35+" }
  ];
  return (
    <section style={{ padding:"96px 0", background:"var(--bg)", borderTop:"1px solid var(--border)" }}>
      <div className="container" style={{ padding:"0 32px" }}>
        <SectionHead kicker="By category" title="Pick your weapon" sub="From off-road wranglers to hypercar drop-tops, the fleet refreshes every six months."/>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr) ", gap: 18 }}>
          {cats.map((c, i) => (
            <button key={c.id} onClick={() => onPick(c.id)} className="cat-card"
              style={{
                position:"relative", aspectRatio:"4/3", borderRadius: 8, overflow:"hidden", border:"1px solid var(--border)",
                background:"#000", cursor:"pointer", padding: 0,
                gridColumn: i === 0 ? "span 2" : "span 1",
                gridRow: i === 0 ? "span 2" : "auto"
              }}>
              <img src={c.img} alt="" style={{ position:"absolute", inset: 0, width:"100%", height:"100%", objectFit:"cover" }}/>
              <div style={{ position:"absolute", inset: 0, background:"linear-gradient(180deg, transparent 30%, rgba(14,15,18,0.92) 100%)" }}/>
              <div style={{ position:"absolute", left: 24, right: 24, bottom: 24, textAlign:"left", display:"flex", justifyContent:"space-between", alignItems:"flex-end" }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700, color:"var(--accent)", letterSpacing: 2, textTransform:"uppercase", marginBottom: 6 }}>{c.count} vehicles</div>
                  <h3 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize: i === 0 ? 44 : 26, fontWeight: 600, letterSpacing:-0.5, color:"#fff" }}>{c.label}</h3>
                </div>
                <span style={{ width: 40, height: 40, borderRadius: 20, background:"var(--primary)", color:"#0E0F12", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name="arrowDl" size={18}/></span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CategoriesBlock = CategoriesBlock;

// ─── How it works ────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n:"01", title:"Choose your car", body:"Browse 400+ vehicles. Filter by category, brand, transmission or seats. Or talk to us on WhatsApp.", icon:"car" },
    { n:"02", title:"Book in minutes", body:"Send a quick enquiry — dates, delivery point, driver status. We confirm in five minutes.", icon:"cal" },
    { n:"03", title:"We deliver", body:"To your hotel, airport, residence or office. 24/7, across Dubai, Abu Dhabi & Sharjah.", icon:"pin" }
  ];
  return (
    <section style={{ padding:"96px 0", background:"var(--surface)", borderTop:"1px solid var(--border)", borderBottom:"1px solid var(--border)" }}>
      <div className="container" style={{ padding:"0 32px" }}>
        <SectionHead kicker="How it works" title="Three steps to ignition" align="center"/>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, position:"relative" }}>
          {/* dashed line */}
          <div style={{ position:"absolute", top: 38, left:"16%", right:"16%", height: 1, borderTop:"1px dashed var(--border)" }}/>
          {steps.map((s, i) => (
            <div key={s.n} style={{ textAlign:"center", padding:"0 32px", position:"relative" }}>
              <div style={{ width: 76, height: 76, borderRadius: 38, background:"var(--bg)", border:"1px solid var(--primary)", color:"var(--primary)", display:"inline-flex", alignItems:"center", justifyContent:"center", margin:"0 auto", position:"relative", zIndex: 1 }}>
                <Icon name={s.icon} size={28}/>
              </div>
              <div style={{ fontFamily:"var(--font-display)", fontSize: 12, fontWeight: 700, color:"var(--primary)", letterSpacing: 3, marginTop: 18 }}>STEP {s.n}</div>
              <h3 style={{ margin:"10px 0", fontFamily:"var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing:-0.4 }}>{s.title}</h3>
              <p style={{ margin: 0, color:"var(--muted)", fontSize: 14, lineHeight: 1.6, maxWidth: 320, marginInline:"auto" }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;

// ─── Award + Press ───────────────────────────────────────────────────────
function AwardStrip() {
  return (
    <section style={{ padding:"72px 0", background:"var(--bg)", borderBottom:"1px solid var(--border)" }}>
      <div className="container" style={{ padding:"0 32px", display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr", gap: 48, alignItems:"center" }}>
        <div>
          <div style={{ display:"inline-flex", alignItems:"center", gap: 10, color:"var(--primary)", fontSize: 11, fontWeight: 700, letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 14 }}>
            <Icon name="award" size={16}/> Issued by World Luxury Travel Awards
          </div>
          <h3 style={{ margin: 0, fontFamily:"var(--font-display)", fontSize: 32, fontWeight: 600, letterSpacing:-0.6, lineHeight: 1.1 }}>
            Best Luxury Car Rental,<br/>Middle East & North Africa <span style={{ color:"var(--primary)" }}>2025</span>
          </h3>
        </div>
        <div style={{ borderLeft:"1px solid var(--border)", paddingLeft: 32 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 2, textTransform:"uppercase", marginBottom: 12 }}>As featured in</div>
          <div style={{ fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600, marginBottom: 6 }}>Khaleej Times</div>
          <p style={{ margin: 0, color:"var(--muted)", fontSize: 13, lineHeight: 1.5 }}>"The first true online booking platform for luxury car rentals in Dubai" — 3 Oct 2025</p>
        </div>
        <div style={{ borderLeft:"1px solid var(--border)", paddingLeft: 32 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--muted)", letterSpacing: 2, textTransform:"uppercase", marginBottom: 12 }}>Independent confirmation</div>
          <div style={{ fontFamily:"var(--font-display)", fontSize: 22, fontWeight: 600, marginBottom: 6 }}>Gulf Today</div>
          <p style={{ margin: 0, color:"var(--muted)", fontSize: 13, lineHeight: 1.5 }}>"400+ vehicles … no security deposit on any booking, across any category" — 2 May 2026</p>
        </div>
      </div>
    </section>
  );
}
window.AwardStrip = AwardStrip;

// ─── CTA band ────────────────────────────────────────────────────────────
function CTABand() {
  return (
    <section style={{ position:"relative", overflow:"hidden", padding:"120px 0", background:"#000" }}>
      <img src="media/car-bentley-bentayga.webp" alt="" style={{ position:"absolute", inset: 0, width:"100%", height:"100%", objectFit:"cover", opacity: 0.4 }}/>
      <div style={{ position:"absolute", inset: 0, background:"linear-gradient(90deg, rgba(14,15,18,0.95) 0%, rgba(14,15,18,0.4) 100%)" }}/>
      <div className="container" style={{ position:"relative", padding:"0 32px", display:"grid", gridTemplateColumns:"1fr 1fr", gap: 48, alignItems:"center" }}>
        <div>
          <Chip tone="primary" icon="bolt">5-min response time</Chip>
          <h2 style={{ margin:"20px 0 16px", fontFamily:"var(--font-display)", fontSize:"clamp(36px, 5vw, 64px)", fontWeight: 600, lineHeight: 1.02, letterSpacing:-1.5 }}>
            Need it now?<br/><span style={{ color:"var(--primary)", fontStyle:"italic", fontWeight: 500 }}>WhatsApp us.</span>
          </h2>
          <p style={{ color:"var(--muted)", fontSize: 17, lineHeight: 1.6, maxWidth: 460, margin: 0 }}>
            24/7 delivery across Dubai, Abu Dhabi & Sharjah. Talk to a real human about long-term rates, chauffeur add-ons, or weekend wedding packages.
          </p>
          <div style={{ marginTop: 32, display:"flex", gap: 12, flexWrap:"wrap" }}>
            <Btn variant="whatsapp" icon="whatsapp" size="lg" href="https://wa.me/971527269337">+971 52 726 9337</Btn>
            <Btn variant="ghost" icon="phone" size="lg" href="tel:+97142536700">+971 4 253 6700</Btn>
          </div>
        </div>
        <div style={{ background:"rgba(22,24,29,0.7)", border:"1px solid var(--border)", borderRadius: 8, padding: 32, backdropFilter:"blur(20px)" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color:"var(--primary)", letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 16 }}>The promise</div>
          <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 18 }}>
            {[
              "No security deposit on any vehicle",
              "Basic insurance + delivery + 250 km/day in price",
              "Replacement vehicle within 2 hours, anywhere in Dubai",
              "Support in English, Arabic & Russian"
            ].map((line, i) => (
              <li key={i} style={{ display:"flex", gap: 12, alignItems:"flex-start", fontSize: 15, color:"var(--text)" }}>
                <span style={{ flexShrink: 0, marginTop: 2, width: 20, height: 20, borderRadius: 10, background:"var(--primary)", color:"#0E0F12", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name="check" size={12} stroke={2.5}/></span>
                {line}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
window.CTABand = CTABand;

// ─── Footer ──────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
    { title:"Fleet", links:["All vehicles","Supercars","Luxury","Sports","SUVs","Convertible","Electric","Long-term"] },
    { title:"Service", links:["How it works","No-deposit policy","Delivery","Long-term rental","Corporate fleet","Chauffeur","Knowledge","Blog"] },
    { title:"Cities", links:["Dubai","Abu Dhabi (delivery)","Sharjah (delivery)","Airport pick-up","Hotel delivery"] },
    { title:"Company", links:["About","Award","Press","Contact","Careers","Terms","Privacy"] }
  ];
  return (
    <footer style={{ background:"var(--surface)", borderTop:"1px solid var(--border)", padding:"80px 0 32px" }}>
      <div className="container" style={{ padding:"0 32px" }}>
        <div style={{ display:"grid", gridTemplateColumns:"1.4fr repeat(4, 1fr)", gap: 48, marginBottom: 64 }}>
          <div>
            <Logo height={28}/>
            <p style={{ marginTop: 20, color:"var(--muted)", fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
              No-deposit luxury, sport and exotic car rental in Dubai. 400+ vehicles, delivered 24/7 across the UAE.
            </p>
            <div style={{ marginTop: 24, display:"flex", flexDirection:"column", gap: 10, fontSize: 13, color:"var(--muted)" }}>
              <a href="tel:+97142536700" style={{ color:"var(--text)", textDecoration:"none", display:"flex", alignItems:"center", gap: 10 }}><Icon name="phone" size={14}/>+971 4 253 6700</a>
              <a href="https://wa.me/971527269337" style={{ color:"var(--text)", textDecoration:"none", display:"flex", alignItems:"center", gap: 10 }}><Icon name="whatsapp" size={14}/>+971 52 726 9337</a>
              <span style={{ display:"flex", alignItems:"flex-start", gap: 10 }}><Icon name="pin" size={14}/>Al Quoz Industrial Area 3, 22nd Street, Warehouse 3, Dubai</span>
              <span style={{ display:"flex", alignItems:"center", gap: 10 }}><Icon name="clock" size={14}/>24 / 7 customer service & delivery</span>
            </div>
          </div>
          {cols.map(c => (
            <div key={c.title}>
              <div style={{ fontFamily:"var(--font-display)", fontSize: 12, fontWeight: 700, color:"var(--text)", letterSpacing: 2, textTransform:"uppercase", marginBottom: 18 }}>{c.title}</div>
              <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 10 }}>
                {c.links.map(l => <li key={l}><a href="#" onClick={(e) => e.preventDefault()} style={{ color:"var(--muted)", textDecoration:"none", fontSize: 13 }}>{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 28, borderTop:"1px solid var(--border)", display:"flex", justifyContent:"space-between", alignItems:"center", fontSize: 12, color:"var(--muted)", flexWrap:"wrap", gap: 16 }}>
          <span>© 2026 Octane.Rent — VAT TRN 104016827800003. All vehicles shown are demonstration snapshot stock from the live home fleet rail.</span>
          <div style={{ display:"flex", gap: 16 }}>
            <a href="#" style={{ color:"var(--muted)" }}>Instagram</a>
            <a href="#" style={{ color:"var(--muted)" }}>Facebook</a>
            <a href="#" style={{ color:"var(--muted)" }}>YouTube</a>
            <a href="#" style={{ color:"var(--muted)" }}>Telegram</a>
            <a href="#" style={{ color:"var(--muted)" }}>LinkedIn</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;