/* Inventory + Vehicle Detail pages */

/* ============== INVENTORY ============== */
function InventoryPage({ navigate, initialFilter, openEnquiry }) {
  const [filters, setFilters] = useStateP({
    brand: initialFilter?.brand || "",
    body: "",
    fuel: "",
    priceMax: 1000000,
    sort: "featured",
    search: "",
  });
  const [view, setView] = useStateP("grid"); // grid | list

  const filtered = useMemoP(() => {
    let list = VEHICLES.filter(v => {
      if (filters.brand && v.make !== filters.brand) return false;
      if (filters.body && v.body !== filters.body) return false;
      if (filters.fuel && v.fuel !== filters.fuel) return false;
      if (filters.search) {
        const q = filters.search.toLowerCase();
        const hay = `${v.make} ${v.model} ${v.variant} ${v.year}`.toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    });
    if (filters.sort === "year-new") list.sort((a, b) => b.year - a.year);
    if (filters.sort === "year-old") list.sort((a, b) => a.year - b.year);
    if (filters.sort === "price-high") list.sort((a, b) => (b.price || 0) - (a.price || 0));
    if (filters.sort === "price-low") list.sort((a, b) => (a.price || 9e9) - (b.price || 9e9));
    if (filters.sort === "mileage") list.sort((a, b) => a.mileage - b.mileage);
    return list;
  }, [filters]);

  const update = (k, v) => setFilters(f => ({ ...f, [k]: v }));
  const clearAll = () => setFilters({ brand: "", body: "", fuel: "", priceMax: 1000000, sort: "featured", search: "" });

  return (
    <div className="page-enter" style={{ paddingTop: 76 }}>
      {/* Header */}
      <section style={{
        background: "var(--noir)",
        borderBottom: "1px solid var(--line)",
        paddingTop: 60, paddingBottom: 36,
      }}>
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="h-eyebrow">Inventory · {filtered.length} cars</div>
              <h1 className="h-display" style={{ fontSize: "clamp(48px, 7vw, 92px)", margin: "14px 0 0", lineHeight: 0.95 }}>
                The Floor.
              </h1>
              <p style={{ marginTop: 18, fontSize: 15, color: "var(--text-mute)", maxWidth: 560, lineHeight: 1.6 }}>
                Live stock rotates weekly. Pricing shown is private to the buyer on most cars — request a quote and we'll
                share spec sheets, history reports, and arrange a private viewing.
              </p>
            </div>
            <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
              <div className="h-mono-sm muted">Sort</div>
              <select className="unstyled-button" value={filters.sort} onChange={(e) => update("sort", e.target.value)}
                      style={{
                        background: "transparent", border: "1px solid var(--line)",
                        color: "var(--text)", padding: "10px 14px", fontFamily: "var(--mono)", fontSize: 11,
                        letterSpacing: "0.1em", textTransform: "uppercase",
                      }}>
                <option value="featured">Featured</option>
                <option value="year-new">Year ↓</option>
                <option value="year-old">Year ↑</option>
                <option value="price-high">Price ↓</option>
                <option value="price-low">Price ↑</option>
                <option value="mileage">Lowest Mileage</option>
              </select>
              <div style={{ display: "flex", border: "1px solid var(--line)" }}>
                {["grid", "list"].map(v => (
                  <button key={v} className="unstyled-button" onClick={() => setView(v)}
                          style={{
                            padding: "8px 14px", fontFamily: "var(--mono)", fontSize: 10.5,
                            letterSpacing: "0.12em", textTransform: "uppercase",
                            background: view === v ? "var(--gold)" : "transparent",
                            color: view === v ? "var(--noir)" : "var(--text)",
                          }}>{v}</button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Body */}
      <section style={{ background: "var(--noir)", paddingTop: 0, paddingBottom: 80 }}>
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 48 }} className="inv-layout">
          {/* SIDEBAR */}
          <aside style={{ position: "sticky", top: 100, alignSelf: "start", paddingTop: 36 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
              <div className="h-eyebrow">Refine</div>
              <button onClick={clearAll} className="unstyled-button h-mono-sm" style={{ color: "var(--text-mute)" }}>Clear</button>
            </div>

            <div className="field" style={{ marginBottom: 28 }}>
              <label>Search</label>
              <input value={filters.search} onChange={(e) => update("search", e.target.value)} placeholder="make, model, year…" />
            </div>

            <FilterGroup label="Make">
              {BRANDS.map(b => (
                <FilterChip key={b} active={filters.brand === b} onClick={() => update("brand", filters.brand === b ? "" : b)}>{b}</FilterChip>
              ))}
            </FilterGroup>
            <FilterGroup label="Body">
              {BODY_TYPES.map(b => (
                <FilterChip key={b} active={filters.body === b} onClick={() => update("body", filters.body === b ? "" : b)}>{b}</FilterChip>
              ))}
            </FilterGroup>
            <FilterGroup label="Fuel">
              {FUELS.map(f => (
                <FilterChip key={f} active={filters.fuel === f} onClick={() => update("fuel", filters.fuel === f ? "" : f)}>{f}</FilterChip>
              ))}
            </FilterGroup>

            <div style={{
              marginTop: 36, padding: 20, border: "1px solid var(--gold)",
              background: "rgba(196,162,74,0.05)",
            }}>
              <div className="h-eyebrow" style={{ marginBottom: 8 }}>Can't see it?</div>
              <p style={{ fontSize: 13, color: "var(--text-mute)", margin: "0 0 14px", lineHeight: 1.6 }}>
                We source bespoke. Tell us what you're after and we'll find it.
              </p>
              <button className="btn btn--sm btn--ghost btn--block" onClick={() => openEnquiry({ mode: "contact" })}>Source a Car</button>
            </div>
          </aside>

          {/* GRID */}
          <div>
            {/* Notice */}
            <div style={{
              marginTop: 24, marginBottom: 28, padding: "14px 18px",
              border: "1px dashed var(--gold-deep)", background: "rgba(196,162,74,0.04)",
              fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--text-mute)", lineHeight: 1.6,
              letterSpacing: "0.04em",
            }}>
              <span style={{ color: "var(--gold)" }}>Note —</span> showing 17 archival demo cars from the 2014–2018 floor.
              Live DMS feed connects on production launch; pricing on request is the default.
            </div>

            {view === "grid" ? (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="inv-grid">
                {filtered.map(v => <VehicleCard key={v.id} v={v} onClick={() => navigate("vehicle", v)} />)}
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 0, border: "1px solid var(--line)" }}>
                {filtered.map((v, i) => <VehicleRow key={v.id} v={v} onClick={() => navigate("vehicle", v)} last={i === filtered.length - 1} />)}
              </div>
            )}

            {filtered.length === 0 && (
              <div style={{ padding: 80, textAlign: "center", border: "1px solid var(--line)" }}>
                <div className="h-eyebrow">No matches</div>
                <div className="h-display" style={{ fontSize: 32, marginTop: 14 }}>Nothing here. Yet.</div>
                <p style={{ color: "var(--text-mute)", maxWidth: 420, margin: "16px auto" }}>
                  Adjust the filters, or let us source one for you.
                </p>
                <button onClick={clearAll} className="btn btn--ghost" style={{ marginTop: 8 }}>Reset Filters</button>
              </div>
            )}
          </div>
        </div>
        <style>{`
          @media(max-width:960px){.inv-layout{grid-template-columns:1fr !important}.inv-layout aside{position:static !important}}
          @media(max-width:1200px){.inv-grid{grid-template-columns:repeat(2,1fr)!important}}
          @media(max-width:640px){.inv-grid{grid-template-columns:1fr!important}}
        `}</style>
      </section>
    </div>
  );
}

