// Pages for VIP Motors prototype
const { INVENTORY, BODY_STYLES, MAKES, FEATURED_SLUGS, SERVICES } = window.VIP_DATA;

// ── HOME ──────────────────────────────────────────────────────────
function HomePage({ navigate, onEnquire, onVehicle, tweaks }) {
  const heroMap = {
    divo: { src: "media/hero-bugatti-divo.webp", title: "Bugatti Divo", subtitle: "1 of 40 · Track-focused hyper" },
    laferrari: { src: "media/hero-ferrari-laferrari.webp", title: "Ferrari LaFerrari", subtitle: "Holy Trinity hybrid hypercar" },
    monza: { src: "media/hero-ferrari-monza.webp", title: "Ferrari Monza SP2", subtitle: "1 of 499 · Open-top barchetta" },
    showroom: { src: "media/showroom-primary.webp", title: "The Showroom", subtitle: "Sheikh Zayed Road · Dubai" }
  };
  const hero = heroMap[tweaks.heroImage] || heroMap.divo;
  const featured = FEATURED_SLUGS.map(s => INVENTORY.find(v => v.slug === s)).filter(Boolean);
  const headlineLines = (tweaks.headline || "").split("\n");

  return (
    <div>
      {/* HERO */}
      <section style={{
        position: "relative", minHeight: "100vh",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        overflow: "hidden",
        color: "#fff"
      }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `url(${hero.src})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          transform: "scale(1.02)",
          animation: "fadeIn 900ms ease both"
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(11,12,14,0.55) 0%, rgba(11,12,14,0.1) 30%, rgba(11,12,14,0.35) 60%, rgba(11,12,14,0.95) 100%)"
        }} />

        {/* Hero content */}
        <div className="wrap" style={{ position: "relative", paddingBottom: "12vh", paddingTop: "18vh" }}>
          <div className="fadeUp" style={{
            display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 28,
            padding: "6px 12px",
            background: "var(--accent)", color: "#fff",
            fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.22em",
            textTransform: "uppercase", animationDelay: "60ms"
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: "50%", background: "#fff",
              boxShadow: "0 0 0 0 rgba(255,255,255,0.7)",
              animation: "pulseRed 1.6s infinite"
            }} />
            <span>Live · Sheikh Zayed Road · Dubai</span>
          </div>
          <h1 className="display fadeUp" style={{
            fontSize: "clamp(40px, 7vw, 96px)",
            margin: 0, color: "#fff",
            maxWidth: "16ch",
            animationDelay: "200ms"
          }}>
            {headlineLines.map((line, i) => (
              <span key={i} style={{ display: "block" }}>
                {i === headlineLines.length - 1 ? <em style={{ fontWeight: 400 }}>{line}</em> : line}
              </span>
            ))}
          </h1>
          {/* red accent stripe under headline */}
          <div className="fadeUp" style={{
            marginTop: 28, width: 80, height: 3,
            background: "var(--accent)", animationDelay: "320ms"
          }} />
          <div className="fadeUp" style={{
            display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap",
            animationDelay: "360ms"
          }}>
            <button className="btn btn-primary btn-lg" onClick={() => navigate("inventory")}>
              View inventory <Icon name="arrow" size={14} />
            </button>
            <button className="btn btn-ghost btn-lg" onClick={onEnquire}>
              Request a viewing
            </button>
          </div>
        </div>

        {/* Hero meta bar */}
        <div style={{
          position: "relative",
          borderTop: "2px solid var(--accent)",
          background: "rgba(11,12,14,0.55)",
          backdropFilter: "blur(10px)"
        }}>
          <div className="wrap" style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "22px 0", gap: 24, flexWrap: "wrap"
          }} className="hero-meta">
            <div style={{ display: "flex", alignItems: "center", gap: 18, fontSize: 12, color: "rgba(255,255,255,0.75)" }}>
              <span className="mono" style={{ letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)" }}>● Now in showroom</span>
              <span className="serif" style={{ fontSize: 20, fontWeight: 500, color: "#fff" }}>
                {hero.title}
              </span>
              <span style={{ opacity: 0.7 }}>· {hero.subtitle}</span>
            </div>
            <div className="num" style={{ fontSize: 11, color: "rgba(255,255,255,0.6)", letterSpacing: "0.18em" }}>
              SCROLL ↓
            </div>
          </div>
        </div>
      </section>

      {/* PERFORMANCE TICKER — red marquee */}
      <section style={{
        background: "var(--accent)",
        color: "#fff",
        borderTop: "1px solid rgba(0,0,0,0.2)",
        borderBottom: "1px solid rgba(0,0,0,0.2)",
        padding: "16px 0",
        overflow: "hidden",
        position: "relative"
      }}>
        <div style={{
          display: "flex",
          gap: 48,
          whiteSpace: "nowrap",
          animation: "tickerScroll 38s linear infinite",
          fontFamily: "var(--mono)",
          fontSize: 12,
          letterSpacing: "0.28em",
          textTransform: "uppercase"
        }}>
          {[
            "▲ 1,500 HP · Bugatti Divo",
            "● 0–100 KM/H IN 2.4S",
            "▲ 950 HP · LaFerrari",
            "● TOP SPEED 440 KM/H",
            "▲ V12 NATURALLY ASPIRATED",
            "● 1 OF 14 · LAMBORGHINI VENENO",
            "▲ QUAD-TURBO W16",
            "● 200+ CARS ON FLOOR",
            "▲ 6.5L V12 · MONZA SP2",
            "● 30+ MARQUES CURATED",
            "▲ 1,500 HP · Bugatti Divo",
            "● 0–100 KM/H IN 2.4S",
            "▲ 950 HP · LaFerrari",
            "● TOP SPEED 440 KM/H",
            "▲ V12 NATURALLY ASPIRATED",
            "● 1 OF 14 · LAMBORGHINI VENENO"
          ].map((t, i) => (
            <span key={i} style={{ flexShrink: 0, fontWeight: 500 }}>{t}</span>
          ))}
        </div>
        <style>{`
          @keyframes tickerScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
          }
        `}</style>
      </section>

      {/* PROPOSITION + METRICS */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="prop-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>The Showroom</div>
              <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 52px)", margin: "0 0 28px" }}>
                A single address for the cars <em>that don't get listed.</em>
              </h2>
            </div>
            <div>
              <p style={{ fontSize: 18, lineHeight: 1.7, color: "var(--text)", margin: 0, maxWidth: "62ch" }}>
                VIP Motors has operated on Sheikh Zayed Road since 2016, sourcing and curating new and pre-owned exotics for collectors, principals, and international buyers. <span style={{ color: "var(--text-muted)" }}>Press has described the floor as "one of the largest luxury showrooms in the UAE," with roughly 200 cars on display daily and an expanded capacity announced in 2023.</span>
              </p>
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32,
                marginTop: 56, paddingTop: 36, borderTop: "1px solid var(--line)"
              }}>
                {[
                  { n: "2016", l: "Founded" },
                  { n: "200+", l: "Cars on display¹" },
                  { n: "30+", l: "Marques curated" }
                ].map((s, i) => (
                  <div key={i}>
                    <div className="serif num" style={{ fontSize: 44, fontWeight: 500, letterSpacing: "-0.02em" }}>{s.n}</div>
                    <div className="eyebrow" style={{ marginTop: 6 }}>{s.l}</div>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 18, fontFamily: "var(--mono)" }}>
                ¹ Figure attributed to company press; subject to confirmation.
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .prop-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
          @media (max-width: 700px) {
            .hero-meta { display: none !important; }
          }
        `}</style>
      </section>

      {/* FEATURED */}
      <section className="section-tight" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            marginBottom: 48, gap: 24, flexWrap: "wrap"
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>▲ Currently on the floor</div>
              <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 48px)", margin: 0 }}>
                Featured <em>vehicles</em>
              </h2>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("inventory")}>
              All {INVENTORY.length} cars <Icon name="arrow" size={12} />
            </button>
          </div>

          <div className="grid g-4">
            {featured.map((v, i) => (
              <div key={v.slug} className="fadeUp" style={{ animationDelay: `${i * 80}ms` }}>
                <VehicleCard v={v} onOpen={onVehicle} paper={false} />
              </div>
            ))}
          </div>

          <div style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 28, fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.18em" }}>
            Demo data — production inventory binds to feed / DMS
          </div>
        </div>
      </section>

      {/* IMAGE SPLIT — Showroom */}
      <section className="section" style={{ background: "var(--ink)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="split">
            <div style={{
              aspectRatio: "4/3",
              backgroundImage: "url(media/showroom-primary.webp)",
              backgroundSize: "cover", backgroundPosition: "center"
            }} />
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Visit · Al Quoz 3</div>
              <h3 className="display" style={{ fontSize: "clamp(28px, 3.4vw, 44px)", margin: "0 0 24px" }}>
                Step onto the floor.
              </h3>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-muted)", margin: "0 0 32px", maxWidth: "44ch" }}>
                Private viewings are arranged daily. The showroom sits on Sheikh Zayed Road near Mashreq Bank — climate-controlled, valet on arrival, and full export logistics handled in-house.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={onEnquire}>Book a viewing</button>
                <button className="btn btn-ghost" onClick={() => navigate("contact")}>Directions <Icon name="arrow-up-right" size={12} /></button>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .split { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* SERVICES */}
      <section className="section paper">
        <div className="wrap">
          <div className="eyebrow eyebrow-paper" style={{ marginBottom: 18 }}>What we do</div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 52px)", margin: "0 0 56px", maxWidth: "20ch" }}>
            End-to-end for the <em>buyer who knows what they want.</em>
          </h2>
          <div className="grid g-4">
            {SERVICES.map((s, i) => (
              <div key={s.k} style={{
                borderTop: "1px solid var(--ink-on-paper)",
                paddingTop: 24
              }} className="fadeUp">
                <div className="num" style={{ fontSize: 13, color: "var(--muted-on-paper)", marginBottom: 18 }}>
                  {s.k}
                </div>
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: "0 0 14px" }}>
                  {s.title}
                </h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted-on-paper)", margin: 0 }}>
                  {s.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PERFORMANCE SPOTLIGHT — big red numbers */}
      <section style={{
        background: "var(--noir)",
        position: "relative",
        overflow: "hidden",
        padding: "clamp(80px, 10vw, 140px) 0",
        borderTop: "1px solid var(--line)"
      }}>
        {/* diagonal red speed-line accents */}
        <div aria-hidden="true" style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          backgroundImage: "repeating-linear-gradient(115deg, transparent 0 80px, rgba(217,10,44,0.06) 80px 82px)"
        }} />
        <div className="wrap" style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginBottom: 64 }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 16 }}>● Performance</div>
              <h2 className="display" style={{ fontSize: "clamp(32px, 5vw, 64px)", margin: 0, maxWidth: "16ch" }}>
                Built for the line <em>between law and physics.</em>
              </h2>
            </div>
            <div style={{ maxWidth: 360, color: "var(--text-muted)", fontSize: 15, lineHeight: 1.6 }}>
              Sample of what's parked on the floor today — figures are manufacturer published specs, verified on enquiry.
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} className="perf-grid">
            {[
              { fig: "1,500", unit: "HP", car: "Bugatti Divo · W16 quad-turbo" },
              { fig: "2.4", unit: "SEC 0–100", car: "Koenigsegg Regera · direct-drive" },
              { fig: "440", unit: "KM/H", car: "Chiron Super Sport · top speed" },
              { fig: "799", unit: "HP V12", car: "Ferrari Monza SP2 · 1 of 499" }
            ].map((p, i) => (
              <div key={i} style={{
                padding: "32px 24px",
                borderLeft: i === 0 ? "none" : "1px solid var(--line)",
                position: "relative"
              }}>
                <div style={{
                  position: "absolute", top: 0, left: i === 0 ? 0 : -1, width: 32, height: 3,
                  background: "var(--accent)"
                }} />
                <div className="num" style={{
                  fontFamily: "var(--serif)",
                  fontSize: "clamp(54px, 7vw, 96px)",
                  fontWeight: 500,
                  letterSpacing: "-0.03em",
                  lineHeight: 1,
                  color: "var(--text)"
                }}>
                  {p.fig}
                </div>
                <div className="eyebrow" style={{ marginTop: 14, color: "var(--accent)" }}>{p.unit}</div>
                <div style={{ marginTop: 12, fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5 }}>
                  {p.car}
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .perf-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width: 540px) { .perf-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* JUST ARRIVED — horizontal scroller */}
      <section className="section-tight" style={{ background: "var(--ink)", borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, marginBottom: 32, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 12 }}>▲ Just arrived</div>
              <h3 className="display" style={{ fontSize: "clamp(28px, 4vw, 44px)", margin: 0 }}>
                This week on the <em>floor.</em>
              </h3>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => navigate("inventory")}>
              See all arrivals <Icon name="arrow" size={12} />
            </button>
          </div>

          <div className="scroll-x" style={{ gap: 28 }}>
            {INVENTORY.slice(4, 12).map((v) => (
              <div key={v.slug} style={{ width: 360 }}>
                <VehicleCard v={v} onOpen={onVehicle} paper={false} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* OWNERSHIP PROGRAM — split with red strip */}
      <section style={{ position: "relative", background: "var(--noir)" }}>
        <div style={{
          position: "absolute", top: 0, left: 0, height: 4, width: "38%",
          background: "var(--accent)"
        }} />
        <div className="wrap" style={{ paddingTop: 96, paddingBottom: 96 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="prop-grid">
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 18 }}>● Ownership programme</div>
              <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 52px)", margin: 0 }}>
                Beyond the <em>handshake.</em>
              </h2>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="own-grid">
              {[
                { t: "Concierge service", b: "Door-to-door collection, storage, and detail. Annual programmes for residents and seasonal owners." },
                { t: "Specialist workshop", b: "Manufacturer-certified technicians for engine-out service intervals on Ferrari, Lamborghini, Bugatti and McLaren." },
                { t: "Track-day partnerships", b: "Closed-circuit days at Yas Marina and Dubai Autodrome — coordinated with the marque support teams." },
                { t: "Insurance liaison", b: "Bespoke cover via specialist brokers for collector-grade and limited-production vehicles. Subject to confirmation." }
              ].map((c, i) => (
                <div key={i} style={{
                  padding: "28px 0",
                  borderTop: "1px solid var(--accent)",
                  position: "relative"
                }}>
                  <div className="num" style={{ position: "absolute", top: 28, right: 0, fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.18em" }}>0{i + 1}</div>
                  <h4 className="serif" style={{ fontSize: 24, fontWeight: 500, margin: "0 0 12px", lineHeight: 1.2 }}>{c.t}</h4>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>{c.b}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .own-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* PRESS / QUOTES STRIP */}
      <section className="section paper">
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 36 }}>
            <span style={{ width: 28, height: 2, background: "var(--accent)" }} />
            <div className="eyebrow eyebrow-paper" style={{ color: "var(--accent)" }}>Press</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }} className="quote-grid">
            {[
              { q: "One of the largest luxury showrooms in the UAE.", src: "Entrepreneur ME" },
              { q: "A floor where the cars don't make it to the listing sites.", src: "Dubai Collector Weekly" },
              { q: "Sheikh Zayed Road's reference point for limited-production exotics.", src: "Drive Arabia" }
            ].map((p, i) => (
              <figure key={i} style={{ margin: 0 }}>
                <div className="serif" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.25, color: "var(--ink-on-paper)" }}>
                  <span style={{ color: "var(--accent)", fontStyle: "italic" }}>"</span>
                  {p.q}
                  <span style={{ color: "var(--accent)", fontStyle: "italic" }}>"</span>
                </div>
                <figcaption className="mono" style={{ fontSize: 11, color: "var(--muted-on-paper)", letterSpacing: "0.18em", textTransform: "uppercase", marginTop: 18 }}>
                  — {p.src}
                </figcaption>
              </figure>
            ))}
          </div>
          <div style={{ fontSize: 11, color: "var(--muted-on-paper)", marginTop: 28, fontFamily: "var(--mono)", letterSpacing: "0.15em", textTransform: "uppercase" }}>
            Illustrative pull-quotes for prototype review · publication names placeholder
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
        `}</style>
      </section>

      {/* CTA BAND */}
      <section style={{
        padding: "80px 0",
        background: "var(--accent)",
        color: "#fff"
      }}>
        <div className="wrap" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 32, flexWrap: "wrap"
        }}>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)", marginBottom: 12 }}>
              Looking for something specific?
            </div>
            <div className="display" style={{ fontSize: "clamp(28px, 4vw, 48px)", lineHeight: 1.1 }}>
              We source the cars that <em>don't appear online.</em>
            </div>
          </div>
          <button
            onClick={onEnquire}
            style={{
              background: "#fff", color: "var(--accent)",
              border: 0, padding: "20px 32px",
              fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase",
              fontWeight: 600, cursor: "pointer",
              display: "flex", alignItems: "center", gap: 10
            }}
          >
            Start a sourcing brief <Icon name="arrow" size={14} />
          </button>
        </div>
      </section>
    </div>
  );
}

// ── INVENTORY ─────────────────────────────────────────────────────
function InventoryPage({ navigate, onEnquire, onVehicle }) {
  const [bodyFilter, setBodyFilter] = useState("All");
  const [makeFilter, setMakeFilter] = useState("All");
  const [sort, setSort] = useState("featured");
  const [view, setView] = useState("grid"); // grid | list

  const filtered = useMemo(() => {
    let out = INVENTORY.slice();
    if (bodyFilter !== "All") out = out.filter(v => v.body === bodyFilter);
    if (makeFilter !== "All") out = out.filter(v => v.make === makeFilter);
    if (sort === "year-new") out.sort((a, b) => b.year - a.year);
    if (sort === "year-old") out.sort((a, b) => a.year - b.year);
    if (sort === "mileage") out.sort((a, b) => (a.mileage || 0) - (b.mileage || 0));
    return out;
  }, [bodyFilter, makeFilter, sort]);

  return (
    <div>
      {/* Header */}
      <section style={{ paddingTop: 140, paddingBottom: 48, borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Inventory · {INVENTORY.length} vehicles</div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: 0, maxWidth: "14ch" }}>
              The floor, <em>live.</em>
            </h1>
            <div style={{ maxWidth: 480 }}>
              <p style={{ color: "var(--text-muted)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
                Every vehicle is in our Dubai showroom or available by appointment. Demo data shown — production inventory updates daily from the dealer feed.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{
        position: "sticky", top: 108, zIndex: 50,
        background: "rgba(11,12,14,0.92)",
        backdropFilter: "blur(14px)",
        borderBottom: "1px solid var(--line)",
        padding: "16px 0"
      }}>
        <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Body styles */}
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
            <span className="eyebrow" style={{ marginRight: 8 }}>Body</span>
            {BODY_STYLES.map(b => (
              <button key={b} className={`chip ${bodyFilter === b ? "active" : ""}`} onClick={() => setBodyFilter(b)}>
                {b}
              </button>
            ))}
          </div>
          {/* Make + Sort */}
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
            <span className="eyebrow" style={{ marginRight: 8 }}>Make</span>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", flex: 1 }}>
              {MAKES.slice(0, 9).map(m => (
                <button key={m} className={`chip ${makeFilter === m ? "active" : ""}`} onClick={() => setMakeFilter(m)}>
                  {m}
                </button>
              ))}
            </div>
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <span className="eyebrow">Sort</span>
              <select
                value={sort} onChange={e => setSort(e.target.value)}
                style={{
                  background: "transparent", border: "1px solid var(--line)",
                  color: "var(--text)", padding: "8px 12px",
                  fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em",
                  textTransform: "uppercase"
                }}
              >
                <option value="featured">Featured</option>
                <option value="year-new">Newest</option>
                <option value="year-old">Oldest</option>
                <option value="mileage">Lowest mileage</option>
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="section-tight">
        <div className="wrap">
          {filtered.length === 0 ? (
            <div style={{ padding: "80px 0", textAlign: "center", color: "var(--text-muted)" }}>
              <div className="serif" style={{ fontSize: 28, marginBottom: 12 }}>No matches.</div>
              <button className="btn btn-sm" onClick={() => { setBodyFilter("All"); setMakeFilter("All"); }}>
                Reset filters
              </button>
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }} className="inv-grid">
              {filtered.map((v, i) => (
                <div key={v.slug} className="fadeUp" style={{ animationDelay: `${i * 40}ms` }}>
                  <VehicleCard v={v} onOpen={onVehicle} />
                </div>
              ))}
            </div>
          )}

          <div style={{ marginTop: 60, fontSize: 11, color: "var(--text-dim)", textAlign: "center", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.2em" }}>
            Showing {filtered.length} of {INVENTORY.length} · Demo data — feed binding in production
          </div>
        </div>
        <style>{`
          @media (max-width: 1100px) { .inv-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width: 640px) { .inv-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
}

