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,
        }}>
          Why do people play table top games? To meet with friends, use
          their miniatures and roll dice. Playseer supports all of these
          things but removes the one common barrier... Physical distance.
        </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="PLAYERS" value="4" />
            <BottomStat label="VPs" value="142 / 300" cyan />
            <BottomStat label="ROUND" value="4" />
          </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>Real miniatures, virtual playaids, fog of war, destructible terrain</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;