function FilterGroup({ label, children }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div className="h-mono-sm muted" style={{ marginBottom: 12 }}>{label}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{children}</div>
    </div>
  );
}
function FilterChip({ active, onClick, children }) {
  return (
    <button className="unstyled-button" onClick={onClick}
            style={{
              padding: "6px 12px",
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em",
              border: active ? "1px solid var(--gold)" : "1px solid var(--line)",
              background: active ? "var(--gold)" : "transparent",
              color: active ? "var(--noir)" : "var(--text)",
              transition: "all .15s",
            }}>{children}</button>
  );
}

function VehicleRow({ v, onClick, last }) {
  return (
    <button className="unstyled-button" onClick={onClick}
            style={{
              display: "grid", gridTemplateColumns: "200px 1fr auto auto auto auto",
              gap: 28, alignItems: "center",
              padding: 20,
              borderBottom: last ? "none" : "1px solid var(--line)",
              transition: "background .2s",
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = "rgba(196,162,74,0.04)"}
            onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
      <img src={v.img} alt="" style={{ width: "100%", aspectRatio: "16/10", objectFit: "cover" }} />
      <div>
        <div className="h-mono-sm muted">{v.id.toUpperCase()} · {v.year}</div>
        <div className="h-display" style={{ fontSize: 22, marginTop: 4 }}>
          {v.make} {v.model} <span style={{ fontStyle: "italic", color: "var(--text-mute)" }}>{v.variant}</span>
        </div>
      </div>
      <div className="h-mono" style={{ color: "var(--text-mute)" }} className="tabular">
        <div className="h-mono-sm muted">Mileage</div>
        <div style={{ color: "var(--text)" }}>{v.mileage.toLocaleString()} km</div>
      </div>
      <div className="h-mono" style={{ color: "var(--text-mute)" }}>
        <div className="h-mono-sm muted">Power</div>
        <div style={{ color: "var(--text)" }}>{v.power}</div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div className="h-mono-sm muted">Price</div>
        {v.askPrice
          ? <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--gold)", letterSpacing: "0.14em", textTransform: "uppercase" }}>Request</div>
          : <div className="h-display tabular" style={{ fontSize: 20 }}>AED {v.price.toLocaleString()}</div>}
      </div>
      <div style={{ color: "var(--gold)", fontSize: 22 }}>→</div>
    </button>
  );
}