// ── VEHICLE DETAIL ────────────────────────────────────────────────
function VehiclePage({ slug, navigate, onEnquire, onVehicle }) {
  const v = INVENTORY.find(x => x.slug === slug) || INVENTORY[0];
  const [activeImg, setActiveImg] = useState(0);
  const [tab, setTab] = useState("specs");

  // include a few extra gallery shots if vehicle has only one image
  const gallery = v.images.length >= 2
    ? v.images
    : [v.images[0], "media/showroom-primary.webp", "media/showroom-01.webp"];

  useEffect(() => { setActiveImg(0); window.scrollTo({ top: 0, behavior: "instant" }); }, [slug]);

  const related = INVENTORY.filter(x => x.slug !== v.slug && x.body === v.body).slice(0, 3);

  return (
    <div>
      {/* breadcrumb */}
      <div style={{ paddingTop: 96, borderBottom: "1px solid var(--line)" }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 0", gap: 16 }}>
          <button
            onClick={() => navigate("inventory")}
            style={{
              background: "none", border: 0, color: "var(--text-muted)", cursor: "pointer",
              display: "flex", alignItems: "center", gap: 8, fontSize: 12,
              fontFamily: "var(--mono)", letterSpacing: "0.18em", textTransform: "uppercase"
            }}
          >
            <Icon name="back" size={14} /> All inventory
          </button>
          <div style={{ display: "flex", gap: 12 }}>
            <button className="btn btn-sm btn-ghost" title="Save"><Icon name="heart" size={14} /></button>
            <button className="btn btn-sm btn-ghost" title="Share"><Icon name="share" size={14} /></button>
          </div>
        </div>
      </div>

      {/* gallery */}
      <section style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }} className="gallery-grid">
            <div style={{
              aspectRatio: "16/10", position: "relative",
              background: `url(${gallery[activeImg]}) center/cover no-repeat var(--ink)`
            }}>
              <div style={{
                position: "absolute", bottom: 16, left: 16,
                fontFamily: "var(--mono)", fontSize: 11,
                padding: "6px 10px", background: "rgba(11,12,14,0.7)",
                color: "#fff", letterSpacing: "0.16em", textTransform: "uppercase"
              }}>
                <Icon name="camera" size={11} /> &nbsp;{activeImg + 1} / {gallery.length}
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)", gap: 16 }}>
              {gallery.slice(0, 3).map((src, i) => (
                <button
                  key={i}
                  onClick={() => setActiveImg(i)}
                  style={{
                    background: `url(${src}) center/cover no-repeat var(--ink)`,
                    border: 0, padding: 0, cursor: "pointer",
                    aspectRatio: "16/10",
                    outline: activeImg === i ? "2px solid var(--accent)" : "none",
                    outlineOffset: -2,
                    opacity: activeImg === i ? 1 : 0.7,
                    transition: "opacity 220ms"
                  }}
                />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Title + sticky CTA */}
      <section style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "start" }} className="title-grid">
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
              {v.badges && v.badges.map(b => (
                <span key={b} style={{
                  fontFamily: "var(--mono)", fontSize: 10,
                  letterSpacing: "0.2em", textTransform: "uppercase",
                  padding: "5px 10px",
                  background: b === "Limited" || b.startsWith("1 of") ? "var(--accent)" : "transparent",
                  color: b === "Limited" || b.startsWith("1 of") ? "#fff" : "var(--text)",
                  border: b === "Limited" || b.startsWith("1 of") ? 0 : "1px solid var(--line)"
                }}>{b}</span>
              ))}
            </div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{v.year} · {v.body}</div>
            <h1 className="display" style={{
              fontSize: "clamp(40px, 6vw, 80px)", margin: 0, lineHeight: 1.05
            }}>
              {v.make} <em>{v.model}</em>
            </h1>
            {v.headline && (
              <p className="serif" style={{
                fontSize: 22, fontStyle: "italic", color: "var(--text-muted)",
                marginTop: 18, fontWeight: 400
              }}>
                {v.headline}
              </p>
            )}
          </div>

          {/* Sticky CTA box */}
          <div style={{
            border: "1px solid var(--line)", padding: 28,
            display: "flex", flexDirection: "column", gap: 18,
            position: "sticky", top: 100
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Price</div>
              <div className="serif" style={{ fontSize: 36, fontWeight: 500 }}>
                Request price
              </div>
              <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 4 }}>
                By enquiry · finance &amp; export available
              </div>
            </div>
            <hr className="hr" />
            <button className="btn btn-primary" onClick={() => onEnquire("Request price", v)}>
              Request price <Icon name="arrow" size={12} />
            </button>
            <button className="btn btn-ghost" onClick={() => onEnquire("Book viewing", v)}>
              Book a viewing
            </button>
            <button className="btn btn-ghost" onClick={() => onEnquire("Trade-in", v)}>
              Trade-in valuation
            </button>
            <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
              <a href="tel:+97143232999" className="btn btn-ghost btn-sm" style={{ flex: 1, justifyContent: "center" }}>
                <Icon name="phone" size={12} /> Call
              </a>
              <button className="btn btn-ghost btn-sm" onClick={() => onEnquire("WhatsApp", v)} style={{ flex: 1, justifyContent: "center" }}>
                <Icon name="whatsapp" size={14} /> WhatsApp
              </button>
            </div>
            <div style={{ fontSize: 11, color: "var(--text-dim)", lineHeight: 1.5, paddingTop: 6, borderTop: "1px solid var(--line-soft)" }}>
              <strong style={{ color: "var(--text-muted)", fontWeight: 500 }}>Demo prototype</strong> — WhatsApp number is a placeholder; replace before launch.
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 1000px) {
            .gallery-grid { grid-template-columns: 1fr !important; }
            .title-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Tabs: Specs / Overview / Location */}
      <section className="section paper">
        <div className="wrap">
          <div style={{ display: "flex", gap: 32, borderBottom: "1px solid var(--rule)", marginBottom: 32 }}>
            {[
              { k: "specs", l: "Specifications" },
              { k: "overview", l: "Overview" },
              { k: "location", l: "Location" }
            ].map(t => (
              <button
                key={t.k}
                onClick={() => setTab(t.k)}
                style={{
                  background: "none", border: 0, padding: "16px 0",
                  cursor: "pointer", fontFamily: "var(--mono)",
                  fontSize: 12, letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  color: tab === t.k ? "var(--ink-on-paper)" : "var(--muted-on-paper)",
                  borderBottom: tab === t.k ? "2px solid var(--accent)" : "2px solid transparent",
                  marginBottom: -1
                }}
              >{t.l}</button>
            ))}
          </div>

          {tab === "specs" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }} className="specs-grid">
              <div>
                <div className="spec-row"><div className="k">Year</div><div className="v num">{v.year}</div></div>
                <div className="spec-row"><div className="k">Body</div><div className="v">{v.body}</div></div>
                <div className="spec-row"><div className="k">Mileage</div><div className="v num">{v.mileage ? v.mileage.toLocaleString() + " km" : "—"}</div></div>
                <div className="spec-row"><div className="k">Drivetrain</div><div className="v">{v.drivetrain}</div></div>
                <div className="spec-row"><div className="k">Location</div><div className="v">{v.location}</div></div>
              </div>
              <div>
                <div className="spec-row"><div className="k">Engine</div><div className="v">{v.engine}</div></div>
                <div className="spec-row"><div className="k">Power</div><div className="v num">{v.power}</div></div>
                <div className="spec-row"><div className="k">Transmission</div><div className="v">{v.transmission}</div></div>
                <div className="spec-row"><div className="k">Exterior</div><div className="v">{v.exterior}</div></div>
                <div className="spec-row"><div className="k">Interior</div><div className="v">{v.interior}</div></div>
              </div>
            </div>
          )}

          {tab === "overview" && (
            <div style={{ maxWidth: "62ch" }}>
              <p className="serif" style={{ fontSize: 24, fontWeight: 400, lineHeight: 1.4, color: "var(--ink-on-paper)" }}>
                The {v.year} {v.make} {v.model} arrived in our showroom <span style={{ fontStyle: "italic" }}>direct from a single owner</span>, accompanied by full service history and manufacturer documentation.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.75, marginTop: 24, color: "var(--muted-on-paper)" }}>
                Presented in {v.exterior} over {v.interior}, with {v.mileage ? v.mileage.toLocaleString() : "low"} km on the odometer. Inspected by our in-house technicians; export documentation can be prepared on confirmation of sale. Detailed condition report and additional media supplied on enquiry.
              </p>
              <p style={{ fontSize: 13, color: "var(--muted-on-paper)", marginTop: 24, fontStyle: "italic" }}>
                Specifications shown are subject to verification at the time of sale. Demo content for prototype review.
              </p>
            </div>
          )}

          {tab === "location" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 32 }} className="loc-grid">
              <div>
                <div className="eyebrow eyebrow-paper" style={{ marginBottom: 10 }}>Where to find this car</div>
                <div className="serif" style={{ fontSize: 26, fontWeight: 500, lineHeight: 1.3 }}>
                  507 Sheikh Zayed Road,<br/>Al Quoz 3, Dubai
                </div>
                <p style={{ marginTop: 18, color: "var(--muted-on-paper)", lineHeight: 1.6 }}>
                  Near Mashreq Bank. Climate-controlled showroom; valet on arrival. Open Mon–Thu &amp; Sat 10:00–21:00, Fri 14:00–21:00.
                </p>
                <button className="btn" style={{ marginTop: 20 }} onClick={() => navigate("contact")}>
                  Get directions <Icon name="arrow-up-right" size={12} />
                </button>
              </div>
              <div style={{
                aspectRatio: "16/9",
                background: `
                  linear-gradient(135deg, rgba(217,10,44,0.06), transparent 50%),
                  repeating-linear-gradient(0deg, var(--rule), var(--rule) 1px, transparent 1px, transparent 60px),
                  repeating-linear-gradient(90deg, var(--rule), var(--rule) 1px, transparent 1px, transparent 60px),
                  var(--paper-2)`,
                position: "relative",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                <div style={{
                  background: "var(--accent)", color: "#fff",
                  padding: "10px 14px",
                  fontFamily: "var(--mono)", fontSize: 11,
                  letterSpacing: "0.16em", textTransform: "uppercase",
                  display: "flex", alignItems: "center", gap: 8
                }}>
                  <Icon name="pin" size={14} /> Map placeholder
                </div>
              </div>
            </div>
          )}

          <style>{`
            @media (max-width: 800px) {
              .specs-grid, .loc-grid { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </div>
      </section>

      {/* RELATED */}
      {related.length > 0 && (
        <section className="section-tight" style={{ borderTop: "1px solid var(--line)" }}>
          <div className="wrap">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Similar in the floor</div>
            <h3 className="display" style={{ fontSize: "clamp(24px, 3.4vw, 40px)", margin: "0 0 36px" }}>
              You might also <em>consider</em>
            </h3>
            <div className="grid g-3">
              {related.map(rv => <VehicleCard key={rv.slug} v={rv} onOpen={onVehicle} />)}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

// ── SELL / TRADE-IN ───────────────────────────────────────────────
function SellPage({ navigate, onEnquire }) {
  const [data, setData] = useState({
    name: "", phone: "", email: "",
    make: "", model: "", year: "", mileage: "",
    condition: "Excellent", message: ""
  });
  const [sent, setSent] = useState(false);
  const update = (k) => (e) => setData({ ...data, [k]: e.target.value });

  return (
    <div className="paper" style={{ minHeight: "100vh" }}>
      <section style={{ paddingTop: 140, paddingBottom: 48, borderBottom: "1px solid var(--rule)" }}>
        <div className="wrap">
          <div className="eyebrow eyebrow-paper" style={{ marginBottom: 18 }}>Sell / Trade-in</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)", margin: 0, maxWidth: "16ch" }}>
            We buy what's in <em>your garage.</em>
          </h1>
          <p style={{ marginTop: 28, maxWidth: "56ch", fontSize: 18, lineHeight: 1.6, color: "var(--muted-on-paper)" }}>
            Submit your vehicle for confidential valuation. Direct purchase or consignment; settlement typically within 72 hours of inspection.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80 }} className="sell-grid">
          <div>
            <div className="eyebrow eyebrow-paper" style={{ marginBottom: 18 }}>How it works</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              {[
                ["01", "Submit", "Tell us about the car. We'll request photos and history if not provided."],
                ["02", "Inspect", "Bring it to our Sheikh Zayed Road showroom — typically 30 minutes."],
                ["03", "Offer", "Same-day written offer. Direct purchase or consignment, your choice."],
                ["04", "Settle", "Bank transfer within 72 hours of agreement."]
              ].map(([k, t, b]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 24 }}>
                  <div className="num" style={{ fontSize: 13, color: "var(--muted-on-paper)", paddingTop: 4 }}>{k}</div>
                  <div>
                    <div className="serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 4 }}>{t}</div>
                    <div style={{ color: "var(--muted-on-paper)", fontSize: 14 }}>{b}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ border: "1px solid var(--rule)", padding: 36, background: "#fff" }}>
            {sent ? (
              <div style={{ textAlign: "center", padding: "20px 0" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%",
                  background: "var(--accent)", color: "#fff",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  margin: "0 auto 24px"
                }}>
                  <Icon name="check" size={32} />
                </div>
                <div className="serif" style={{ fontSize: 32, fontWeight: 500, marginBottom: 12 }}>
                  We'll be in touch.
                </div>
                <div style={{ color: "var(--muted-on-paper)", maxWidth: 360, margin: "0 auto" }}>
                  A specialist will review your submission and respond — typically within four hours during showroom hours.
                </div>
                <button className="btn" style={{ marginTop: 32 }} onClick={() => { setSent(false); setData({ name: "", phone: "", email: "", make: "", model: "", year: "", mileage: "", condition: "Excellent", message: "" }); }}>
                  Submit another
                </button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                <div className="eyebrow eyebrow-paper">Valuation request</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <div className="field"><label>Name</label><input required value={data.name} onChange={update("name")} /></div>
                  <div className="field"><label>Phone</label><input required value={data.phone} onChange={update("phone")} placeholder="+971…" /></div>
                </div>
                <div className="field"><label>Email</label><input type="email" required value={data.email} onChange={update("email")} /></div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <div className="field"><label>Make</label><input required value={data.make} onChange={update("make")} placeholder="e.g. Ferrari" /></div>
                  <div className="field"><label>Model</label><input required value={data.model} onChange={update("model")} placeholder="e.g. 488 Pista" /></div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }}>
                  <div className="field"><label>Year</label><input required value={data.year} onChange={update("year")} placeholder="2022" /></div>
                  <div className="field"><label>Mileage (km)</label><input value={data.mileage} onChange={update("mileage")} placeholder="12,000" /></div>
                  <div className="field"><label>Condition</label>
                    <select value={data.condition} onChange={update("condition")}>
                      <option>Excellent</option><option>Very good</option><option>Good</option><option>Fair</option>
                    </select>
                  </div>
                </div>
                <div className="field"><label>Notes</label><textarea rows={3} value={data.message} onChange={update("message")} placeholder="Modifications, ownership history, urgency…" /></div>
                <button type="submit" className="btn btn-primary btn-lg" style={{ justifyContent: "center" }}>
                  Request valuation <Icon name="arrow" size={14} />
                </button>
                <div style={{ fontSize: 11, color: "var(--muted-on-paper)", lineHeight: 1.5 }}>
                  Demo form — no data is sent. Production wires to CRM + WhatsApp deep link.
                </div>
              </form>
            )}
          </div>
        </div>

        <style>{`
          @media (max-width: 1000px) { .sell-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
        `}</style>
      </section>
    </div>
  );
}

// ── ABOUT ─────────────────────────────────────────────────────────
function AboutPage({ navigate, onEnquire }) {
  return (
    <div>
      <section style={{
        paddingTop: 140, paddingBottom: 64,
        background: `linear-gradient(180deg, var(--noir) 0%, rgba(11,12,14,0.4) 100%), url(media/showroom-primary.webp) center/cover`,
        color: "#fff"
      }}>
        <div className="wrap" style={{ paddingTop: 60, paddingBottom: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 20, color: "rgba(255,255,255,0.7)" }}>About</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 96px)", margin: 0, maxWidth: "18ch" }}>
            A showroom shaped <em>around the buyer.</em>
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }} className="about-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Founded 2016</div>
            <div className="serif" style={{ fontSize: 38, fontWeight: 500, lineHeight: 1.2 }}>
              Ahmad Nabil,<br/><em style={{ fontStyle: "italic" }}>Founder &amp; CEO</em>
            </div>
          </div>
          <div>
            <p style={{ fontSize: 20, lineHeight: 1.65, color: "var(--text)", margin: 0 }}>
              Founded in 2016 by Ahmad Nabil, VIP Motors built its reputation on a single principle: the cars worth owning are rarely the cars listed online. From a flagship showroom on Sheikh Zayed Road, we curate new and pre-owned vehicles from the marques that define the segment — and source the ones that don't appear in the trade.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-muted)", marginTop: 24 }}>
              In 2023 the floor was expanded to accommodate over 250 vehicles on display — among the largest dedicated luxury and exotic floors in the region.<sup style={{ color: "var(--text-dim)" }}>¹</sup> Clients include collectors across the GCC, exporters supplying European and Asian markets, and principals commissioning bespoke builds with our coachbuilding partners.
            </p>
            <div style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 24, fontFamily: "var(--mono)" }}>
              ¹ Founder, founding year, and 2023 expansion figures attributed to Entrepreneur.com and the company's 2023 press release. Marque-franchise status, customisation and finance services subject to client confirmation.
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </section>

      <section className="section paper">
        <div className="wrap">
          <div className="eyebrow eyebrow-paper" style={{ marginBottom: 18 }}>The marques</div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 52px)", margin: "0 0 48px", maxWidth: "20ch" }}>
            Curated breadth, <em>collector depth.</em>
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--rule)" }} className="marque-grid">
            {["Ferrari", "Lamborghini", "Bugatti", "Koenigsegg", "McLaren", "Porsche", "Mercedes-AMG", "Brabus", "Bentley", "Rolls-Royce", "Range Rover", "Aston Martin"].map(m => (
              <div key={m} style={{
                background: "var(--paper)",
                padding: "32px 20px",
                textAlign: "center"
              }}>
                <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>{m}</div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 800px) { .marque-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          `}</style>
        </div>
      </section>
    </div>
  );
}

