function SiteShowcase() {
  return (
    <section id="showcase" style={{ marginTop: 140 }}>
      <div className="ps-section" style={{ textAlign: "center", marginBottom: 56 }}>
        <div className="ps-eyebrow" style={{ marginBottom: 16 }}>— Live from the table —</div>
        <h2 className="ps-h-display" style={{
          fontFamily: "var(--font-display)",
          fontSize: 64, fontWeight: 500,
          letterSpacing: "-0.025em",
          color: "var(--fg-1)",
          margin: "0 auto", maxWidth: 880, lineHeight: 1.04,
          textWrap: "balance",
        }}>
          Real miniatures.{" "}
          <span style={{
            background: "var(--ps-gradient)",
            WebkitBackgroundClip: "text", backgroundClip: "text",
            WebkitTextFillColor: "transparent", color: "transparent",
          }}>Impossible worlds.</span>
        </h2>
        <p style={{
          margin: "20px auto 0", maxWidth: 580,
          color: "var(--fg-2)", fontSize: 17, lineHeight: 1.55,
        }}>
          Cast a fully animated dragon onto the kitchen table. Trace
          spells across the surface. Let the room remember every move.
        </p>
      </div>

      {/* ── Anchor frame: dragon ── */}
      <div className="ps-section">
        <div className="ps-frame" style={{
          aspectRatio: "16 / 9",
          maxHeight: 720,
        }}>
          <img src="assets/imagery-tabletop-dragon.jpeg" style={{
            width: "100%", height: "100%", objectFit: "cover",
          }} />
          {/* Floating overlays */}
          <div style={{
            position: "absolute", left: 18, top: 14,
            display: "flex", alignItems: "center", gap: 10,
            fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.16em", color: "var(--fg-1)",
            background: "rgba(10,12,20,0.6)", padding: "6px 12px",
            backdropFilter: "blur(8px)", borderRadius: 6,
            border: "1px solid rgba(255,255,255,0.08)",
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: 999,
              background: "var(--ps-cyan)",
              boxShadow: "0 0 10px var(--ps-cyan)",
              animation: "ps-pulse-dot 1.6s infinite",
            }}/>
            // LIVE FROM A KITCHEN TABLE · 03:42
          </div>

          <div style={{
            position: "absolute", right: 18, top: 14,
            display: "flex", gap: 6,
            fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.14em",
          }}>
            <span style={{
              background: "rgba(10,12,20,0.6)", padding: "6px 10px",
              backdropFilter: "blur(8px)", borderRadius: 6,
              color: "var(--fg-2)", border: "1px solid rgba(255,255,255,0.08)",
            }}>DRAGONFALL · ACT III</span>
            <span style={{
              background: "rgba(10,12,20,0.6)", padding: "6px 10px",
              backdropFilter: "blur(8px)", borderRadius: 6,
              color: "var(--ps-cyan)", border: "1px solid rgba(0,212,255,0.30)",
            }}>4P · CO-OP</span>
          </div>

          <div style={{
            position: "absolute", left: 18, bottom: 18,
            display: "flex", gap: 8,
          }}>
            <BottomStat label="HEROES" value="4" />
            <BottomStat label="BOSS HP" value="142 / 300" cyan />
            <BottomStat label="ROUND" value="14" />
          </div>
        </div>

        {/* Caption row beneath frame */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 16, marginTop: 18,
          fontFamily: "var(--font-display)", fontSize: 13,
          color: "var(--fg-3)", letterSpacing: "0.02em",
        }}>
          <span>Captured · Playseer build 24.2 · Quest 3 passthrough · 90 Hz</span>
          <a href="#signup-beta" style={{
            color: "var(--ps-cyan)", display: "inline-flex", alignItems: "center", gap: 6,
            fontWeight: 500,
          }}>Get on the headset → </a>
        </div>
      </div>
    </section>
  );
}

function BottomStat({ label, value, cyan }) {
  return (
    <div style={{
      background: "rgba(10,12,20,0.62)",
      backdropFilter: "blur(10px)",
      border: "1px solid rgba(255,255,255,0.08)",
      borderRadius: 8,
      padding: "8px 14px",
      minWidth: 96,
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 9,
        letterSpacing: "0.16em", color: "var(--fg-3)",
      }}>{label}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 15,
        fontWeight: 600,
        color: cyan ? "var(--ps-cyan)" : "var(--fg-1)",
        letterSpacing: "0.02em", marginTop: 2,
      }}>{value}</div>
    </div>
  );
}

window.SiteShowcase = SiteShowcase;