function Broadcast() {
  const [variant, setVariant] = React.useState("B");
  const [streaming, setStreaming] = React.useState(false);

  return (
    <section id="broadcast" style={{ padding: "100px 2rem", background: "rgba(0,0,0,0.18)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 16, fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#22d3ee", letterSpacing: 3, textTransform: "uppercase", opacity: 0.7 }}>08 / Broadcast</div>

        {/* 1/3 image | 2/3 controls */}
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 24, alignItems: "start" }}>

          {/* Image column */}
          <div style={{
            position: "relative", borderRadius: 12, overflow: "hidden",
            border: "1px solid rgba(34,211,238,0.3)",
            boxShadow: "0 0 40px rgba(34,211,238,0.12)",
          }}>
            <img
              src={variant === "A" ? "assets/StreamOverlay-BroadcastBar.png" : "assets/StreamOverlay-CornerHud.png"}
              alt={variant === "A" ? "Broadcast Bar stream overlay" : "Corner HUD stream overlay"}
              style={{ width: "100%", height: "auto", display: "block" }}
            />
            {/* LIVE / STANDBY badge */}
            <div style={{ position: "absolute", top: 10, left: 10, display: "flex", alignItems: "center", gap: 6, padding: "4px 9px", background: "rgba(0,0,0,0.65)", borderRadius: 4, backdropFilter: "blur(6px)" }}>
              <div style={{ width: 6, height: 6, borderRadius: "50%", background: streaming ? "#ef4444" : "rgba(255,255,255,0.3)", animation: streaming ? "pulse 1.4s infinite" : "none" }} />
              <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#fff", letterSpacing: 1 }}>{streaming ? "LIVE" : "STANDBY"}</span>
            </div>

          </div>

          {/* Controls column: two panels stacked */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>

            {/* Variant picker + GO LIVE */}
            <div style={{ background: "rgba(32,32,47,0.6)", border: "1px solid rgba(34,211,238,0.2)", borderRadius: 14, padding: "20px 22px" }}>
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#22d3ee", letterSpacing: 3, textTransform: "uppercase", marginBottom: 12, opacity: 0.8 }}>Overlay Variant</div>
              <div style={{ display: "flex", gap: 6, marginBottom: 20 }}>
                {[["A", "Broadcast bar"], ["B", "Corner HUD"]].map(([v, l]) => (
                  <button key={v} onClick={() => setVariant(v)} style={{
                    flex: 1, padding: "10px 14px", borderRadius: 6,
                    background: variant === v ? "rgba(34,211,238,0.2)" : "rgba(255,255,255,0.03)",
                    border: `1px solid ${variant === v ? "rgba(34,211,238,0.5)" : "rgba(255,255,255,0.1)"}`,
                    color: variant === v ? "#22d3ee" : "rgba(255,255,255,0.6)",
                    fontFamily: "'Space Mono', monospace", fontSize: 11, cursor: "pointer", letterSpacing: 1,
                    fontWeight: 700,
                  }}>{v} · {l}</button>
                ))}
              </div>
              <button onClick={() => setStreaming(!streaming)} style={{
                width: "100%", padding: "13px",
                background: streaming ? "rgba(239,68,68,0.2)" : "linear-gradient(135deg, rgba(214,171,57,0.25), rgba(214,171,57,0.1))",
                border: `1px solid ${streaming ? "rgba(239,68,68,0.5)" : "rgba(214,171,57,0.5)"}`,
                borderRadius: 8, cursor: "pointer",
                color: streaming ? "#fca5a5" : "#fde68a",
                fontFamily: "'Orbitron', sans-serif", fontSize: 13, fontWeight: 900, letterSpacing: 3,
              }}>{streaming ? "● STOP STREAM" : "▶ GO LIVE"}</button>
              <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
                {["YouTube", "Twitch", "Custom RTMP"].map(p => (
                  <span key={p} style={{ flex: 1, textAlign: "center", padding: "5px 8px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 5, fontFamily: "'Space Mono', monospace", fontSize: 9, color: "rgba(255,255,255,0.5)", letterSpacing: 1 }}>{p}</span>
                ))}
              </div>
            </div>

          </div>
        </div>

        {/* Bullets row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14, marginTop: 32 }}>
          {[
            { c: "#22d3ee", t: "Browser Source · 1080p60", b: "OBS captures the localhost overlay page directly. No screen-share, no compositing. Pixel-perfect." },
            { c: "#D6AB39", t: "Same WebSocket as PECAN", b: "Telemetry data shares the dashboard's connection. One source of truth — what the engineers see is what the audience sees." },
            { c: "#a855f7", t: "Two Layouts", b: "Variant A: broadcast bar for esports-style telemetry. Variant B: corner HUD for cinematic feel." },
            { c: "#f97316", t: "Public Viewer Page", b: "A standalone Public.html embeds your YouTube/Twitch player for fans — zero deploy effort, drop on any host." },
          ].map(b => (
            <div key={b.t} style={{ background: "rgba(32,32,47,0.5)", border: `1px solid ${b.c}25`, borderRadius: 10, padding: "16px 18px", borderTop: `2px solid ${b.c}` }}>
              <h4 style={{ fontWeight: 700, fontSize: 13, color: "#fff", marginBottom: 6 }}>{b.t}</h4>
              <p style={{ fontSize: 12.5, color: "rgba(255,255,255,0.55)", lineHeight: 1.6 }}>{b.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Broadcast });