/* home.jsx — landing page */

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Hero({ lang, onEnquire, navigate }) {
  const t = (I18N[lang] || I18N.en).hero;
  return (
    <section style={{
      position: "relative", paddingTop: 120, paddingBottom: 0,
      background: "linear-gradient(180deg, var(--noir) 0%, #0E0E10 40%, #131316 100%)",
      overflow: "hidden",
      minHeight: "100vh",
    }}>
      {/* faint gridlines */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px)",
        backgroundSize: "120px 120px",
        opacity: 0.3,
        maskImage: "radial-gradient(ellipse at 50% 60%, black 30%, transparent 80%)",
        pointerEvents: "none",
      }} />

      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: 32, paddingBottom: 48 }}>
        <div className="kbd-eyebrow fade-in" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)", boxShadow: "0 0 8px var(--accent)" }} />
          {t.eyebrow}
        </div>

        <h1 className="display fade-in" style={{
          marginTop: 36,
          fontSize: "clamp(56px, 9.5vw, 160px)",
          letterSpacing: "-0.045em",
          lineHeight: 0.92,
          maxWidth: "16ch",
        }}>
          {t.title1} <br />
          <span style={{ display: "inline-flex", alignItems: "baseline", gap: "0.2em" }}>
            {t.title2}
            <span aria-hidden style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: "min(220px, 18vw)", height: 1, background: "var(--accent)", marginInlineEnd: 6 }} />
            </span>
          </span>
          <br /> {t.title3}
        </h1>

        <div className="fade-in" style={{
          marginTop: 56,
          display: "flex", flexWrap: "wrap",
          justifyContent: "space-between", alignItems: "flex-end", gap: 32,
        }}>
          <p style={{ margin: 0, fontSize: 18, color: "var(--silver)", maxWidth: 520, lineHeight: 1.5 }}>
            {t.sub}
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn btn-light" onClick={() => navigate({ page: "inventory" })}>
              {t.browse} <span aria-hidden>→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => onEnquire({})}>{t.enquire}</button>
          </div>
        </div>
      </div>

      {/* Image plate */}
      <div style={{ position: "relative", marginTop: 24 }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(ellipse at 50% 100%, rgba(225,29,42,0.18), transparent 60%)",
          pointerEvents: "none",
        }} />
        <div className="wrap" style={{ position: "relative" }}>
          <div style={{ position: "relative", display: "grid", placeItems: "end center" }}>
            <img src="media/hero-car-full.webp" alt="Featured car"
              style={{
                width: "min(1180px, 88%)",
                filter: "drop-shadow(0 60px 60px rgba(0,0,0,0.55))",
                userSelect: "none",
              }} />
            {/* hot-spot caption */}
            <div style={{
              position: "absolute", left: "calc(50% - min(560px, 40%))", top: "30%",
              border: "1px solid var(--line)", padding: "8px 12px", borderRadius: 8,
              background: "rgba(11,11,12,0.7)", backdropFilter: "blur(6px)",
              display: "flex", alignItems: "center", gap: 10,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 99, background: "var(--accent)" }} />
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--silver)" }}>Now in showroom · Featured</span>
            </div>
          </div>
        </div>

        {/* metric strip */}
        <div className="wrap" style={{ marginTop: 48, paddingBottom: 56 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
            {[
              { k: "Brands curated", v: "12+" },
              { k: "Cars sold", v: "1,000+", note: "Stated by F1rst Motors" },
              { k: "Inventory value", v: "$250M+", note: "Stated by F1rst Motors" },
              { k: "Since", v: "2021" },
            ].map((m, i) => (
              <div key={i} style={{
                padding: "24px 24px 24px 0",
                borderRight: i < 3 ? "1px solid var(--line)" : 0,
                paddingInlineStart: i > 0 ? 28 : 0,
              }}>
                <div className="kbd-eyebrow" style={{ marginBottom: 12 }}>{m.k}</div>
                <div className="display num" style={{ fontSize: "clamp(28px, 3.4vw, 52px)" }}>{m.v}</div>
                {m.note && <div className="mono" style={{ fontSize: 10, marginTop: 8, color: "var(--mute-dark)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{m.note}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const brands = ["Bugatti", "Ferrari", "Lamborghini", "Pagani", "McLaren", "Porsche", "Mercedes-Benz", "Rolls-Royce", "Aston Martin", "Bentley"];
  // duplicate for seamless loop
  const all = [...brands, ...brands];
  return (
    <div style={{ background: "var(--noir)" }}>
      <div className="marquee">
        <div className="marquee-track">
          {all.map((b, i) => <span key={i}>{b}</span>)}
        </div>
      </div>
      <div className="wrap" style={{ paddingBlock: 14, display: "flex", justifyContent: "space-between", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--mute-dark)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
          Manufacturer wordmarks shown · logo usage rights confirmed before publication
        </div>
        <DemoBadge>Brand strip text-only · awaiting logo rights</DemoBadge>
      </div>
    </div>
  );
}

function FeaturedRail({ onSelect, onEnquire }) {
  const featured = INVENTORY.filter((v) => v.status === "available").slice(0, 6);
  return (
    <section className="ink sec-pad-sm">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 36 }}>
          <SectionHead eyebrow="Featured · In showroom" title="New arrivals." />
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <DemoBadge />
            <button className="btn btn-ghost btn-sm" onClick={() => onEnquire({ intent: "enquire" })}>Notify on new stock</button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {featured.map((v, i) => (
            <VehicleCard key={v.slug} vehicle={v} onSelect={onSelect} variant={i === 0 ? "feature" : "card"} />
          ))}
        </div>
      </div>
    </section>
  );
}

function VehicleCard({ vehicle, onSelect, variant = "card" }) {
  const t = I18N.en;
  const isFeature = variant === "feature";
  return (
    <article className="vcard"
      onClick={() => onSelect(vehicle.slug)}
      style={{
        cursor: "pointer",
        background: "var(--ink-2)",
        border: "1px solid var(--line)",
        borderRadius: 12,
        overflow: "hidden",
        display: "flex", flexDirection: "column",
        gridColumn: isFeature ? "span 1" : "auto",
      }}>
      <div className="vimg" style={{ aspectRatio: "16/10", background: "#0f1012", position: "relative" }}>
        <img src={vehicle.img} alt={`${vehicle.brand} ${vehicle.model}`} />
        <div style={{ position: "absolute", top: 12, left: 12, display: "flex", gap: 6 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "5px 9px", borderRadius: 4,
            background: vehicle.status === "available" ? "rgba(11,11,12,0.7)" : "rgba(11,11,12,0.7)",
            backdropFilter: "blur(6px)",
            border: "1px solid " + (vehicle.status === "available" ? "rgba(255,255,255,0.18)" : "rgba(225,29,42,0.4)"),
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: vehicle.status === "available" ? "#7CE0A8" : "var(--accent)" }} />
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--paper)" }}>
              {vehicle.status === "available" ? t.available : t.sold}
            </span>
          </span>
        </div>
        <div style={{ position: "absolute", bottom: 12, right: 12 }}>
          <span className="mono" style={{ fontSize: 9, padding: "4px 8px", borderRadius: 99, background: "rgba(11,11,12,0.7)", backdropFilter: "blur(6px)", color: "var(--silver)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            Demo image
          </span>
        </div>
      </div>
      <div style={{ padding: "18px 18px 20px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>{vehicle.brand} · {vehicle.year}</div>
            <h3 className="display" style={{ fontSize: 22, margin: 0, letterSpacing: "-0.02em" }}>{vehicle.model}</h3>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{vehicle.body}</div>
            <div className="mono" style={{ fontSize: 12, color: "var(--silver)", marginTop: 4 }}>{vehicle.tag}</div>
          </div>
        </div>
        <hr className="rule-soft" style={{ marginBlock: 14 }} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div className="mono" style={{ fontSize: 9, color: "var(--mute)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Price</div>
            <div style={{ fontSize: 14, marginTop: 2 }}>Request price</div>
          </div>
          <button className="btn btn-ghost btn-xs" onClick={(e) => { e.stopPropagation(); onSelect(vehicle.slug); }}>
            View <span aria-hidden style={{ marginInlineStart: 4 }}>→</span>
          </button>
        </div>
      </div>
    </article>
  );
}

function Why() {
  return (
    <section className="paper sec-pad">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "flex-start" }}>
          <div>
            <div className="kbd-eyebrow" style={{ color: "#6a6e75", marginBottom: 18 }}>Why F1rst Motors</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 76px)", margin: 0, color: "var(--ink-on-paper)" }}>
              A showroom worth visiting. <span style={{ color: "var(--accent)" }}>Twice.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: "#3a3d44", maxWidth: 520 }}>
              Founded in Dubai in 2021, F1rst Motors curates exotic, hyper and collector cars from eight marques. Our Sheikh Zayed Road floor is open seven days; viewings are by appointment and consistently private.
            </p>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid rgba(0,0,0,0.1)" }}>
              {[
                ["Curated, not consigned", "Stock is sourced and vetted in-house. No marketplace listings, no third-party uploads."],
                ["Showroom as the experience", "Walk-arounds, start-ups and on-the-floor measurements — all by a single specialist."],
                ["Multi-channel handover", "Trade-ins, escrow-style payment, and end-to-end export when the route requires it."],
                ["Multilingual desk", "EN, AR, RU and ZH on every conversation — phone, message, in person."],
              ].map(([h, p], i) => (
                <div key={i} style={{ paddingBlock: 18, borderBottom: "1px solid rgba(0,0,0,0.1)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 24 }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "#7a7e85", paddingTop: 2 }}>{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 500, color: "var(--ink-on-paper)" }}>{h}</div>
                    <div style={{ fontSize: 14, color: "#54585f", marginTop: 4, maxWidth: 460 }}>{p}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <img src="media/showroom-interior.webp" alt="Showroom interior"
              style={{ width: "100%", aspectRatio: "5/4", objectFit: "cover", borderRadius: 12 }} />
            <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center", color: "#6a6e75", fontSize: 12 }}>
              <span className="mono" style={{ letterSpacing: "0.08em", textTransform: "uppercase" }}>Showroom · Sheikh Zayed Rd, Al Quoz 1</span>
              <DemoBadge>Photography on file</DemoBadge>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SellBand({ onEnquire }) {
  return (
    <section className="noir sec-pad" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="kbd-eyebrow" style={{ marginBottom: 18 }}>Sell or trade-in</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 80px)", margin: 0 }}>
              Sell your car<br />without the auction.
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, color: "var(--silver)", maxWidth: 520, lineHeight: 1.55 }}>
              Send make, model and photos. We come back with an indicative offer within 24 working hours — and a confirmed offer after inspection at our showroom.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => onEnquire({ intent: "tradein" })}>Send car details</button>
              <a className="btn btn-ghost" href="tel:+97143201030">Call · +971 4 320 1030</a>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {[
              ["01", "Send", "Make, model, year, mileage, photos."],
              ["02", "Indicative offer", "Within 24 working hours."],
              ["03", "Inspection", "30-minute appointment at the showroom."],
              ["04", "Settlement", "Paid same-day. No commission."],
            ].map(([n, h, p]) => (
              <div key={n} style={{ padding: "20px 20px 22px", border: "1px solid var(--line)", borderRadius: 10, background: "var(--ink)" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.12em" }}>{n}</div>
                <div className="display" style={{ fontSize: 22, marginTop: 8 }}>{h}</div>
                <div style={{ fontSize: 13, marginTop: 8, color: "var(--mute)" }}>{p}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Visit() {
  return (
    <section className="ink sec-pad" style={{ overflow: "hidden" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "stretch" }}>
          <div style={{ position: "relative", borderRadius: 12, overflow: "hidden" }}>
            <img src="media/showroom-building-night.webp" alt="Showroom at night"
              style={{ width: "100%", height: "100%", minHeight: 480, objectFit: "cover" }} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "8px 0" }}>
            <div>
              <div className="kbd-eyebrow" style={{ marginBottom: 18 }}>Visit · Open today</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", margin: 0, lineHeight: 0.95 }}>
                Sheikh Zayed Road.
              </h2>
              <p style={{ marginTop: 22, fontSize: 17, color: "var(--silver)", maxWidth: 460, lineHeight: 1.55 }}>
                Danube Building, 409 Sheikh Zayed Rd, Al Quoz 1 — five minutes from Downtown Dubai.
              </p>
              <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, fontSize: 13 }}>
                {[
                  ["Sun – Thu", "10:00 – 21:00"], ["Sat", "10:00 – 21:00"], ["Friday", "14:00 – 21:00"], ["Public holidays", "By appointment"],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: "flex", justifyContent: "space-between", paddingBlock: 8, borderBottom: "1px solid var(--line)" }}>
                    <span className="mono" style={{ fontSize: 11, color: "var(--mute)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{k}</span>
                    <span className="mono num">{v}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="btn btn-light" href="https://maps.google.com" target="_blank" rel="noreferrer">Open in Maps</a>
              <a className="btn btn-ghost" href="tel:+97143201030">Call</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ lang, onEnquire, navigate, onSelectVehicle }) {
  return (
    <main>
      <Hero lang={lang} onEnquire={onEnquire} navigate={navigate} />
      <Marquee />
      <FeaturedRail onSelect={onSelectVehicle} onEnquire={onEnquire} />
      <Why />
      <SellBand onEnquire={onEnquire} />
      <Visit />
    </main>
  );
}

Object.assign(window, { Home, VehicleCard });