/* Sell / Finance / About / Contact / Metaverse pages */

/* ============== SELL YOUR CAR ============== */
function SellPage({ navigate, openEnquiry }) {
  const [step, setStep] = useStateP(1);
  const [form, setForm] = useStateP({
    make: "", model: "", year: "", mileage: "", condition: "Excellent",
    name: "", phone: "", email: "", notes: "",
  });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div className="page-enter" style={{ paddingTop: 76, background: "var(--noir)" }}>
      {/* Hero */}
      <section style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)" }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(media/showroom-photo-02.webp)",
          backgroundSize: "cover", backgroundPosition: "center",
          opacity: 0.35,
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(11,13,16,0.6), rgba(11,13,16,0.95))",
        }} />
        <div className="container-wide" style={{ position: "relative", paddingTop: 100, paddingBottom: 80 }}>
          <div className="h-eyebrow">Sell · Trade-in · Valuation</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 9vw, 132px)", margin: "20px 0 0", lineHeight: 0.9, letterSpacing: "-0.02em", maxWidth: 1100 }}>
            Tell us about<br />
            <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>your car.</span>
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.6, color: "var(--text-mute)", maxWidth: 580 }}>
            A senior buyer will give you a no-obligation indicative offer within 24 hours. Bring it in for a 30-minute
            inspection, leave with payment the same day.
          </p>
        </div>
      </section>

      {/* Process strip */}
      <section style={{ background: "var(--ink-2)", borderBottom: "1px solid var(--line)" }}>
        <div className="container-wide" style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
        }} className="proc-grid">
          {[
            { n: "01", t: "Submit details", d: "Make, model, mileage, condition. Photos help." },
            { n: "02", t: "Indicative offer", d: "Range delivered within 24 hours via call or WhatsApp." },
            { n: "03", t: "30-min inspection", d: "Drop the car at Al Quoz. Espresso provided." },
            { n: "04", t: "Cash same day", d: "Settlement in AED via transfer, or held until your new car is delivered." },
          ].map((s, i, a) => (
            <div key={s.n} style={{
              padding: "40px 28px",
              borderRight: i < a.length - 1 ? "1px solid var(--line)" : "none",
            }}>
              <div className="h-display tabular" style={{ fontSize: 64, color: "var(--gold)", lineHeight: 1 }}>{s.n}</div>
              <div className="h-display" style={{ fontSize: 22, marginTop: 18 }}>{s.t}</div>
              <p style={{ marginTop: 8, fontSize: 13.5, color: "var(--text-mute)", lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
        <style>{`@media(max-width:900px){.proc-grid{grid-template-columns:1fr 1fr !important}.proc-grid>div:nth-child(odd){border-right:1px solid var(--line) !important}.proc-grid>div:nth-child(even){border-right:none !important}}@media(max-width:540px){.proc-grid{grid-template-columns:1fr !important}.proc-grid>div{border-right:none !important;border-bottom:1px solid var(--line)}}`}</style>
      </section>

      {/* Form */}
      <section className="section">
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 60 }} className="sell-layout">
          <div>
            <div className="h-eyebrow">Valuation Request</div>
            <h2 className="h-display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: "14px 0 0" }}>
              Three steps. Five minutes.
            </h2>

            <div style={{ display: "flex", gap: 8, marginTop: 36, marginBottom: 36 }}>
              {[1, 2, 3].map(n => (
                <div key={n} style={{ flex: 1, height: 3, background: n <= step ? "var(--gold)" : "var(--line)", transition: "background .3s" }} />
              ))}
            </div>

            {step === 1 && (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }} className="ff-grid">
                <div className="field"><label>Make</label><input value={form.make} onChange={(e) => update("make", e.target.value)} placeholder="e.g. Mercedes-Benz" /></div>
                <div className="field"><label>Model</label><input value={form.model} onChange={(e) => update("model", e.target.value)} placeholder="e.g. S 500 Coupé" /></div>
                <div className="field"><label>Year</label><input type="number" value={form.year} onChange={(e) => update("year", e.target.value)} placeholder="2019" /></div>
                <div className="field"><label>Mileage (km)</label><input type="number" value={form.mileage} onChange={(e) => update("mileage", e.target.value)} placeholder="45,000" /></div>
                <div className="field" style={{ gridColumn: "1 / -1" }}>
                  <label>Condition</label>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6 }}>
                    {["Concours", "Excellent", "Good", "Fair", "Project"].map(c => (
                      <FilterChip key={c} active={form.condition === c} onClick={() => update("condition", c)}>{c}</FilterChip>
                    ))}
                  </div>
                </div>
              </div>
            )}
            {step === 2 && (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }} className="ff-grid">
                <div className="field"><label>Your name</label><input value={form.name} onChange={(e) => update("name", e.target.value)} /></div>
                <div className="field"><label>Phone / WhatsApp</label><input type="tel" value={form.phone} onChange={(e) => update("phone", e.target.value)} placeholder="+971" /></div>
                <div className="field" style={{ gridColumn: "1 / -1" }}><label>Email</label><input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} /></div>
                <div className="field" style={{ gridColumn: "1 / -1" }}>
                  <label>Notes — service history, modifications, accident record</label>
                  <textarea rows={4} value={form.notes} onChange={(e) => update("notes", e.target.value)} placeholder="Anything relevant…" />
                </div>
                <div style={{ gridColumn: "1 / -1", padding: "20px 24px", border: "1px dashed var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
                  <div>
                    <div className="h-mono-sm" style={{ color: "var(--gold)" }}>Photos · Optional</div>
                    <div style={{ fontSize: 13, color: "var(--text-mute)", marginTop: 6 }}>Drag 5–10 photos here, or send via WhatsApp after submit.</div>
                  </div>
                  <button className="btn btn--sm btn--ghost" type="button">Choose Files</button>
                </div>
              </div>
            )}
            {step === 3 && (
              <div style={{ padding: 36, border: "1px solid var(--gold)", background: "rgba(196,162,74,0.05)" }}>
                <div className="h-eyebrow">Received</div>
                <div className="h-display" style={{ fontSize: 36, marginTop: 14 }}>We have your car.</div>
                <p style={{ marginTop: 14, color: "var(--text-mute)", lineHeight: 1.6, fontSize: 15 }}>
                  Reference <span className="tabular gold">DOW-VAL-{Math.floor(Math.random() * 90000 + 10000)}</span>.
                  Expect a call or WhatsApp from a senior buyer within 24 hours. If you'd like to talk now —
                </p>
                <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                  <button className="btn btn--whatsapp">Continue on WhatsApp</button>
                  <button className="btn btn--ghost" onClick={() => { setStep(1); setForm({ make: "", model: "", year: "", mileage: "", condition: "Excellent", name: "", phone: "", email: "", notes: "" }); }}>Submit Another</button>
                </div>
              </div>
            )}

            {step < 3 && (
              <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
                {step > 1 && <button className="btn btn--ghost" onClick={() => setStep(step - 1)}>← Back</button>}
                <button className="btn" onClick={() => setStep(step + 1)} style={{ marginLeft: "auto" }}>
                  {step === 1 ? "Continue →" : "Submit for Valuation →"}
                </button>
              </div>
            )}
          </div>

          <aside>
            <div style={{ padding: 28, background: "var(--ink)", border: "1px solid var(--line)" }}>
              <div className="h-eyebrow">We buy</div>
              <div style={{ marginTop: 12, lineHeight: 1.7, fontSize: 14 }}>
                Exotic, luxury, performance, sport saloons, classics, and clean pre-owned. Any age, any condition.
              </div>
            </div>
            <div style={{ marginTop: 16, padding: 28, background: "var(--ink)", border: "1px solid var(--line)" }}>
              <div className="h-eyebrow">What we don't do</div>
              <div style={{ marginTop: 12, lineHeight: 1.7, fontSize: 14, color: "var(--text-mute)" }}>
                Lowball offers, hidden deductions on inspection day, or pressure tactics. If the number's wrong for you,
                we shake hands and you keep the car.
              </div>
            </div>
            <div style={{ marginTop: 16, padding: 28, background: "var(--noir)", border: "1px solid var(--gold)" }}>
              <div className="h-eyebrow">Or skip the form</div>
              <p style={{ marginTop: 12, fontSize: 14, color: "var(--text-mute)" }}>Send photos and reg number directly:</p>
              <button className="btn btn--whatsapp btn--sm btn--block" style={{ marginTop: 16 }}>WhatsApp · +971 52 790 0000</button>
            </div>
          </aside>
        </div>
        <style>{`@media(max-width:900px){.sell-layout{grid-template-columns:1fr !important}.ff-grid{grid-template-columns:1fr !important}}`}</style>
      </section>
    </div>
  );
}

