/* Page components — Deals on Wheels */
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

/* ============== HOME ============== */
function HomePage({ navigate, openEnquiry }) {
  const featured = VEHICLES.filter(v => v.featured);
  const hero = featured[0];
  const [heroIdx, setHeroIdx] = useStateP(0);
  const heroes = [featured[0], featured[1], featured[2]];

  useEffectP(() => {
    const t = setInterval(() => setHeroIdx(i => (i + 1) % heroes.length), 6500);
    return () => clearInterval(t);
  }, []);

  const cur = heroes[heroIdx];

  return (
    <div className="page-enter">
      {/* ---------- HERO ---------- */}
      <section style={{ position: "relative", height: "100vh", minHeight: 720, overflow: "hidden" }}>
        {heroes.map((h, i) => (
          <div key={h.id} style={{
            position: "absolute", inset: 0,
            backgroundImage: `url(${h.img})`,
            backgroundSize: "cover", backgroundPosition: "center",
            opacity: i === heroIdx ? 1 : 0,
            transition: "opacity 1.4s ease",
            transform: i === heroIdx ? "scale(1.05)" : "scale(1.12)",
            transitionProperty: "opacity, transform",
            transitionDuration: "1.4s, 8s",
          }} />
        ))}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(11,13,16,0.65) 0%, rgba(11,13,16,0.3) 30%, rgba(11,13,16,0.55) 70%, rgba(11,13,16,0.95) 100%)",
        }} />

        <div className="container-wide" style={{
          position: "relative", zIndex: 2, height: "100%",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          paddingTop: 160, paddingBottom: 56,
        }}>
          <div style={{ maxWidth: 920 }}>
            <div className="h-eyebrow fade-up" style={{ marginBottom: 20 }}>
              <span style={{ display: "inline-block", width: 28, height: 1, background: "var(--gold)", verticalAlign: "middle", marginRight: 14 }} />
              Featured · {cur.id.toUpperCase()}
            </div>
            <h1 className="h-display fade-up" style={{
              fontSize: "clamp(54px, 9vw, 124px)", margin: 0,
              lineHeight: 0.95, letterSpacing: "-0.02em",
            }}>
              {cur.year}<br />
              <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>{cur.make}</span><br />
              {cur.model}<span style={{ fontFamily: "var(--mono)", fontSize: "0.18em", letterSpacing: "0.2em", color: "var(--gold)", marginLeft: 18, verticalAlign: "middle" }}>{cur.variant}</span>
            </h1>
            <div className="fade-up" style={{
              display: "flex", gap: 36, marginTop: 36, flexWrap: "wrap",
              fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.1em",
              color: "var(--text-mute)",
            }}>
              <Stat label="Engine" value={cur.engine} />
              <Stat label="Power" value={cur.power} />
              <Stat label="0 – 100" value={cur.zeroToHundred} />
              <Stat label="Top Speed" value={cur.topSpeed} />
            </div>
            <div className="fade-up" style={{ display: "flex", gap: 12, marginTop: 44, flexWrap: "wrap" }}>
              <button className="btn btn--lg" onClick={() => navigate("vehicle", cur)}>View Vehicle →</button>
              <button className="btn btn--lg btn--ghost" onClick={() => openEnquiry({ vehicle: cur, mode: "viewing" })}>Book a Viewing</button>
            </div>
          </div>

          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            gap: 24, flexWrap: "wrap",
          }}>
            {/* Carousel dots */}
            <div style={{ display: "flex", gap: 28, alignItems: "center" }}>
              {heroes.map((h, i) => (
                <button key={h.id} className="unstyled-button" onClick={() => setHeroIdx(i)}
                        style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start", opacity: i === heroIdx ? 1 : 0.4, transition: "opacity .3s" }}>
                  <div style={{ width: 56, height: 1, background: i === heroIdx ? "var(--gold)" : "var(--text-mute)", position: "relative", overflow: "hidden" }}>
                    {i === heroIdx && (
                      <div style={{ position: "absolute", inset: 0, background: "var(--gold-soft)", animation: "heroProgress 6.5s linear" }} />
                    )}
                  </div>
                  <div className="h-mono-sm" style={{ color: i === heroIdx ? "var(--gold)" : "var(--text-mute)" }}>
                    {String(i + 1).padStart(2, "0")} / {String(heroes.length).padStart(2, "0")}
                  </div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 14, fontStyle: "italic" }}>
                    {h.make} {h.model}
                  </div>
                </button>
              ))}
            </div>

            <div style={{
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em",
              textTransform: "uppercase", color: "var(--text-mute)",
              borderLeft: "1px solid var(--gold)", paddingLeft: 18, maxWidth: 360, lineHeight: 1.7,
            }}>
              Sheikh Zayed Road · Exit 46<br />
              Open by appointment · Mon – Sat
            </div>
          </div>
        </div>
        <style>{`@keyframes heroProgress { from { transform: translateX(-100%); } to { transform: translateX(0); } }`}</style>
      </section>

      {/* ---------- PROPOSITION / NUMBERS BAND ---------- */}
      <section style={{ background: "var(--noir)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container-wide" style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 0,
          alignItems: "stretch",
        }} className="prop-grid">
          <div style={{ padding: "56px 48px 56px 0", borderRight: "1px solid var(--line)" }}>
            <div className="h-eyebrow" style={{ marginBottom: 16 }}>Independent · Multi-Brand</div>
            <h3 className="h-display" style={{ fontSize: 30, margin: 0, lineHeight: 1.15 }}>
              A private showroom for cars chosen with intention — not algorithms.
            </h3>
          </div>
          {[
            { n: "15+", l: "Years in Dubai", sub: "Trading since 2008" },
            { n: "11", l: "Marques", sub: "Ferrari to Audi" },
            { n: "4", l: "Lead Channels", sub: "Enquire · WA · Call · Visit" },
          ].map((s, i) => (
            <div key={i} style={{
              padding: "56px 32px",
              borderRight: i < 2 ? "1px solid var(--line)" : "none",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div className="h-display tabular" style={{ fontSize: 80, color: "var(--gold)", lineHeight: 1 }}>{s.n}</div>
              <div style={{ marginTop: 24 }}>
                <div className="h-mono-sm" style={{ color: "var(--text)" }}>{s.l}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-mute)", marginTop: 6 }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@media(max-width:900px){.prop-grid{grid-template-columns:1fr 1fr !important}.prop-grid>div:first-child{grid-column:1/-1;border-right:none !important;border-bottom:1px solid var(--line);padding-right:0 !important}}`}</style>
      </section>

      {/* ---------- FEATURED INVENTORY ---------- */}
      <section className="section">
        <div className="container-wide">
          <SectionHead
            eyebrow="Featured Inventory"
            title="From the showroom floor."
            sub="A curated selection from this season's stock. Pricing on request — every car is sold privately, with full provenance and a private valuation."
            action={
              <button className="btn btn--ghost" onClick={() => navigate("inventory")}>
                All Inventory →
              </button>
            }
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="feat-grid">
            {featured.slice(0, 6).map(v => (
              <VehicleCard key={v.id} v={v} onClick={() => navigate("vehicle", v)} />
            ))}
          </div>
        </div>
        <style>{`@media(max-width:1100px){.feat-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:680px){.feat-grid{grid-template-columns:1fr!important}}`}</style>
      </section>

      {/* ---------- SELL YOUR CAR BAND ---------- */}
      <section style={{ background: "var(--paper)", color: "var(--text-ink)" }}>
        <div className="container-wide section" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center",
        }} className="sell-band">
          <div>
            <div className="h-eyebrow-mute" style={{ color: "var(--gold-deep)", marginBottom: 18 }}>Sell · Trade-In · Valuation</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1.05, color: "var(--text-ink)" }}>
              We buy <span style={{ fontStyle: "italic" }}>cars</span>,<br />
              not just stories.
            </h2>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7, color: "var(--text-ink-mute)", maxWidth: 520 }}>
              A no-obligation valuation in 24 hours. We buy all makes — luxury, exotic, classic, and clean pre-owned —
              with transparent paperwork and cash settlement on the day if the offer is right for you.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn btn--lg" onClick={() => navigate("sell")}>Start a Valuation →</button>
              <button className="btn btn--lg btn--ghost-light" onClick={() => openEnquiry({ mode: "contact" })}>WhatsApp Photos</button>
            </div>
            <div style={{
              display: "flex", gap: 28, marginTop: 40, paddingTop: 28,
              borderTop: "1px solid rgba(0,0,0,0.1)",
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--text-ink-mute)", flexWrap: "wrap",
            }}>
              <span><span style={{ color: "var(--gold-deep)" }}>01</span> · 24-hour offer</span>
              <span><span style={{ color: "var(--gold-deep)" }}>02</span> · We handle papers</span>
              <span><span style={{ color: "var(--gold-deep)" }}>03</span> · Cash on the day</span>
            </div>
          </div>
          <div style={{ position: "relative" }}>
            <img src="media/showroom-photo-01.webp" alt="Showroom"
                 style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
            <div style={{
              position: "absolute", bottom: -24, left: -24,
              background: "var(--noir)", color: "var(--text)",
              padding: "20px 24px", maxWidth: 280,
              border: "1px solid var(--gold)",
            }}>
              <div className="h-eyebrow">Snapshot Quote</div>
              <div className="h-display" style={{ fontSize: 28, marginTop: 8 }}>~ AED 285,000</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--text-mute)", marginTop: 6, letterSpacing: "0.12em" }}>
                2017 Porsche 911 · 32k km<br />
                <span style={{ color: "var(--gold)" }}>* indicative — not a binding offer</span>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:900px){.sell-band{grid-template-columns:1fr !important;gap:48px !important}}`}</style>
      </section>

      {/* ---------- BRAND STRIP ---------- */}
      <section style={{ background: "var(--ink)", padding: "64px 0" }}>
        <div className="container-wide">
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            marginBottom: 36, gap: 24, flexWrap: "wrap",
          }}>
            <div className="h-eyebrow">Brands we trade in · GCC & European spec</div>
            <div style={{ height: 1, flex: 1, background: "var(--line)", minWidth: 80 }} />
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0,
            border: "1px solid var(--line)",
          }} className="brand-grid">
            {BRANDS.map((b, i) => (
              <button key={b} className="unstyled-button"
                      onClick={() => navigate("inventory", { brand: b })}
                      style={{
                        padding: "32px 16px", textAlign: "center",
                        fontFamily: "var(--display)", fontSize: 22, fontStyle: "italic",
                        color: "var(--text)",
                        borderRight: (i % 5 < 4) ? "1px solid var(--line)" : "none",
                        borderBottom: i < 5 ? "1px solid var(--line)" : "none",
                        transition: "background .2s, color .2s",
                      }}
                      onMouseEnter={(e) => { e.currentTarget.style.background = "var(--gold)"; e.currentTarget.style.color = "var(--noir)"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--text)"; }}>
                {b}
              </button>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:900px){.brand-grid{grid-template-columns:repeat(2,1fr)!important}.brand-grid>button{border-right:1px solid var(--line) !important}.brand-grid>button:nth-child(2n){border-right:none !important}.brand-grid>button:nth-last-child(-n+2){border-bottom:none}}`}</style>
      </section>

      {/* ---------- METAVERSE TEASER ---------- */}
      <section style={{
        position: "relative",
        background: "linear-gradient(180deg, var(--noir) 0%, #050608 100%)",
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(media/showroom-interior.webp)",
          backgroundSize: "cover", backgroundPosition: "center",
          opacity: 0.18, mixBlendMode: "screen", filter: "grayscale(1)",
        }} />
        <div className="container-wide section" style={{ position: "relative" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80,
            alignItems: "center",
          }} className="meta-grid">
            <div>
              <div className="h-eyebrow" style={{ marginBottom: 18 }}>Virtual Showroom · 3D + AR</div>
              <h2 className="h-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: 0, lineHeight: 1, letterSpacing: "-0.02em" }}>
                Walk the floor<br />
                <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>from anywhere.</span>
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.7, color: "var(--text-mute)", maxWidth: 540 }}>
                Open the Deals on Wheels app and step inside the Al Quoz showroom in 3D — rotate any vehicle to scale in
                augmented reality, look under the bonnet, and request a price without leaving your sofa.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <button className="btn btn--lg" onClick={() => navigate("metaverse")}>Enter the Virtual Showroom →</button>
                <button className="btn btn--lg btn--ghost">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5v-17c0-.83.91-1.34 1.62-.92l14.83 8.5c.71.41.71 1.43 0 1.84L4.62 21.42c-.71.42-1.62-.09-1.62-.92z"/></svg>
                  Get Android App
                </button>
              </div>
            </div>
            <div style={{ position: "relative" }}>
              {/* Stylised device frame */}
              <div style={{
                border: "1px solid var(--gold)",
                padding: 14, background: "rgba(196,162,74,0.04)",
                position: "relative",
              }}>
                <div style={{ position: "relative", aspectRatio: "9/16", overflow: "hidden", background: "#0E1115" }}>
                  <img src="media/vehicle-bentley-continental-gt.webp" alt=""
                       style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.95 }} />
                  <div style={{
                    position: "absolute", inset: 0,
                    background: "linear-gradient(180deg, transparent 40%, rgba(11,13,16,0.95))",
                  }} />
                  <div style={{
                    position: "absolute", left: 20, right: 20, bottom: 20,
                    fontFamily: "var(--mono)", fontSize: 10.5,
                    color: "var(--gold)", letterSpacing: "0.14em",
                  }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span>● AR · LIVE</span>
                      <span>SCALE 1:1</span>
                    </div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 22, fontStyle: "italic", color: "var(--text)", marginTop: 12, letterSpacing: 0 }}>
                      Bentley Continental GT
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, color: "var(--text-mute)" }}>
                      <span>↺ ROTATE</span>
                      <span>+ SCALE</span>
                      <span>⌖ PLACE</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style={{
                position: "absolute", top: -28, right: -28,
                background: "var(--gold)", color: "var(--noir)",
                padding: "14px 18px",
                fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em",
                textTransform: "uppercase", maxWidth: 200, lineHeight: 1.5,
              }}>
                Android live · iOS soon
              </div>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:900px){.meta-grid{grid-template-columns:1fr !important;gap:48px !important}}`}</style>
      </section>

      {/* ---------- CONTACT BAND ---------- */}
      <section className="section" style={{ background: "var(--noir)" }}>
        <div className="container-wide" style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "end",
          paddingBottom: 36, borderBottom: "1px solid var(--line)",
        }} className="contact-band">
          <div>
            <div className="h-eyebrow">Visit · Al Quoz</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: "16px 0 0", lineHeight: 1 }}>
              By appointment.<br />
              <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>By introduction.</span>
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18, justifySelf: "end" }}>
            <button className="btn btn--lg" onClick={() => navigate("contact")}>Plan a Visit →</button>
            <button className="btn btn--lg btn--whatsapp">WhatsApp the Showroom</button>
          </div>
        </div>
        <div className="container-wide" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          marginTop: 36, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        }} className="contact-grid">
          <div style={{ padding: "32px 32px 32px 0", borderRight: "1px solid var(--line)" }}>
            <div className="h-eyebrow-mute">Address</div>
            <div style={{ marginTop: 12, lineHeight: 1.7 }}>Sheikh Zayed Road, Exit 46<br />After Oasis Centre, Al Quoz 1<br />Dubai · UAE</div>
          </div>
          <div style={{ padding: "32px 32px", borderRight: "1px solid var(--line)" }}>
            <div className="h-eyebrow-mute">Phone</div>
            <div className="tabular" style={{ marginTop: 12, lineHeight: 1.7 }}>+971 52 790 0000<br /><span className="muted">sales@dealsonwheels.ae</span></div>
          </div>
          <div style={{ padding: "32px 0 32px 32px" }}>
            <div className="h-eyebrow-mute">Hours</div>
            <div style={{ marginTop: 12, lineHeight: 1.7 }}>Mon – Sat · 09:00 – 21:00<br /><span className="muted">Sunday closed</span></div>
          </div>
        </div>
        <style>{`@media(max-width:760px){.contact-band{grid-template-columns:1fr !important}.contact-grid{grid-template-columns:1fr !important}.contact-grid>div{border-right:none !important;border-bottom:1px solid var(--line);padding:24px 0 !important}.contact-grid>div:last-child{border-bottom:none}}`}</style>
      </section>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 9.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-mute)" }}>{label}</div>
      <div style={{ fontFamily: "var(--display)", fontSize: 22, color: "var(--text)", marginTop: 6, fontStyle: "italic" }}>{value}</div>
    </div>
  );
}

Object.assign(window, { HomePage });