function SiteFeatures() {
  return (
    <section style={{ marginTop: 140 }}>
      <div className="ps-section">
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "end",
          flexWrap: "wrap", gap: 24, marginBottom: 56,
        }}>
          <div style={{ maxWidth: 580 }}>
            <div className="ps-eyebrow" style={{ marginBottom: 14 }}>— Why Playseer —</div>
            <h2 style={{
              margin: 0, fontFamily: "var(--font-display)",
              fontSize: 52, fontWeight: 500,
              letterSpacing: "-0.025em", color: "var(--fg-1)",
              lineHeight: 1.05, textWrap: "balance",
            }}>Built for the curious, the strategic, the dreamers.</h2>
          </div>
          <div style={{
            display: "flex", gap: 32, color: "var(--fg-3)",
            fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.14em",
          }}>
            <span>// 01 IMMERSE</span>
            <span>// 02 CONNECT</span>
            <span>// 03 BUILD</span>
          </div>
        </div>

        <div className="ps-feature-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
        }}>
          <FeatureCard
            num="01"
            eyebrow="Immerse"
            title="Worlds at your fingertips."
            body="Scan your room once. Drop a board, walk around it, lean in. Persistent surfaces hold their place across every headset at the table."
            icon={
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
                   stroke="url(#fg1)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <defs>
                  <linearGradient id="fg1" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#00D4FF"/>
                    <stop offset=".7" stopColor="#8A3FFC"/>
                    <stop offset="1" stopColor="#C44DFF"/>
                  </linearGradient>
                </defs>
                <ellipse cx="12" cy="12" rx="10" ry="4"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            }
          />
          <FeatureCard
            num="02"
            eyebrow="Connect"
            title="Anywhere is the table."
            body="Friends across rooms or continents share one game state — every die, every card, every move, in real time, under 20 ms."
            icon={
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
                   stroke="url(#fg2)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <defs>
                  <linearGradient id="fg2" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#00D4FF"/>
                    <stop offset=".7" stopColor="#8A3FFC"/>
                    <stop offset="1" stopColor="#C44DFF"/>
                  </linearGradient>
                </defs>
                <circle cx="12" cy="8" r="3"/>
                <circle cx="6" cy="16" r="3"/>
                <circle cx="18" cy="16" r="3"/>
                <path d="M12 11v3M9 16h6"/>
              </svg>
            }
          />
          <FeatureCard
            num="03"
            eyebrow="Build"
            title="Make the game you want."
            body="Studio is a playground — model pieces, script rules, ship to your friends in under a minute. No SDK fees, ever."
            highlight
            icon={
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
                   stroke="url(#fg3)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <defs>
                  <linearGradient id="fg3" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#00D4FF"/>
                    <stop offset=".7" stopColor="#8A3FFC"/>
                    <stop offset="1" stopColor="#C44DFF"/>
                  </linearGradient>
                </defs>
                <path d="M4 7l8-4 8 4-8 4-8-4zM4 12l8 4 8-4M4 17l8 4 8-4"/>
              </svg>
            }
          />
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ num, eyebrow, title, body, icon, highlight }) {
  return (
    <div className="ps-card" style={{
      padding: 28,
      display: "grid", gap: 12,
      borderColor: highlight ? "rgba(138,63,252,0.30)" : undefined,
      boxShadow: highlight
        ? "0 0 48px rgba(138,63,252,0.18), inset 0 0 0 1px rgba(138,63,252,0.10)"
        : undefined,
    }}
      onMouseEnter={(e)=>{
        e.currentTarget.style.borderColor = "rgba(0,212,255,0.40)";
      }}
      onMouseLeave={(e)=>{
        e.currentTarget.style.borderColor = highlight
          ? "rgba(138,63,252,0.30)" : "var(--border-1)";
      }}
    >
      <div aria-hidden style={{
        position: "absolute", right: -60, top: -60,
        width: 180, height: 180, borderRadius: 999,
        background: "var(--ps-gradient)",
        opacity: highlight ? 0.16 : 0.08,
        filter: "blur(50px)", pointerEvents: "none",
      }}/>

      <div style={{
        display: "flex", justifyContent: "space-between",
        alignItems: "center", marginBottom: 4,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 14,
          background: "rgba(138,63,252,0.10)",
          border: "1px solid rgba(138,63,252,0.30)",
          display: "grid", placeItems: "center",
        }}>{icon}</div>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: "0.14em", color: "var(--fg-3)",
        }}>{num}</span>
      </div>

      <div style={{
        fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 500,
        letterSpacing: "0.18em", textTransform: "uppercase",
        color: "var(--ps-cyan)", marginTop: 8,
      }}>{eyebrow}</div>

      <h3 style={{
        margin: 0, fontFamily: "var(--font-display)",
        fontSize: 24, fontWeight: 500,
        letterSpacing: "-0.01em", color: "var(--fg-1)",
        lineHeight: 1.15,
      }}>{title}</h3>

      <p style={{
        margin: 0, color: "var(--fg-2)", fontSize: 14,
        lineHeight: 1.6, textWrap: "pretty",
      }}>{body}</p>
    </div>
  );
}

window.SiteFeatures = SiteFeatures;