/* ============== FINANCE ============== */
function FinancePage({ navigate, openEnquiry }) {
  const [carPrice, setCarPrice] = useStateP(350000);
  const [down, setDown] = useStateP(20);
  const [term, setTerm] = useStateP(48);
  const [rate, setRate] = useStateP(2.99);

  const downAmt = Math.round(carPrice * down / 100);
  const principal = carPrice - downAmt;
  const monthlyRate = (rate / 100) / 12;
  const monthly = principal * monthlyRate * Math.pow(1 + monthlyRate, term) / (Math.pow(1 + monthlyRate, term) - 1);
  const total = monthly * term + downAmt;

  return (
    <div className="page-enter" style={{ paddingTop: 76, background: "var(--noir)" }}>
      {/* Hero */}
      <section style={{ padding: "100px 0 60px", borderBottom: "1px solid var(--line)" }}>
        <div className="container-wide" style={{ maxWidth: 1100 }}>
          <div className="h-eyebrow">Finance · Leasing · Export</div>
          <h1 className="h-display" style={{
            fontSize: "clamp(56px, 9vw, 132px)", margin: "20px 0 0",
            lineHeight: 0.9, letterSpacing: "-0.02em",
          }}>
            Drive sooner.<br />
            <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>Pay smarter.</span>
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.6, color: "var(--text-mute)", maxWidth: 620 }}>
            We work with UAE-based banks and private lenders to arrange finance on most cars on the floor — including
            options for self-employed clients, new UAE residents, and credit profiles that mainstream dealers won't touch.
          </p>
        </div>
      </section>

      {/* Calculator + sidebar */}
      <section className="section">
        <div className="container-wide" style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60,
        }} className="fin-layout">
          <div>
            <SectionHead eyebrow="Calculator · Indicative" title="What it might cost." sub="Estimates only. Real rates depend on lender, credit profile, term, and residency status." />
            <div style={{ background: "var(--ink)", border: "1px solid var(--gold)", padding: 36 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }} className="calc-grid">
                <Slider label="Car price (AED)" value={carPrice} display={`AED ${carPrice.toLocaleString()}`}
                        min={50000} max={2000000} step={10000} onChange={setCarPrice} />
                <Slider label="Down payment" value={down} display={`${down}% · AED ${downAmt.toLocaleString()}`}
                        min={0} max={50} step={5} onChange={setDown} />
                <Slider label="Term (months)" value={term} display={`${term} months · ${(term / 12).toFixed(1)} yrs`}
                        min={12} max={72} step={6} onChange={setTerm} />
                <Slider label="Interest rate" value={rate} display={`${rate.toFixed(2)} % p.a.`}
                        min={2.49} max={9.99} step={0.25} onChange={setRate} />
              </div>
              <hr className="hairline" style={{ margin: "32px 0" }} />
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="calc-out">
                <Result label="Monthly payment" value={`AED ${Math.round(monthly).toLocaleString()}`} highlight />
                <Result label="Down payment" value={`AED ${downAmt.toLocaleString()}`} />
                <Result label="Total paid" value={`AED ${Math.round(total).toLocaleString()}`} />
              </div>
            </div>
            <p style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.04em" }}>
              * Illustrative — not a binding offer. Final rate subject to lender approval, KYC, and salary transfer or proof of income.
            </p>

            <SectionHead eyebrow="What we arrange" title="Options on the table." style={{ marginTop: 80 }} />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }} className="opt-grid">
              {[
                { t: "Standard auto loan", d: "12–60 months, 20% down, salary transfer or proof of income. Best published rates from 2.49 % p.a." },
                { t: "Balloon / residual", d: "Lower monthlies via a deferred balance. Useful for short-hold buyers or expected resale." },
                { t: "Lease-to-own", d: "Particularly suited to non-resident clients and corporate ownership structures." },
                { t: "Export finance", d: "Coordinated with shipping for Europe / Russia / Asia destinations. Documented in writing." },
              ].map(o => (
                <div key={o.t} style={{ padding: 28, background: "var(--ink)" }}>
                  <div className="h-display" style={{ fontSize: 22 }}>{o.t}</div>
                  <p style={{ marginTop: 12, color: "var(--text-mute)", lineHeight: 1.6, fontSize: 14 }}>{o.d}</p>
                </div>
              ))}
            </div>
          </div>

          <aside style={{ position: "sticky", top: 100, alignSelf: "start" }}>
            <div style={{ background: "var(--ink)", border: "1px solid var(--line)", padding: 28 }}>
              <div className="h-eyebrow">Apply</div>
              <div className="h-display" style={{ fontSize: 26, marginTop: 12 }}>5-minute application.</div>
              <form style={{ display: "flex", flexDirection: "column", gap: 22, marginTop: 22 }} onSubmit={(e) => { e.preventDefault(); openEnquiry({ mode: "contact" }); }}>
                <div className="field"><label>Name</label><input required /></div>
                <div className="field"><label>Phone / WhatsApp</label><input type="tel" required placeholder="+971" /></div>
                <div className="field"><label>Email</label><input type="email" required /></div>
                <div className="field"><label>Vehicle interest</label><input placeholder="e.g. Bentley Continental GT" /></div>
                <div className="field"><label>Monthly income (AED)</label><input type="number" placeholder="confidential" /></div>
                <div className="field">
                  <label>Residency</label>
                  <select>
                    <option>UAE Resident</option>
                    <option>GCC Resident</option>
                    <option>Non-resident (export buyer)</option>
                    <option>New UAE arrival</option>
                  </select>
                </div>
                <button type="submit" className="btn btn--block">Submit Application →</button>
                <div className="h-mono-sm muted" style={{ textAlign: "center" }}>Confidential · no impact on credit score</div>
              </form>
            </div>
          </aside>
        </div>
        <style>{`@media(max-width:960px){.fin-layout{grid-template-columns:1fr !important}.fin-layout aside{position:static !important}}@media(max-width:640px){.calc-grid,.calc-out,.opt-grid{grid-template-columns:1fr !important}}`}</style>
      </section>
    </div>
  );
}

