/* ────────────────────────────────────────────────────────────
   WARMACHINE — flagship licensed game section
   Warm ember palette deliberately breaks the cool brand
   spectrum: this is the partner IP moment.
   ──────────────────────────────────────────────────────────── */
function SiteWarmachine() {
  return (
    <section id="warmachine" style={{
      position: "relative",
      marginTop: 150,
      overflow: "hidden",
    }}>
      {/* Ember atmosphere */}
      <div aria-hidden data-plx="0.06" style={{
        position: "absolute", inset: -140, zIndex: 0, pointerEvents: "none",
        background:
          "radial-gradient(ellipse 900px 640px at 78% 60%, rgba(255,122,26,0.16), transparent 62%)," +
          "radial-gradient(ellipse 700px 480px at 12% 16%, rgba(255,64,0,0.08), transparent 60%)",
        filter: "blur(10px)",
      }}/>
      {/* Hairline top + bottom rules to frame the licensed moment */}
      <div aria-hidden style={{
        position: "absolute", top: 0, left: "8%", right: "8%", height: 1,
        background: "linear-gradient(90deg, transparent, rgba(255,140,40,0.35), transparent)",
      }}/>

      <div className="ps-section" style={{ position: "relative", zIndex: 2 }}>
        <div className="ps-hero-grid" style={{
          display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 32,
          alignItems: "center", paddingTop: 96, paddingBottom: 72,
        }}>
          {/* ── Left: the pitch ── */}
          <div>
            <div className="ps-sr" style={{
              display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 26,
              padding: "6px 14px", borderRadius: 999,
              border: "1px solid rgba(255,140,40,0.35)",
              background: "rgba(255,122,26,0.07)",
              fontFamily: "var(--font-mono)", fontSize: 10,
              letterSpacing: "0.18em", color: "#FFB36B",
            }}>
              FIRST LICENSED GAME · IN BETA NOW
            </div>

            <div className="ps-sr" style={{ "--sr-delay": "80ms" }}>
              <img src="assets/warmachine-logo.png" alt="WARMACHINE"
                   style={{
                     width: "min(440px, 88%)", height: "auto",
                     filter: "drop-shadow(0 12px 44px rgba(255,110,20,0.35))",
                   }}/>
            </div>

            <h2 className="ps-sr" style={{
              "--sr-delay": "140ms",
              margin: "30px 0 0", fontFamily: "var(--font-display)",
              fontSize: 48, fontWeight: 500, letterSpacing: "-0.025em",
              color: "var(--fg-1)", lineHeight: 1.06, textWrap: "balance",
              maxWidth: 520,
            }}>
              Full-metal warfare, at{" "}
              <span style={{
                background: "linear-gradient(90deg, #FFD34D, #FF8C28, #FF5A1F)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent", color: "transparent",
              }}>true scale.</span>
            </h2>

            <p className="ps-sr" style={{
              "--sr-delay": "200ms",
              margin: "20px 0 0", maxWidth: 500,
              fontSize: 17, lineHeight: 1.6, color: "var(--fg-2)",
              textWrap: "pretty",
            }}>
              Steam-belching warjacks stride across your kitchen table.
              Measure threat ranges, check real line of sight. Every
              model, every card, every dice roll synced with your opponent,
              wherever they muster.
            </p>

            <div className="ps-sr" style={{
              "--sr-delay": "260ms",
              marginTop: 30, display: "flex", flexWrap: "wrap",
              gap: 26, alignItems: "center",
            }}>
              <WmMeta label="RULESET" value="Warmachine MK IV" />
              <WmMeta label="MODES" value="Skirmish · Full battle" />
              <WmMeta label="STATUS" value="Closed beta" />
            </div>

            <div className="ps-sr" style={{
              "--sr-delay": "320ms",
              marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap",
            }}>
              <a href="#signup-beta" style={{
                textDecoration: "none", display: "inline-flex",
                alignItems: "center", gap: 10,
                fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 500,
                letterSpacing: "0.04em", padding: "16px 30px", borderRadius: 999,
                color: "#150A02", cursor: "pointer",
                background: "linear-gradient(90deg, #FFD34D, #FF8C28, #FF5A1F)",
                boxShadow: "0 0 30px rgba(255,122,26,0.4)",
                transition: "transform 200ms var(--ease-out), filter 200ms var(--ease-out)",
              }}
                 onMouseEnter={(e)=>{e.currentTarget.style.transform="translateY(-1px)"; e.currentTarget.style.filter="brightness(1.06)";}}
                 onMouseLeave={(e)=>{e.currentTarget.style.transform="translateY(0)"; e.currentTarget.style.filter="none";}}>
                Join the Warmachine beta
                <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>

          {/* ── Right: the warjack, breaking the frame ── */}
          <div style={{ position: "relative", minHeight: 560 }} aria-hidden>
            {/* Ground glow the jack stands in */}
            <div data-plx="0.05" style={{
              position: "absolute", left: "6%", right: "-4%", bottom: "4%",
              height: 130, borderRadius: "50%",
              background: "radial-gradient(ellipse at center, rgba(255,110,20,0.28), transparent 70%)",
              filter: "blur(24px)",
            }}/>
            <div data-plx="-0.07" style={{
              position: "absolute", inset: 0,
              display: "flex", alignItems: "flex-end", justifyContent: "center",
            }}>
              <img src="assets/warmachine-warjack.png" alt=""
                   style={{
                     width: "min(560px, 104%)", height: "auto",
                     filter:
                       "drop-shadow(0 30px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 44px rgba(255,110,20,0.18))",
                   }}/>
            </div>

            {/* HUD chips — same in-game UI language as the hero */}
            <div className="ps-sr" style={{
              "--sr-delay": "220ms",
              position: "absolute", left: "-2%", top: "14%",
              background: "rgba(10,12,20,0.68)",
              backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
              border: "1px solid rgba(255,140,40,0.30)",
              borderRadius: 12, padding: "11px 14px",
              display: "flex", alignItems: "center", gap: 12,
              color: "var(--fg-1)", boxShadow: "0 8px 24px rgba(0,0,0,0.45)",
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: 999, background: "#FF8C28",
                boxShadow: "0 0 10px #FF8C28",
                animation: "ps-pulse-dot 1.6s infinite",
              }}/>
              <div>
                <div className="ps-mono" style={{ color: "#FFB36B" }}>// WARJACK · READY</div>
                <div style={{ fontSize: 13, marginTop: 2 }}>Focus 3 · Chain weapon armed</div>
              </div>
            </div>

            <div className="ps-sr" style={{
              "--sr-delay": "340ms",
              position: "absolute", right: "0%", bottom: "20%",
              background: "rgba(10,12,20,0.68)",
              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)", boxShadow: "0 8px 24px rgba(0,0,0,0.45)",
            }}>
              <div>
                <div className="ps-mono" style={{ color: "var(--ps-cyan)" }}>// MEASURING</div>
                <div style={{ fontSize: 13, marginTop: 2 }}>Threat range 9″ · clear</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WmMeta({ label, value }) {
  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" }}>{value}</span>
    </div>
  );
}

window.SiteWarmachine = SiteWarmachine;