function SiteStudio() {
  return (
    <section id="studio" style={{ marginTop: 140 }}>
      <div className="ps-section">
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
          alignItems: "center",
        }} className="ps-hero-grid">
          {/* Image left */}
          <div className="ps-frame" style={{
            aspectRatio: "4 / 3", maxHeight: 560,
            borderColor: "rgba(196,77,255,0.30)",
            boxShadow:
              "0 0 64px rgba(196,77,255,0.20), 0 0 120px rgba(138,63,252,0.15)",
          }}>
            <img src="assets/imagery-hologram-board.jpeg" style={{
              width: "100%", height: "100%", objectFit: "cover",
            }}/>

            {/* HUD: build label */}
            <div style={{
              position: "absolute", left: 16, top: 14,
              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)",
            }}>// STUDIO · GAME: GRIDPUNK</div>

            {/* HUD: ship to friends */}
            <div style={{
              position: "absolute", right: 16, bottom: 16,
              padding: "10px 14px",
              background: "rgba(10,12,20,0.7)",
              backdropFilter: "blur(12px)",
              borderRadius: 12,
              border: "1px solid rgba(196,77,255,0.30)",
              display: "flex", alignItems: "center", gap: 10,
              fontSize: 13, color: "var(--fg-1)",
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                   stroke="url(#sg)" strokeWidth="2" strokeLinecap="round">
                <defs>
                  <linearGradient id="sg" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#8A3FFC"/>
                    <stop offset="1" stopColor="#C44DFF"/>
                  </linearGradient>
                </defs>
                <path d="M22 2L11 13"/>
                <path d="M22 2l-7 20-4-9-9-4z"/>
              </svg>
              <span>Engage players everywhere <b style={{ color: "var(--ps-magenta)" }}></b></span>
            </div>
          </div>

          {/* Copy right */}
          <div>
            <div className="ps-eyebrow ps-sr" style={{ marginBottom: 14 }}>— For games developers —</div>
            <h2 className="ps-sr" style={{
              margin: 0, fontFamily: "var(--font-display)",
              fontSize: 56, fontWeight: 500,
              letterSpacing: "-0.025em", color: "var(--fg-1)",
              lineHeight: 1.04, textWrap: "balance",
            }}>
              Your game, on <span style={{
                background: "var(--ps-gradient)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent", color: "transparent",
              }}>every table.</span>
            </h2>
            <p style={{
              margin: "20px 0 0", color: "var(--fg-2)",
              fontSize: 17, lineHeight: 1.6, textWrap: "pretty",
              maxWidth: 520,
            }}>
              Publishers and studios: bring your game to Playseer.
              We handle the XR heavy lifting. You bring the rules,
              the models, and the players who already love them.
              Warmachine was first. Yours could be next.
            </p>

            <ul style={{
              margin: "28px 0 0", padding: 0, listStyle: "none",
              display: "grid", gap: 14,
            }}>
              <BulletItem>Your IP, your rules, faithfully implemented</BulletItem>
              <BulletItem>Asset scanning pipeline · 4K textures</BulletItem>
              <BulletItem>Closed playtest rooms with telemetry & replays</BulletItem>
              <BulletItem>Revenue share, no effort or build your own licenseable SDKs</BulletItem>
            </ul>

            <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href="#signup-studio" className="ps-cta-primary"
                 style={{ textDecoration: "none", display: "inline-flex",
                          alignItems: "center", gap: 10 }}>
                Enquire about your game
                <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>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BulletItem({ children }) {
  return (
    <li style={{ display: "flex", alignItems: "flex-start", gap: 12,
                 color: "var(--fg-2)", fontSize: 15, lineHeight: 1.45 }}>
      <span style={{
        marginTop: 6, width: 8, height: 8, borderRadius: 2,
        background: "var(--ps-gradient)",
        boxShadow: "0 0 12px rgba(138,63,252,0.55)",
        flexShrink: 0,
      }}/>
      <span>{children}</span>
    </li>
  );
}

window.SiteStudio = SiteStudio;