function Slider({ label, value, display, min, max, step, onChange }) {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
        <span className="h-mono-sm muted">{label}</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--gold)" }} className="tabular">{display}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(+e.target.value)}
             style={{ width: "100%", accentColor: "var(--gold)" }} />
    </div>
  );
}
function Result({ label, value, highlight }) {
  return (
    <div>
      <div className="h-mono-sm muted">{label}</div>
      <div className={"h-display tabular"} style={{
        fontSize: highlight ? 36 : 24, marginTop: 6,
        color: highlight ? "var(--gold)" : "var(--text)",
      }}>
        {value}
      </div>
    </div>
  );
}

/* ============== ABOUT ============== */
function AboutPage({ navigate, openEnquiry }) {
  return (
    <div className="page-enter" style={{ paddingTop: 76 }}>
      {/* Hero */}
      <section style={{ position: "relative", height: "75vh", minHeight: 540, overflow: "hidden", borderBottom: "1px solid var(--line)" }}>
        <img src="media/showroom-interior.webp" alt="" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5,
        }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(11,13,16,0.5), rgba(11,13,16,0.95))" }} />
        <div className="container-wide" style={{ position: "relative", paddingTop: 140, paddingBottom: 80, height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
          <div className="h-eyebrow">About · Est. 2008</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 9vw, 140px)", margin: "20px 0 0", lineHeight: 0.9, letterSpacing: "-0.02em" }}>
            A Dubai<br />
            <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>showroom</span> — quietly.
          </h1>
        </div>
      </section>

      {/* Manifesto */}
      <section className="section" style={{ background: "var(--paper)", color: "var(--text-ink)" }}>
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80 }} className="man-grid">
          <div>
            <div className="h-eyebrow-mute" style={{ color: "var(--gold-deep)" }}>Manifesto</div>
            <div style={{ marginTop: 36, fontFamily: "var(--display)", fontSize: 14, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-ink-mute)" }}>
              I · II · III · IV
            </div>
          </div>
          <div style={{ fontFamily: "var(--display)", fontSize: "clamp(24px, 2.4vw, 32px)", lineHeight: 1.4, color: "var(--text-ink)" }}>
            <p style={{ margin: 0 }}>
              We've been buying and selling cars from a single showroom on Sheikh Zayed Road since 2008. We are independent —
              not franchised — and that means we choose every car on the floor, ourselves.
            </p>
            <p style={{ marginTop: 32 }}>
              We don't list every car. We list the cars we'd buy ourselves. Provenance comes before glamour, paperwork comes
              before promises, and the price is the price — settled privately, in conversation, with one buyer at a time.
            </p>
            <p style={{ marginTop: 32, fontStyle: "italic", color: "var(--gold-deep)" }}>
              "If a car is the wrong fit, we say so. The right car finds the right driver eventually."
            </p>
            <div style={{ marginTop: 16, fontFamily: "var(--body)", fontSize: 13, color: "var(--text-ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
              — Mohamed Redha · Founder
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section" style={{ background: "var(--noir)" }}>
        <div className="container-wide">
          <SectionHead eyebrow="Chronology" title="Eighteen years on Sheikh Zayed Road." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }} className="time-grid">
            {[
              { y: "2008", t: "Doors open", d: "A small private showroom opens off Sheikh Zayed Road, Exit 46." },
              { y: "2014", t: "Floor expands", d: "Move into the current Al Quoz space — capacity for 40+ cars on display." },
              { y: "2019", t: "Export desk", d: "First international clients ship from Dubai to Europe, Russia, and East Asia." },
              { y: "2022", t: "Virtual showroom", d: "Launch of the 3D & AR Metaverse app — view, rotate, request prices remotely." },
            ].map((s, i) => (
              <div key={s.y} style={{
                padding: "36px 24px 36px 0",
                paddingLeft: i === 0 ? 0 : 24,
                borderRight: i < 3 ? "1px solid var(--line)" : "none",
              }}>
                <div className="h-display tabular" style={{ fontSize: 56, color: "var(--gold)", lineHeight: 1 }}>{s.y}</div>
                <div className="h-display" style={{ fontSize: 22, marginTop: 18 }}>{s.t}</div>
                <p style={{ marginTop: 8, fontSize: 13.5, color: "var(--text-mute)", lineHeight: 1.6 }}>{s.d}</p>
              </div>
            ))}
          </div>
          <style>{`@media(max-width:760px){.time-grid{grid-template-columns:1fr 1fr !important}.time-grid>div:nth-child(2n){border-right:none !important}.time-grid>div{padding:24px !important}}@media(max-width:480px){.time-grid{grid-template-columns:1fr !important}.time-grid>div{border-right:none !important;border-bottom:1px solid var(--line)}}`}</style>
        </div>
      </section>

      {/* Founder block */}
      <section className="section" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)" }}>
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "center" }} className="founder-grid">
          <div style={{ position: "relative", aspectRatio: "4/5", background: "#222" }} className="ph">
            <div style={{ textAlign: "center" }}>
              Founder portrait<br />
              <span style={{ opacity: 0.6 }}>(client to supply)</span>
            </div>
          </div>
          <div>
            <div className="h-eyebrow">The Founder</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: "14px 0 0", lineHeight: 1.05 }}>
              Mohamed Redha Abdulla.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.7, color: "var(--text-mute)", maxWidth: 540 }}>
              Founder and Senior Advisor. An Emirati car enthusiast who turned a private collector's habit into one of Dubai's
              quieter — and most enduring — pre-owned luxury showrooms.
            </p>
            <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.7, color: "var(--text-mute)", maxWidth: 540 }}>
              Followed by a community of more than a quarter of a million on Instagram, he still personally handles the
              showroom's VIP private-client list.
            </p>
            <div style={{ display: "flex", gap: 16, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn" onClick={() => navigate("contact")}>Speak with Mohamed →</button>
              <a href="#" onClick={(e) => e.preventDefault()} className="link-gold h-mono-sm" style={{ alignSelf: "center" }}>Follow @dealsonwheelsuae</a>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:840px){.founder-grid{grid-template-columns:1fr !important}}`}</style>
      </section>
    </div>
  );
}

/* ============== CONTACT ============== */
function ContactPage({ navigate, openEnquiry }) {
  return (
    <div className="page-enter" style={{ paddingTop: 76, background: "var(--noir)" }}>
      <section style={{ padding: "100px 0 40px", borderBottom: "1px solid var(--line)" }}>
        <div className="container-wide">
          <div className="h-eyebrow">Visit · Call · Write</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 9vw, 132px)", margin: "20px 0 0", lineHeight: 0.9, letterSpacing: "-0.02em" }}>
            Find us.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }} className="con-grid">
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
              {[
                {
                  l: "Showroom",
                  v: <>Sheikh Zayed Road · Exit 46<br />After Oasis Centre, Al Quoz 1<br />Dubai · United Arab Emirates</>,
                  cta: { label: "Open in Maps →", action: () => {} },
                },
                {
                  l: "Phone",
                  v: <>+971 52 790 0000 <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--gold)", letterSpacing: "0.12em", textTransform: "uppercase", marginLeft: 8 }}>candidate · to confirm</span><br />sales@dealsonwheels.ae</>,
                  cta: { label: "Call now →", action: () => {} },
                },
                {
                  l: "WhatsApp",
                  v: <>Fastest channel. We reply within minutes during showroom hours.</>,
                  cta: { label: "Message on WhatsApp →", action: () => {}, whatsapp: true },
                },
                {
                  l: "Hours",
                  v: <>Monday – Saturday · 09:00 – 21:00 GST<br />Sunday closed</>,
                },
              ].map(c => (
                <div key={c.l} style={{ padding: 28, border: "1px solid var(--line)", background: "var(--ink)" }}>
                  <div className="h-eyebrow">{c.l}</div>
                  <div style={{ marginTop: 14, fontSize: 16, lineHeight: 1.7, color: "var(--text)" }}>{c.v}</div>
                  {c.cta && (
                    <button className={`btn btn--sm ${c.cta.whatsapp ? "btn--whatsapp" : "btn--ghost"}`}
                            onClick={c.cta.action} style={{ marginTop: 20 }}>
                      {c.cta.label}
                    </button>
                  )}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={{ padding: 28, background: "var(--ink)", border: "1px solid var(--gold)" }}>
              <div className="h-eyebrow">Send a message</div>
              <h3 className="h-display" style={{ fontSize: 28, marginTop: 12 }}>How can we help?</h3>
              <form style={{ display: "flex", flexDirection: "column", gap: 22, marginTop: 24 }} onSubmit={(e) => { e.preventDefault(); openEnquiry({ mode: "contact" }); }}>
                <div className="field"><label>Your name</label><input required /></div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }} className="cnt-grid">
                  <div className="field"><label>Phone / WhatsApp</label><input type="tel" required placeholder="+971" /></div>
                  <div className="field"><label>Email</label><input type="email" required /></div>
                </div>
                <div className="field">
                  <label>I'm interested in</label>
                  <select>
                    <option>A specific car on the floor</option>
                    <option>Selling / trading-in my car</option>
                    <option>Finance options</option>
                    <option>Sourcing a bespoke car</option>
                    <option>Press · partnerships</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="field"><label>Message</label><textarea rows={4} /></div>
                <button type="submit" className="btn btn--block">Send Message →</button>
                <style>{`@media(max-width:520px){.cnt-grid{grid-template-columns:1fr !important}}`}</style>
              </form>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:900px){.con-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* Map placeholder */}
      <section style={{ borderTop: "1px solid var(--line)" }}>
        <div style={{
          height: 420, position: "relative",
          background: `repeating-linear-gradient(45deg, #14171B, #14171B 14px, #181B20 14px, #181B20 28px)`,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{ textAlign: "center" }}>
            <div className="h-eyebrow" style={{ marginBottom: 14 }}>Map · Embed</div>
            <div className="h-display" style={{ fontSize: 32 }}>25.1295° N · 55.2147° E</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-mute)", marginTop: 12, letterSpacing: "0.12em" }}>
              Exact pin confirmed by client on launch · placeholder coords
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============== METAVERSE ============== */
function MetaversePage({ navigate, openEnquiry }) {
  return (
    <div className="page-enter" style={{ paddingTop: 76, background: "#040506" }}>
      <section style={{ position: "relative", overflow: "hidden", padding: "140px 0 100px" }}>
        <div style={{
          position: "absolute", inset: 0, opacity: 0.4,
          backgroundImage: "url(media/showroom-interior.webp)", backgroundSize: "cover", backgroundPosition: "center",
          filter: "blur(2px)",
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(60% 60% at 30% 50%, rgba(196,162,74,0.18), transparent 70%), linear-gradient(180deg, rgba(4,5,6,0.7), rgba(4,5,6,0.95))",
        }} />
        <div className="container-wide" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }} className="meta-hero">
          <div>
            <div className="h-eyebrow">Virtual Showroom · 3D · AR · App</div>
            <h1 className="h-display" style={{ fontSize: "clamp(56px, 9vw, 140px)", margin: "20px 0 0", lineHeight: 0.9, letterSpacing: "-0.02em" }}>
              Step inside.<br />
              <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>Anywhere.</span>
            </h1>
            <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.7, color: "var(--text-mute)", maxWidth: 580 }}>
              Walk the Al Quoz floor in 3D, rotate any car to scale in your driveway via AR, and request a price without
              picking up the phone. Open the app, you're there.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="#" onClick={(e) => e.preventDefault()} className="btn btn--lg">
                Get Android App →
              </a>
              <button className="btn btn--lg btn--ghost">iOS · Coming soon</button>
            </div>
          </div>
          <div>
            <div style={{ aspectRatio: "1/1", position: "relative" }}>
              <div style={{
                position: "absolute", inset: "10% 5%", border: "1px solid var(--gold-deep)",
                animation: "rot 18s linear infinite",
              }} />
              <div style={{
                position: "absolute", inset: "20% 12%", border: "1px dashed var(--gold)",
                animation: "rot 24s linear infinite reverse",
              }} />
              <div style={{
                position: "absolute", inset: "30% 18%",
                background: `url(media/vehicle-lamborghini-aventador-roadster.webp) center/cover`,
                clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)",
              }} />
              <div style={{
                position: "absolute", left: "50%", top: "50%",
                transform: "translate(-50%, -50%)",
                fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em",
                color: "var(--gold)", textAlign: "center",
              }}>
                ● LIVE · 3D ROTATE
              </div>
              <style>{`@keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:900px){.meta-hero{grid-template-columns:1fr !important}}`}</style>
      </section>

      <section className="section">
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)" }} className="meta-feat">
            {[
              { n: "01", t: "3D walkaround", d: "Every car on the floor, scanned and modelled — rotate, zoom, look under." },
              { n: "02", t: "AR at scale", d: "Drop a Bentley in your driveway, 1:1, before you fly in to see it." },
              { n: "03", t: "Request to buy", d: "Tap to request price, book a viewing, or get a finance estimate — without leaving the app." },
            ].map((f, i, a) => (
              <div key={f.n} style={{ padding: "44px 32px", borderRight: i < a.length - 1 ? "1px solid var(--line)" : "none" }}>
                <div className="h-display tabular" style={{ fontSize: 56, color: "var(--gold)" }}>{f.n}</div>
                <div className="h-display" style={{ fontSize: 26, marginTop: 18 }}>{f.t}</div>
                <p style={{ marginTop: 12, color: "var(--text-mute)", lineHeight: 1.6 }}>{f.d}</p>
              </div>
            ))}
          </div>
          <style>{`@media(max-width:760px){.meta-feat{grid-template-columns:1fr !important}.meta-feat>div{border-right:none !important;border-bottom:1px solid var(--line)}}`}</style>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SellPage, FinancePage, AboutPage, ContactPage, MetaversePage });