function SiteHero() {
  return (
    <section id="top" style={{
      position: "relative",
      width: "100%",
      minHeight: 820,
      overflow: "hidden",
      paddingTop: 40,
    }}>
      {/* ── Layer 1: Hero image, positioned to right, full bleed ── */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0,
      }}>
        <div data-plx="0.10" style={{ position: "absolute", inset: "-8% 0" }}>
          <img src="assets/imagery-tabletop-skirmish.jpeg" className="ps-hero-img" style={{
            position: "absolute", right: 0, top: 0,
            width: "min(75%, 1200px)", height: "100%",
            objectFit: "cover", objectPosition: "center right",
          }} />
        </div>
        {/* Left-to-right fade so headline reads clean */}
        <div className="ps-hero-fade" style={{
          position: "absolute", inset: 0,
          background:
            "linear-gradient(90deg, var(--bg-0) 0%, var(--bg-0) 28%, rgba(10,12,20,0.85) 46%, rgba(10,12,20,0.15) 78%, transparent 100%)",
        }} />
        {/* Top + bottom dark vignette so header and content blend */}
        <div style={{
          position: "absolute", inset: 0,
          background:
            "linear-gradient(180deg, rgba(10,12,20,0.5) 0%, transparent 18%, transparent 70%, var(--bg-0) 100%)",
        }} />
      </div>

      {/* ── Layer 2: Aurora glows ── */}
      <div aria-hidden style={{
        position: "absolute", inset: -120, zIndex: 1, pointerEvents: "none",
        background:
          "radial-gradient(ellipse 800px 600px at 12% 22%, rgba(0,212,255,0.30), transparent 60%)," +
          "radial-gradient(ellipse 900px 700px at 88% 92%, rgba(196,77,255,0.22), transparent 60%)",
        filter: "blur(8px)",
        animation: "ps-aurora-drift 14s ease-in-out infinite",
      }} />

      {/* ── Layer 3: Content ── */}
      <div className="ps-section ps-hero-grid" style={{
        position: "relative", zIndex: 2,
        display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 40,
        alignItems: "center",
        paddingTop: 100, paddingBottom: 80,
      }}>
        {/* ── Left: copy + CTAs ── */}
        <div className="ps-reveal">
          <h1 className="ps-h-display" style={{
            fontFamily: "var(--font-display)",
            fontWeight: 500,
            fontSize: 104, lineHeight: 0.96,
            letterSpacing: "-0.035em",
            color: "var(--fg-1)",
            margin: 0,
            textWrap: "balance",
          }}>
            Your table.<br/>
            Your models.<br/>
            Your friends.<br/>
            <span style={{
              background: "var(--ps-gradient)",
              WebkitBackgroundClip: "text", backgroundClip: "text",
              WebkitTextFillColor: "transparent", color: "transparent",
            }}>Anywhere!</span>
          </h1>

          <p style={{
            margin: "28px 0 0", maxWidth: 520,
            fontSize: 19, lineHeight: 1.55,
            color: "var(--fg-2)", textWrap: "pretty",
          }}>
            Tabletop gaming, reimagined for XR. Drop a board on a real
            table, walk around it, and play with anyone, anywhere.
            Every die, every model, every move synced in real time.
            <br></br>
            <br></br>
          </p>

          {/* ── Dual CTAs ── */}
          <div style={{
            marginTop: 40, display: "flex", flexWrap: "wrap", gap: 14,
            alignItems: "center",
          }}>
            <a href="#signup-beta" className="ps-cta-primary"
               style={{ textDecoration: "none", display: "inline-flex",
                        alignItems: "center", gap: 10 }}>
              <span>Join the beta</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" strokeWidth="2"
                   strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </a>
            <a href="#signup-studio" className="ps-cta-secondary"
               style={{ textDecoration: "none", display: "inline-flex",
                        alignItems: "center", gap: 10 }}>
              <span>Pitch a game →</span>
            </a>
          </div>

          {/* ── Supporting micro-meta ── */}
          <div style={{
            marginTop: 36, display: "flex", flexWrap: "wrap",
            gap: 28, alignItems: "center",
          }}>
            <SupportLine label="HEADSETS" items={["Meta Quest 3", "XReal Aura"]} />
            <SupportLine label="STATUS" items={["BETA"]} />
            <SupportLine label="GAME SYSTEMS" items={["Warmachine"]} />
          </div>
        </div>

        {/* ── Right: Floating HUD chips that read like in-game UI ── */}
        <div style={{ position: "relative", minHeight: 540 }} aria-hidden>
          <FloatingChip top="6%" right="0%" delay="0s">
            <div className="dot"/>
            <div>
              <div className="ps-mono" style={{ color: "var(--ps-cyan)" }}>// MEASURING</div>
              <div style={{ fontSize: 13, marginTop: 2 }}>Range 12.4 m · Line of sight clear</div>
            </div>
          </FloatingChip>

          <FloatingChip top="34%" right="14%" delay=".4s">
            <div style={{
              width: 8, height: 8, borderRadius: 2,
              background: "var(--ps-magenta)",
              boxShadow: "0 0 10px var(--ps-magenta)",
            }}/>
            <div>
              <div className="ps-mono" style={{ color: "var(--ps-magenta)" }}>// SKIRMISH · TURN 4</div>
              <div style={{ fontSize: 13, marginTop: 2 }}>Marcus rolling… <b>Rolls 6... HIT!</b></div>
            </div>
          </FloatingChip>

          <FloatingChip top="64%" right="2%" delay=".8s">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="url(#hg)" strokeWidth="2" strokeLinecap="round">
              <defs>
                <linearGradient id="hg" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="#00D4FF"/>
                  <stop offset="1" stopColor="#C44DFF"/>
                </linearGradient>
              </defs>
              <circle cx="12" cy="12" r="9"/>
              <path d="M8 12l3 3 5-6"/>
            </svg>
            <div>
              <div className="ps-mono" style={{ color: "var(--ps-cyan)" }}>// ROOM SCAN OK</div>
              <div style={{ fontSize: 13, marginTop: 2 }}>4 headsets synced · 18 ms</div>
            </div>
          </FloatingChip>
        </div>
      </div>
    </section>
  );
}

function SupportLine({ label, items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span className="ps-mono" style={{ color: "var(--fg-3)" }}>{label}</span>
      <span style={{ fontSize: 13, color: "var(--fg-1)", letterSpacing: "0.01em" }}>
        {items.join(" · ")}
      </span>
    </div>
  );
}

function FloatingChip({ children, top, right, delay }) {
  return (
    <div style={{
      position: "absolute", top, right,
      background: "rgba(10,12,20,0.65)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
      border: "1px solid rgba(255,255,255,0.10)",
      borderRadius: 12,
      padding: "11px 14px",
      display: "flex", alignItems: "center", gap: 12,
      color: "var(--fg-1)",
      minWidth: 220,
      animation: `ps-reveal 700ms var(--ease-out) ${delay} both`,
      boxShadow: "0 8px 24px rgba(0,0,0,0.45)",
    }}>
      <style>{`.ps-hud-chip .dot{width:7px;height:7px;border-radius:999px;background:var(--ps-cyan);box-shadow:0 0 10px var(--ps-cyan);animation:ps-pulse-dot 1.6s infinite;}`}</style>
      <div className="ps-hud-chip" style={{
        position: "static", padding: 0, background: "none",
        backdropFilter: "none", border: 0,
        display: "contents",
      }}>{children}</div>
    </div>
  );
}

window.SiteHero = SiteHero;