// ── FINANCE ───────────────────────────────────────────────────────
function FinancePage({ navigate, onEnquire }) {
  return (
    <div>
      <section style={{ paddingTop: 140, paddingBottom: 64 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Finance &amp; Leasing*</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)", margin: 0, maxWidth: "16ch" }}>
            Tailored introductions, <em>not bank queues.</em>
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80 }} className="finance-grid">
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.7, color: "var(--text)", margin: 0 }}>
              We introduce qualified buyers to private bank and specialist asset-finance partners across the GCC. Terms are negotiated to the vehicle, not to a template — typical structures range from balloon leases on collector cars to straight finance on registered exotics.
            </p>
            <div style={{ marginTop: 40, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
              <div className="eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>*Important</div>
              <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.7, margin: 0 }}>
                Finance and insurance services appear on third-party SEO listings for VIP Motors but are not currently confirmed on the official website. Treat the partner roster, rates, and product list shown here as <em>subject to client confirmation</em> before launch.
              </p>
            </div>
            <div style={{ marginTop: 48 }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Typical structures</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {[
                  ["Asset finance", "12 – 60 months · UAE-registered vehicles"],
                  ["Balloon lease", "Collector cars · residual-set terms"],
                  ["Export financing", "GCC and international buyers · LC structures"]
                ].map(([t, b]) => (
                  <div key={t} style={{ display: "flex", justifyContent: "space-between", padding: "16px 0", borderBottom: "1px solid var(--line)" }}>
                    <span className="serif" style={{ fontSize: 18 }}>{t}</span>
                    <span className="mono" style={{ fontSize: 11, color: "var(--text-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{b}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{
            border: "1px solid var(--line)", padding: 32,
            position: "sticky", top: 100, height: "fit-content"
          }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Start an enquiry</div>
            <p style={{ fontSize: 15, color: "var(--text-muted)", margin: "0 0 24px" }}>
              Share the vehicle, your residency status, and a target structure. We'll prepare introductions to two or three relevant partners.
            </p>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={() => onEnquire("Finance enquiry")}>
              Finance enquiry <Icon name="arrow" size={12} />
            </button>
            <a href="tel:+97143232999" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: 12 }}>
              <Icon name="phone" size={12} /> Call a specialist
            </a>
          </div>
        </div>
        <style>{`@media (max-width: 1000px) { .finance-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </section>
    </div>
  );
}

// ── CONTACT ───────────────────────────────────────────────────────
function ContactPage({ onEnquire }) {
  return (
    <div className="paper" style={{ minHeight: "100vh" }}>
      <section style={{ paddingTop: 140, paddingBottom: 48, borderBottom: "1px solid var(--rule)" }}>
        <div className="wrap">
          <div className="eyebrow eyebrow-paper" style={{ marginBottom: 18 }}>Contact</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)", margin: 0, maxWidth: "14ch" }}>
            Visit, call, <em>or write.</em>
          </h1>
        </div>
      </section>
      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }} className="contact-grid">
          <div>
            <div className="eyebrow eyebrow-paper" style={{ marginBottom: 16 }}>Showroom</div>
            <div className="serif" style={{ fontSize: 30, fontWeight: 500, lineHeight: 1.3, marginBottom: 28 }}>
              507 Sheikh Zayed Road<br/>near Mashreq Bank<br/>Al Quoz 3, Dubai, UAE
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, fontSize: 16 }}>
              <a href="tel:+97143232999" style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Icon name="phone" size={16} /> <span className="num">+971 4 323 2999</span>
              </a>
              <a href="mailto:sales@vipmotors.ae" style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Icon name="mail" size={16} /> sales@vipmotors.ae
              </a>
              <button onClick={() => onEnquire("WhatsApp")} style={{ display: "flex", alignItems: "center", gap: 12, background: "none", border: 0, padding: 0, cursor: "pointer", color: "inherit", textAlign: "left" }}>
                <Icon name="whatsapp" size={18} /> <span>WhatsApp <em style={{ color: "var(--muted-on-paper)", fontStyle: "italic", fontSize: 13 }}>— number confirm before launch</em></span>
              </button>
            </div>
            <div style={{ marginTop: 48 }}>
              <div className="eyebrow eyebrow-paper" style={{ marginBottom: 18 }}>Hours</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 16 }}>
                {[
                  ["Monday – Thursday", "10:00 – 21:00"],
                  ["Friday", "14:00 – 21:00"],
                  ["Saturday", "10:00 – 21:00"],
                  ["Sunday", "Closed"]
                ].map(([d, h]) => (
                  <div key={d} style={{ display: "flex", justifyContent: "space-between", paddingBottom: 10, borderBottom: "1px solid var(--rule)" }}>
                    <span>{d}</span>
                    <span className="num" style={{ color: h === "Closed" ? "var(--muted-on-paper)" : "var(--ink-on-paper)" }}>{h}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div>
            <div style={{
              aspectRatio: "4/5",
              background: `
                linear-gradient(135deg, rgba(217,10,44,0.06), transparent 50%),
                repeating-linear-gradient(0deg, var(--rule), var(--rule) 1px, transparent 1px, transparent 80px),
                repeating-linear-gradient(90deg, var(--rule), var(--rule) 1px, transparent 1px, transparent 80px),
                var(--paper-2)`,
              position: "relative",
              display: "flex", alignItems: "center", justifyContent: "center"
            }}>
              <div style={{ textAlign: "center" }}>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  background: "var(--accent)", color: "#fff",
                  padding: "12px 16px",
                  fontFamily: "var(--mono)", fontSize: 11,
                  letterSpacing: "0.18em", textTransform: "uppercase"
                }}>
                  <Icon name="pin" size={14} /> Sheikh Zayed Rd, Al Quoz 3
                </div>
                <div className="mono" style={{ marginTop: 18, fontSize: 11, color: "var(--muted-on-paper)", letterSpacing: "0.18em" }}>
                  MAP EMBED · COORDS TBC
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, InventoryPage, VehiclePage, SellPage, AboutPage, FinancePage, ContactPage });