/* ============== VEHICLE DETAIL ============== */
function VehicleDetailPage({ vehicle, navigate, openEnquiry }) {
  const v = vehicle;
  const [activeImg, setActiveImg] = useStateP(0);
  if (!v) return null;
  useEffectP(() => { window.scrollTo(0, 0); setActiveImg(0); }, [v.id]);

  return (
    <div className="page-enter" style={{ paddingTop: 76, background: "var(--noir)" }}>
      {/* Breadcrumb */}
      <div className="container-wide" style={{
        paddingTop: 28, paddingBottom: 14,
        fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
        color: "var(--text-mute)",
      }}>
        <button onClick={() => navigate("home")} className="unstyled-button">Home</button>
        <span style={{ margin: "0 10px", color: "var(--text-dim)" }}>/</span>
        <button onClick={() => navigate("inventory")} className="unstyled-button">Inventory</button>
        <span style={{ margin: "0 10px", color: "var(--text-dim)" }}>/</span>
        <span style={{ color: "var(--gold)" }}>{v.id.toUpperCase()}</span>
      </div>

      {/* Gallery + side card */}
      <section className="container-wide" style={{
        display: "grid", gridTemplateColumns: "1fr 380px", gap: 36,
        paddingTop: 14, paddingBottom: 60,
      }} className="vd-grid">
        <div>
          {/* Main image */}
          <div style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden", background: "#1A1D22" }}>
            <img src={v.gallery[activeImg]} alt={`${v.make} ${v.model}`}
                 style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{
              position: "absolute", top: 16, left: 16,
              fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em",
              background: "rgba(11,13,16,0.78)", color: "var(--gold)",
              padding: "7px 12px", textTransform: "uppercase",
            }}>
              {v.id.toUpperCase()} · {v.year}
            </div>
            <div style={{
              position: "absolute", bottom: 16, right: 16, display: "flex", gap: 8,
            }}>
              {v.gallery.length > 1 && (
                <>
                  <button onClick={() => setActiveImg(i => Math.max(0, i - 1))} className="unstyled-button"
                          style={{ width: 40, height: 40, background: "rgba(11,13,16,0.7)", color: "white", border: "1px solid var(--line)" }}>←</button>
                  <button onClick={() => setActiveImg(i => Math.min(v.gallery.length - 1, i + 1))} className="unstyled-button"
                          style={{ width: 40, height: 40, background: "rgba(11,13,16,0.7)", color: "white", border: "1px solid var(--line)" }}>→</button>
                </>
              )}
            </div>
          </div>
          {v.gallery.length > 1 && (
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(v.gallery.length, 6)}, 1fr)`, gap: 8, marginTop: 8 }}>
              {v.gallery.map((g, i) => (
                <button key={i} className="unstyled-button" onClick={() => setActiveImg(i)}
                        style={{ aspectRatio: "16/10", overflow: "hidden", opacity: i === activeImg ? 1 : 0.5, border: i === activeImg ? "1px solid var(--gold)" : "1px solid transparent" }}>
                  <img src={g} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </button>
              ))}
            </div>
          )}

          {/* Spec table */}
          <div style={{ marginTop: 60 }}>
            <div className="h-eyebrow" style={{ marginBottom: 18 }}>Specification</div>
            <div className="h-display" style={{ fontSize: 36, lineHeight: 1.1 }}>The numbers.</div>
            <div style={{
              marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
              border: "1px solid var(--line)",
            }} className="spec-grid">
              {[
                ["Engine", v.engine],
                ["Power", v.power],
                ["Torque", v.torque],
                ["0 – 100 km/h", v.zeroToHundred],
                ["Top Speed", v.topSpeed],
                ["Transmission", v.transmission],
                ["Drivetrain", v.drivetrain],
                ["Fuel", v.fuel],
                ["Body", v.body],
                ["Year", v.year],
                ["Mileage", `${v.mileage.toLocaleString()} km`],
                ["Exterior", v.exterior],
                ["Interior", v.interior],
                ["Location", v.location],
              ].map(([k, val], i, arr) => (
                <div key={k} style={{
                  display: "flex", justifyContent: "space-between", alignItems: "baseline",
                  padding: "16px 20px",
                  borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                  borderBottom: i < arr.length - 2 ? "1px solid var(--line)" : "none",
                  gap: 16,
                }}>
                  <span className="h-mono-sm muted">{k}</span>
                  <span className="tabular" style={{ textAlign: "right", fontSize: 14 }}>{val}</span>
                </div>
              ))}
            </div>
            <style>{`@media(max-width:520px){.spec-grid{grid-template-columns:1fr !important}.spec-grid>div{border-right:none !important}}`}</style>
          </div>

          {/* Finance estimate */}
          <FinanceEstimate v={v} navigate={navigate} />

          {/* Provenance */}
          <div style={{ marginTop: 60 }}>
            <div className="h-eyebrow" style={{ marginBottom: 18 }}>Provenance</div>
            <div className="h-display" style={{ fontSize: 36, lineHeight: 1.1, marginBottom: 24 }}>What we know.</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="prov-grid">
              {[
                { l: "Import", v: "GCC Spec — UAE Title" },
                { l: "Service History", v: "Full main-dealer history on file" },
                { l: "Owners", v: "Single registered keeper from new" },
              ].map(c => (
                <div key={c.l} style={{ padding: 22, border: "1px solid var(--line)", background: "var(--ink)" }}>
                  <div className="h-mono-sm" style={{ color: "var(--gold)" }}>{c.l}</div>
                  <div style={{ marginTop: 10, lineHeight: 1.5 }}>{c.v}</div>
                </div>
              ))}
            </div>
            <style>{`@media(max-width:760px){.prov-grid{grid-template-columns:1fr !important}}`}</style>
            <p style={{ marginTop: 18, fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.04em" }}>
              Provenance details are confirmed in writing with the buyer ahead of payment.
            </p>
          </div>
        </div>

        {/* SIDE CARD */}
        <aside style={{ position: "sticky", top: 100, alignSelf: "start" }}>
          <div style={{ background: "var(--ink)", border: "1px solid var(--gold)" }}>
            <div style={{ padding: 28, borderBottom: "1px solid var(--line)" }}>
              <div className="h-mono-sm" style={{ color: "var(--gold)" }}>{v.year} · {v.make}</div>
              <h1 className="h-display" style={{
                fontSize: 38, margin: "10px 0 4px", lineHeight: 1.05, letterSpacing: "-0.01em",
              }}>{v.model}</h1>
              <div style={{ fontFamily: "var(--display)", fontSize: 18, fontStyle: "italic", color: "var(--text-mute)" }}>{v.variant}</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 18 }}>
                {v.tags.map(t => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
            <div style={{ padding: 28, borderBottom: "1px solid var(--line)" }}>
              <div className="h-mono-sm muted">Price</div>
              {v.askPrice ? (
                <div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 14, color: "var(--gold)", letterSpacing: "0.16em", marginTop: 8, textTransform: "uppercase" }}>
                    Request Price
                  </div>
                  <div style={{ fontSize: 13, color: "var(--text-mute)", marginTop: 8, lineHeight: 1.5 }}>
                    Pricing is shared privately with serious enquiries — typically within the hour.
                  </div>
                </div>
              ) : (
                <div>
                  <div className="h-display tabular" style={{ fontSize: 42, marginTop: 6, lineHeight: 1 }}>
                    AED {v.price.toLocaleString()}
                  </div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-mute)", marginTop: 8, letterSpacing: "0.06em" }}>
                    incl. UAE VAT · Export pricing on request
                  </div>
                </div>
              )}
            </div>
            <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 10 }}>
              <button className="btn btn--block" onClick={() => openEnquiry({ vehicle: v, mode: v.askPrice ? "price" : "enquire" })}>
                {v.askPrice ? "Request Price →" : "Enquire →"}
              </button>
              <button className="btn btn--ghost btn--block" onClick={() => openEnquiry({ vehicle: v, mode: "viewing" })}>Book Viewing</button>
              <button className="btn btn--whatsapp btn--block">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.7-1.4-1.6-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.2-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.9 2.3 1 2.5c.1.2 1.7 2.6 4.2 3.6 1.5.6 2.1.7 2.8.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.3z"/></svg>
                WhatsApp Advisor
              </button>
            </div>
            <div style={{ padding: "20px 28px", borderTop: "1px solid var(--line)", background: "rgba(196,162,74,0.04)" }}>
              <div className="h-mono-sm muted" style={{ marginBottom: 8 }}>Your advisor</div>
              <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                <div style={{
                  width: 42, height: 42, borderRadius: "50%",
                  background: "linear-gradient(135deg, var(--gold), var(--gold-deep))",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--display)", fontSize: 18, color: "var(--noir)", fontWeight: 600,
                }}>MR</div>
                <div>
                  <div style={{ fontSize: 14 }}>Mohamed Redha</div>
                  <div className="h-mono-sm muted">Founder · Senior Advisor</div>
                </div>
              </div>
            </div>
          </div>
        </aside>
        <style>{`@media(max-width:960px){.vd-grid{grid-template-columns:1fr !important}.vd-grid aside{position:static !important}}`}</style>
      </section>

      {/* Related */}
      <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="container-wide">
          <SectionHead eyebrow="Also on the floor" title="You may also like." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="rel-grid">
            {VEHICLES.filter(x => x.id !== v.id).slice(0, 3).map(rv => (
              <VehicleCard key={rv.id} v={rv} onClick={() => navigate("vehicle", rv)} />
            ))}
          </div>
          <style>{`@media(max-width:900px){.rel-grid{grid-template-columns:1fr !important}}`}</style>
        </div>
      </section>
    </div>
  );
}

function FinanceEstimate({ v, navigate }) {
  const basePrice = v.price || 350000;
  const [down, setDown] = useStateP(20);
  const [term, setTerm] = useStateP(48);
  const downAmt = Math.round(basePrice * down / 100);
  const principal = basePrice - downAmt;
  const monthlyRate = 0.0299 / 12;
  const monthly = principal * monthlyRate * Math.pow(1 + monthlyRate, term) / (Math.pow(1 + monthlyRate, term) - 1);
  return (
    <div style={{ marginTop: 60, padding: 36, border: "1px solid var(--line)", background: "var(--ink)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 6, gap: 16, flexWrap: "wrap" }}>
        <div>
          <div className="h-eyebrow">Finance · Indicative</div>
          <div className="h-display" style={{ fontSize: 32, marginTop: 10 }}>From <span className="tabular">AED {Math.round(monthly).toLocaleString()}</span> / mo</div>
        </div>
        <div style={{
          fontFamily: "var(--mono)", fontSize: 10, color: "var(--text-mute)",
          letterSpacing: "0.08em", maxWidth: 260, lineHeight: 1.5, textAlign: "right",
        }}>
          Illustrative only — at 2.99 % p.a. Real rate subject to approval, residency & income.
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 24 }} className="fin-grid">
        <div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className="h-mono-sm muted">Down payment</span>
            <span className="tabular">{down}% · AED {downAmt.toLocaleString()}</span>
          </div>
          <input type="range" min={10} max={50} step={5} value={down} onChange={(e) => setDown(+e.target.value)}
                 style={{ width: "100%", marginTop: 8, accentColor: "var(--gold)" }} />
        </div>
        <div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className="h-mono-sm muted">Term</span>
            <span className="tabular">{term} months</span>
          </div>
          <input type="range" min={12} max={60} step={6} value={term} onChange={(e) => setTerm(+e.target.value)}
                 style={{ width: "100%", marginTop: 8, accentColor: "var(--gold)" }} />
        </div>
      </div>
      <div style={{ marginTop: 22, display: "flex", gap: 12, flexWrap: "wrap" }}>
        <button className="btn btn--sm" onClick={() => navigate("finance")}>Apply for Finance →</button>
      </div>
      <style>{`@media(max-width:560px){.fin-grid{grid-template-columns:1fr !important}}`}</style>
    </div>
  );
}

Object.assign(window, { InventoryPage, VehicleDetailPage });