// Variant B — BROADCAST
// Esports-TV-feel: live ticker, dynamiske paneler, scoreboard-rytme.
// Fokus: åpne turneringer. Liga er liten teaser i ticker + soft callout.

// Discord widget API — henter ekte online-tall for WZN Liga-serveren.
// Krever at Server Settings → Widget → Enable Server Widget er på.
const DISCORD_GUILD_ID = "798843968527269938";
const useDiscordStats = () => {
  const [stats, setStats] = React.useState({ online: null, loading: true });
  React.useEffect(() => {
    fetch(`https://discord.com/api/guilds/${DISCORD_GUILD_ID}/widget.json`)
      .then(r => r.ok ? r.json() : null)
      .then(d => setStats({ online: d?.presence_count ?? null, loading: false }))
      .catch(() => setStats({ online: null, loading: false }));
  }, []);
  return stats;
};

const BroadcastLanding = ({ accent, onNav }) => {
  const [tournaments, setTournaments] = React.useState([]);
  const [loadingT, setLoadingT] = React.useState(true);
  const [interestCount, setInterestCount] = React.useState(null);
  const discord = useDiscordStats();

  React.useEffect(() => {
    if (!window.WZN_Store) { setLoadingT(false); return; }
    WZN_Store.getTournaments().then(data => {
      setTournaments(data || []);
      setLoadingT(false);
    }).catch(() => setLoadingT(false));
    if (window.db) {
      window.db.from("liga_interesse").select("id", { count: "exact", head: true })
        .then(({ count }) => { if (count != null) setInterestCount(count); });
    }
  }, []);

  // Åpne = open ELLER live (vises på forsiden)
  const openTrns = tournaments.filter(t => t.status === "open" || t.status === "live");
  const totalPrize = tournaments
    .filter(t => t.status === "open" || t.status === "live")
    .reduce((sum, t) => sum + (t.prize_pool || 0), 0);

  return (
    <div style={{
      background: "var(--bg-0)", color: "var(--text)",
      fontFamily: "var(--font-body)", minHeight: 1900,
      width: "100%", position: "relative", overflow: "hidden",
    }}>
      <BroadcastTicker accent={accent} />
      <BroadcastHero accent={accent} onNav={onNav} openCount={openTrns.length} discord={discord} totalPrize={totalPrize} interestCount={interestCount} />
      <BroadcastNextDrops accent={accent} onNav={onNav} tournaments={openTrns} loading={loadingT} />
      <BroadcastWhoWeAre accent={accent} />
      <BroadcastGetStarted accent={accent} onNav={onNav} discord={discord} />
      <BroadcastFooter accent={accent} />
    </div>
  );
};

// ───────── Ticker — live fra Supabase ─────────
const BroadcastTicker = ({ accent }) => {
  const [dynamicItems, setDynamicItems] = React.useState([]);

  React.useEffect(() => {
    let cancelled = false;
    const fetchTickerData = async () => {
      if (!window.db) return;
      try {
        // Hent siste resultater (completed turneringer)
        const { data: completed } = await window.db
          .from("tournaments")
          .select("name, status")
          .eq("status", "completed")
          .order("created_at", { ascending: false })
          .limit(3);

        // Hent live + open turneringer
        const { data: active } = await window.db
          .from("tournaments")
          .select("name, status, prize_pool")
          .in("status", ["live", "open"])
          .order("start_date", { ascending: true })
          .limit(3);

        // Hent topp lag fra team_bonuses
        const { data: topTeams } = await window.db
          .from("team_bonuses")
          .select("team_id, bonus")
          .order("bonus", { ascending: false })
          .limit(3);

        if (cancelled) return;

        const items = [];
        if (active) {
          active.forEach(t => {
            if (t.status === "live") {
              items.push(`🔴 LIVE: ${t.name.toUpperCase()}`);
            } else {
              const prize = t.prize_pool ? ` · ${Number(t.prize_pool).toLocaleString()} KR PREMIEPOTT` : "";
              items.push(`📅 PÅMELDING ÅPEN: ${t.name.toUpperCase()}${prize}`);
            }
          });
        }
        if (topTeams && topTeams.length > 0) {
          const leader = topTeams[0];
          items.push(`🏆 LP-LEDER: ${(leader.team_id || "—").slice(0, 12).toUpperCase()} · ${leader.bonus} LP`);
        }
        if (completed) {
          completed.forEach(t => {
            items.push(`✓ FERDIG: ${t.name.toUpperCase()}`);
          });
        }

        if (items.length > 0) setDynamicItems(items);
      } catch (e) {
        console.warn("Ticker fetch feil:", e.message);
      }
    };

    fetchTickerData();
    return () => { cancelled = true; };
  }, []);

  const staticItems = [
    "● WZN LIGA — NORSK WARZONE COMPETITIVE COMMUNITY",
    "SESONG 01 KOMMER · MELD INTERESSE FOR LIGA-PLASSEN DIN",
    "UKENTLIGE TURNERINGER · ÅPENT FOR ALLE NIVÅER",
    "JOIN DISCORD → FINN LAG · SCRIMS · ANNONSERINGER",
  ];

  const items = dynamicItems.length > 0
    ? [...dynamicItems, ...staticItems]
    : staticItems;

  return (
    <div style={{
      background: "var(--bg-1)", borderBottom: "1px solid var(--line)",
      padding: "10px 0", overflow: "hidden", position: "relative",
    }}>
      <style>{`
        @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .bc-ticker { display: flex; gap: 48px; animation: tickerScroll 38s linear infinite; white-space: nowrap; }
      `}</style>
      <div style={{ display: "flex", alignItems: "center", gap: 24, padding: "0 24px" }}>
        <span style={{
          fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.08em",
          background: accent, color: "var(--bg-0)", padding: "4px 12px", flexShrink: 0,
        }}>● ON AIR</span>
        <div className="bc-ticker" style={{ flex: 1 }}>
          {[...items, ...items].map((t, i) => (
            <span key={i} style={{
              fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em",
              color: "var(--text-dim)",
            }}>
              <span style={{ color: accent, marginRight: 12 }}>▸</span>{t}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

// ───────── Hero — med mouse + scroll parallax ─────────
const BroadcastHero = ({ accent, onNav, openCount = 0, discord = {}, totalPrize = 0, interestCount = null }) => {
  const heroRef = React.useRef(null);
  const mp = useMouseParallax(heroRef, 24);
  const scrollY = useScrollParallax(0.4);
  return (
    <section ref={heroRef} style={{
      position: "relative", padding: 0, minHeight: 720,
      borderBottom: "1px solid var(--line)",
      background: "var(--bg-0)", overflow: "hidden",
    }}>
      {/* Diagonal split bg — base layer */}
      <div style={{
        position: "absolute", inset: 0,
        background: `linear-gradient(115deg, var(--bg-1) 0%, var(--bg-1) 58%, var(--bg-0) 58%)`,
        transform: `translate3d(${mp.x * 0.15}px, ${mp.y * 0.15 + scrollY * 0.3}px, 0)`,
        willChange: "transform",
      }} />
      {/* Grid stripes — mid layer, glir litt raskere */}
      <div style={{
        position: "absolute", inset: -40,
        backgroundImage: `repeating-linear-gradient(115deg, transparent 0 80px, rgba(255,255,255,0.025) 80px 81px)`,
        pointerEvents: "none",
        transform: `translate3d(${mp.x * 0.4}px, ${mp.y * 0.4 + scrollY * 0.6}px, 0)`,
        willChange: "transform",
      }} />
      {/* Big watermark text — deep layer */}
      <div style={{
        position: "absolute", right: -40, top: 40,
        fontFamily: "var(--font-stencil)", fontSize: 320, lineHeight: 0.9,
        color: "rgba(255,255,255,0.018)", pointerEvents: "none", letterSpacing: "-0.02em",
        transform: `translate3d(${mp.x * 0.6}px, ${mp.y * 0.6 + scrollY * 0.8}px, 0)`,
        willChange: "transform",
      }}>NORGE</div>
      {/* Diagonal accent slash — foreground layer, motsatt vei */}
      <div style={{
        position: "absolute", top: "55%", right: -20, width: 360, height: 6,
        background: accent, transform: `rotate(-25deg) translate3d(${-mp.x * 0.5}px, ${-mp.y * 0.5}px, 0)`,
        willChange: "transform",
      }} />

      <div style={{
        position: "relative", zIndex: 1, padding: "72px 48px",
        display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 40,
      }}>
        {/* LEFT */}
        <div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            border: `1px solid ${accent}`, padding: "6px 14px",
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", color: accent,
            marginBottom: 24,
          }}>
            <span style={{ width: 8, height: 8, background: accent, borderRadius: "50%" }} />
            ON AIR · LIVE TURNERINGER · ÅPEN PÅMELDING
          </div>

          <h1 style={{
            fontFamily: "var(--font-stencil)", fontSize: 156, lineHeight: 0.88, letterSpacing: "-0.005em",
            margin: 0, textShadow: "0 0 40px rgba(0,0,0,0.6)",
            transform: `translate3d(${mp.x * 0.3}px, ${mp.y * 0.3}px, 0)`,
            willChange: "transform",
          }}>
            WARZONE<br/>
            <span style={{ color: accent }}>LIGA</span>{" "}
            <span style={{
              display: "inline-block", transform: "skewX(-12deg)", borderBottom: `8px solid ${accent}`,
              paddingRight: 12,
            }}>NORGE</span>
          </h1>

          <p style={{
            fontSize: 19, color: "var(--text-dim)", maxWidth: 580, marginTop: 28, lineHeight: 1.5,
          }}>
            Norske turneringer jevlig. Verifiserte resultater, premier i pott,
            ekte konkurranse. Sesongbasert liga kommer — meld interesse for å bli varslet.
          </p>

          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <button onClick={() => onNav && onNav("turneringer")} className="cta" style={{
              background: accent, color: "var(--bg-0)", borderColor: accent,
              fontWeight: 700, padding: "16px 28px", cursor: "pointer",
            }}>
              <span>SE ÅPNE TURNERINGER</span> <span>▶</span>
            </button>
            <a href="https://discord.gg/DTgGQSCKgU" target="_blank" rel="noopener" className="cta cta-ghost" style={{
              padding: "16px 22px", borderColor: "var(--line)", textDecoration: "none",
            }}>
              <span style={{ color: accent }}>↗</span> JOIN DISCORD{discord.online != null ? ` (${discord.online} online nå)` : ""}
            </a>
          </div>

          {/* H-stats */}
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
            border: "1px solid var(--line)", marginTop: 36,
            background: "var(--bg-0)",
          }}>
            {[
              { n: String(openCount), l: "ÅPNE TURNERINGER" },
              { n: totalPrize >= 1000 ? `${Math.round(totalPrize/1000)}K` : totalPrize > 0 ? String(totalPrize) : "—", l: "KRONER I POTT" },
              { n: discord.online != null ? String(discord.online) : "—", l: "ONLINE PÅ DISCORD" },
              { n: interestCount != null ? String(interestCount) : "—", l: "PÅ LIGA-LISTEN" },
            ].map((s, i) => (
              <div key={i} style={{
                padding: "16px 18px", borderRight: i < 3 ? "1px solid var(--line)" : "none",
              }}>
                <div style={{
                  fontFamily: "var(--font-stencil)", fontSize: 30, color: accent, lineHeight: 1,
                }}>{s.n}</div>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
                  letterSpacing: "0.18em", marginTop: 6,
                }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT: WZN LIGA interest card — wrapped i MouseTilt for 3D-effekt */}
        <MouseTilt max={6} perspective={1400} scale={1.015} style={{ alignSelf: "start", marginTop: 24 }}>
        <div style={{
          background: "var(--bg-2)", border: `1px solid ${accent}`,
          padding: 28, position: "relative",
          overflow: "hidden",
          boxShadow: "0 30px 60px -20px rgba(0,0,0,0.5)",
        }}>
          <span className="hcard-corners">
            <span /><span /><span /><span />
          </span>
          {/* SOON tag */}
          <div style={{
            position: "absolute", top: 0, right: 0,
            background: accent, color: "var(--bg-0)",
            fontFamily: "var(--font-stencil)", fontSize: 11, letterSpacing: "0.1em",
            padding: "4px 14px",
          }}>SOON</div>
          {/* Big LIGA watermark */}
          <div style={{
            position: "absolute", right: -16, bottom: -50,
            fontFamily: "var(--font-stencil)", fontSize: 220, lineHeight: 1,
            color: "rgba(255,107,53,0.04)", pointerEvents: "none", letterSpacing: "-0.02em",
          }}>LIGA</div>

          <div style={{ position: "relative", zIndex: 1 }}>
            <div style={{
              display: "flex", justifyContent: "space-between",
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", color: "var(--text-faint)",
              paddingBottom: 12, borderBottom: "1px solid var(--line)", marginTop: 8,
            }}>
              <span>ANNOUNCEMENT / OBJ-001</span>
              <span style={{ color: accent }}>● INTEREST OPEN</span>
            </div>

            <div style={{
              fontFamily: "var(--font-stencil)", fontSize: 30, letterSpacing: "0.02em", lineHeight: 1.05,
              marginTop: 16,
            }}>
              VIL DU VÆRE MED OG BYGGE<br/>
              NORGES <span style={{ color: accent }}>RÅESTE</span><br/>
              WARZONE-LIGA?
            </div>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-dim)",
              marginTop: 12, lineHeight: 1.55,
            }}>
              To divisjoner, faste spilledager og premiepott.
              Vi starter når nok lag er på interesse-listen —
              si fra hvis du vil være med. Null forpliktelser.
            </p>

            {/* Social proof stats */}
            <div style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
              border: "1px solid var(--line)", marginTop: 20,
            }}>
              <div style={{ padding: "12px 16px", borderRight: "1px solid var(--line)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>PÅ LISTEN</div>
                <div style={{ fontFamily: "var(--font-stencil)", fontSize: 32, color: accent, lineHeight: 1, marginTop: 4 }}>
                  {interestCount != null ? interestCount : "—"}
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-dim)", letterSpacing: "0.12em", marginTop: 4 }}>SPILLERE</div>
              </div>
              <div style={{ padding: "12px 16px" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>KOMPLETTE</div>
                <div style={{ fontFamily: "var(--font-stencil)", fontSize: 32, color: "var(--text)", lineHeight: 1, marginTop: 4 }}>
                  —
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-dim)", letterSpacing: "0.12em", marginTop: 4 }}>LAG</div>
              </div>
            </div>

            {/* 2 buttons */}
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 18 }}>
              <button onClick={() => onNav && onNav("liga", { anchor: "interesse" })} className="cta" style={{
                background: accent, color: "var(--bg-0)", borderColor: accent,
                fontWeight: 700, padding: "14px 18px", justifyContent: "space-between", width: "100%", cursor: "pointer",
              }}>
                <span>MELD INTERESSE</span> <span>▶</span>
              </button>
              <button onClick={() => onNav && onNav("liga")} className="cta cta-ghost" style={{
                padding: "14px 18px", justifyContent: "space-between", width: "100%", cursor: "pointer",
              }}>
                <span>HVA ER WARZONE LIGA?</span> <span>↗</span>
              </button>
            </div>
          </div>
        </div>
        </MouseTilt>
      </div>
    </section>
  );
};

// ───────── Next drops — 4 tournaments inline ─────────
const BroadcastNextDrops = ({ accent, onNav, tournaments = [], loading = false }) => {
  // Skjul under loading helt — vis ingenting før vi vet hva som finnes
  if (loading) return null;

  const trns = tournaments;

  // Tom-tilstand: ingen åpne turneringer — vis melding + Discord CTA
  if (trns.length === 0) {
    return (
      <section style={{
        padding: "56px 48px", borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ marginBottom: 24 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 8,
          }}>NEXT ON AIR / 02</div>
          <h2 style={{ fontFamily: "var(--font-stencil)", fontSize: 44, letterSpacing: "0.02em", margin: 0 }}>
            ÅPNE TURNERINGER
          </h2>
        </div>
        <div style={{
          padding: "40px 32px", border: `1px dashed var(--line-2)`, background: "var(--bg-1)",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.2em", marginBottom: 10,
            }}>● INGEN AKTIVE OPERASJONER</div>
            <div style={{
              fontFamily: "var(--font-stencil)", fontSize: 26, color: "var(--text)", letterSpacing: "0.02em", lineHeight: 1.1,
            }}>INGEN ÅPNE TURNERINGER AKKURAT NÅ</div>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-dim)",
              marginTop: 10, maxWidth: 540, lineHeight: 1.55,
            }}>
              Det er stille på fronten. Følg oss på Discord for varsel når neste turnering åpner —
              eller meld interesse for liga-sesongen.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, flexShrink: 0 }}>
            <a href="https://discord.gg/DTgGQSCKgU" target="_blank" rel="noopener" className="cta" style={{
              background: accent, color: "var(--bg-0)", borderColor: accent,
              fontWeight: 700, padding: "12px 18px", justifyContent: "space-between",
              textDecoration: "none", minWidth: 220, cursor: "pointer",
            }}>
              <span>JOIN DISCORD</span> <span>↗</span>
            </a>
            <button onClick={() => onNav && onNav("liga", { anchor: "interesse" })} className="cta cta-ghost" style={{
              padding: "12px 18px", justifyContent: "space-between", minWidth: 220, cursor: "pointer",
            }}>
              <span>MELD INTERESSE</span> <span>→</span>
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section style={{
      padding: "56px 48px", borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 8,
          }}>NEXT ON AIR / 02</div>
          <h2 style={{ fontFamily: "var(--font-stencil)", fontSize: 44, letterSpacing: "0.02em", margin: 0 }}>
            ÅPNE TURNERINGER
          </h2>
        </div>
        <button onClick={() => onNav && onNav("turneringer")} className="ghost-btn" style={{ cursor: "pointer" }}>FULL KALENDER →</button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {trns.slice(0,4).map((t, idx) => {
          const dt = t.start_date ? formatTrnDate(t.start_date) : { date: "TBD", day: "—" };
          const isLive = t.status === "live";
          const reg = t.registered || 0;
          const maxT = t.max_teams || 16;
          const pct = (reg / maxT) * 100;
          return (
            <div key={t.id} style={{
              background: isLive ? "var(--bg-2)" : "var(--bg-1)",
              border: `1px solid ${isLive ? accent : "var(--line)"}`,
              padding: 18, position: "relative",
            }}>
              {isLive && (
                <div style={{
                  position: "absolute", top: -1, left: -1,
                  background: accent, color: "var(--bg-0)",
                  fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em",
                  padding: "4px 10px", fontWeight: 700,
                }}>● LIVE NÅ</div>
              )}
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
                letterSpacing: "0.18em", paddingBottom: 10, borderBottom: "1px solid var(--line)",
                marginTop: isLive ? 16 : 0,
              }}>
                <span>EV-{String(idx+1).padStart(3,"0")}</span>
                <span style={{ color: accent }}>{(t.type || "bracket").toUpperCase()}</span>
              </div>
              <h3 style={{
                fontFamily: "var(--font-stencil)", fontSize: 22, letterSpacing: "0.02em", lineHeight: 1.1, marginTop: 12,
              }}>{t.name}</h3>
              <div style={{
                display: "flex", gap: 14, marginTop: 14, alignItems: "center",
              }}>
                <div style={{
                  padding: "8px 12px", border: `2px solid ${isLive ? accent : "var(--line-2)"}`, textAlign: "center", minWidth: 64,
                }}>
                  <div style={{ fontFamily: "var(--font-stencil)", fontSize: 22, lineHeight: 1, color: isLive ? accent : "var(--text)" }}>
                    {dt.date.split(".")[0]}
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--text-faint)", letterSpacing: "0.18em", marginTop: 2 }}>
                    {dt.day}
                  </div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.1em" }}>
                    {(t.team_size || "trios").toUpperCase()} · {t.games || 5}G
                  </div>
                  <div style={{ fontFamily: "var(--font-stencil)", fontSize: 18, color: accent, marginTop: 2 }}>
                    {(t.prize_pool || 0) >= 1000 ? `${((t.prize_pool||0)/1000)}K` : (t.prize_pool || 0)} kr
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 14 }}>
                <div style={{
                  display: "flex", justifyContent: "space-between",
                  fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.15em",
                  marginBottom: 6,
                }}>
                  <span>{reg}/{maxT} LAG</span>
                  <span>{Math.round(pct)}%</span>
                </div>
                <div style={{ position: "relative", height: 4, background: "var(--bg-3)" }}>
                  <div style={{ position: "absolute", inset: 0, width: `${pct}%`, background: accent }} />
                </div>
              </div>
              <button onClick={() => onNav && onNav("turnering", { tournamentId: t.id })} className="cta cta-ghost" style={{
                marginTop: 16, width: "100%", justifyContent: "space-between",
                padding: "10px 14px", fontSize: 12, cursor: "pointer",
              }}>
                <span>{isLive ? "FØLG LIVE" : "PÅMELD"}</span> <span>→</span>
              </button>
            </div>
          );
        })}
      </div>
    </section>
  );
};

// ───────── Hvem er vi? — samling, åpent for alle ─────────
const BroadcastWhoWeAre = ({ accent }) => {
  const points = [
    { k: "ÅPENT FOR ALLE",
      p: "Bronze eller Iridescent — alle er velkommen. Vi har turneringer for casuals og pulser med litt høyere innsats for de som vil teste seg." },
    { k: "NORSK MILJØ",
      p: "Aktiv Discord-server der det norske Warzone-miljøet er samlet. Trio-søk, lag-bytte, scrims, banter — alt på ett sted." },
    { k: "TURNERING + LIGA",
      p: "Ukentlige turneringer som kjører hele tiden, og en sesonglang liga på vei når vi er nok lag." },
  ];
  return (
    <section style={{
      padding: "64px 48px", borderBottom: "1px solid var(--line)",
      background: "var(--bg-0)", position: "relative", overflow: "hidden",
    }}>
      {/* Diagonal stripe pattern */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `repeating-linear-gradient(115deg, transparent 0 120px, rgba(255,255,255,0.015) 120px 121px)`,
        pointerEvents: "none",
      }} />

      <div style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40 }}>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
            }}>BRIEFING / 03</div>
            <h2 style={{
              fontFamily: "var(--font-stencil)", fontSize: 80, letterSpacing: "0.01em",
              margin: 0, lineHeight: 0.95,
            }}>HVEM ER <span style={{ color: accent }}>VI?</span></h2>
          </div>
          {/* Diagonal accent slashes */}
          <div style={{ display: "flex", flexDirection: "column", gap: 6, paddingBottom: 16 }}>
            <div style={{ width: 80, height: 3, background: accent, transform: "skewX(-25deg)" }} />
            <div style={{ width: 60, height: 3, background: accent, transform: "skewX(-25deg)", opacity: 0.5 }} />
            <div style={{ width: 40, height: 3, background: accent, transform: "skewX(-25deg)", opacity: 0.25 }} />
          </div>
        </div>

        {/* Big intro + supporting points */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "flex-start",
        }}>
          {/* Left: lead paragraph */}
          <div style={{
            position: "relative", padding: "0 0 0 32px", borderLeft: `4px solid ${accent}`,
          }}>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 28, lineHeight: 1.4, color: "var(--text)",
              margin: 0, textWrap: "pretty",
            }}>
              Vi prøver å <strong style={{ color: accent }}>samle Warzone Norge</strong> —
              gjennom ukentlige turneringer og en sesonglang liga som er på vei.
            </p>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.6, color: "var(--text-dim)",
              marginTop: 22,
            }}>
              Det er ikke en lukket scene for proffer. Spiller du en gang i uka eller hver kveld,
              er du to-trios-stack eller helt alene — du er velkommen.
              Vi setter opp formater for alle nivåer, og rangerer resultatene på en måte
              som gjør at både nye og erfarne lag har noe å spille om.
            </p>
          </div>

          {/* Right: 3 supporting points */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {points.map((it, i) => (
              <div key={it.k} style={{
                background: "var(--bg-1)", border: "1px solid var(--line)",
                padding: "18px 22px", position: "relative", overflow: "hidden",
              }}>
                {/* number watermark */}
                <div style={{
                  position: "absolute", right: -4, top: -20,
                  fontFamily: "var(--font-stencil)", fontSize: 96, lineHeight: 1,
                  color: "rgba(255,255,255,0.03)", pointerEvents: "none", letterSpacing: "-0.02em",
                }}>{String(i+1).padStart(2,"0")}</div>
                <div style={{ position: "relative", zIndex: 1 }}>
                  <div style={{
                    display: "flex", alignItems: "center", gap: 10, marginBottom: 6,
                  }}>
                    <span style={{ width: 8, height: 8, background: accent, display: "inline-block" }} />
                    <h3 style={{
                      fontFamily: "var(--font-stencil)", fontSize: 16, letterSpacing: "0.06em",
                      margin: 0, color: "var(--text)",
                    }}>{it.k}</h3>
                  </div>
                  <p style={{
                    fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)",
                    margin: 0, lineHeight: 1.55,
                  }}>{it.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ───────── Liga teaser — small banner with mini-form ─────────
const BroadcastLigaTeaser = ({ accent }) => (
  <section style={{
    padding: "40px 48px",
    background: "var(--bg-1)",
    borderBottom: "1px solid var(--line)",
    position: "relative", overflow: "hidden",
  }}>
    {/* Subtle big "LIGA" in bg */}
    <div style={{
      position: "absolute", right: -40, top: -60,
      fontFamily: "var(--font-stencil)", fontSize: 280, lineHeight: 1,
      color: "rgba(255,255,255,0.025)", pointerEvents: "none", letterSpacing: "-0.02em",
    }}>LIGA</div>

    <div style={{
      position: "relative", zIndex: 1,
      display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
    }}>
      <div>
        <div style={{
          display: "inline-block",
          fontFamily: "var(--font-stencil)", fontSize: 11, letterSpacing: "0.08em",
          background: accent, color: "var(--bg-0)", padding: "4px 12px", marginBottom: 16,
        }}>COMING SOON</div>
        <h3 style={{
          fontFamily: "var(--font-stencil)", fontSize: 38, letterSpacing: "0.02em",
          lineHeight: 1.05, margin: 0,
        }}>
          Sesonglang <span style={{ color: accent }}>WZN LIGA</span> er på vei.
        </h3>
        <p style={{
          fontSize: 15, color: "var(--text-dim)", marginTop: 12, maxWidth: 640, lineHeight: 1.55,
        }}>
          To divisjoner, 20 matchdays, ~150&nbsp;000 i pott. Vi lanserer når interessen er stor nok.
          Vil du være med på sesong 06? Si fra — null forpliktelser.
        </p>
        <div style={{
          display: "flex", gap: 18, marginTop: 14,
          fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.12em",
        }}>
          <span>spillere melder seg på fortløpende</span>
        </div>
      </div>

      {/* Compact mini-form */}
      <div style={{
        display: "flex", flexDirection: "column", gap: 8, minWidth: 320,
        border: `1px dashed ${accent}`, padding: 18, background: "rgba(255,107,53,0.04)",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em",
        }}>MELD INTERESSE</div>
        <input type="text" placeholder="Discord-navn (f.eks. bruker#1234)" style={{
          background: "var(--bg-2)", border: "1px solid var(--line-2)", padding: "10px 12px",
          fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text)", outline: "none",
        }} />
        <div style={{ display: "flex", gap: 6 }}>
          <button className="ghost-btn" style={{ flex: 1, padding: "9px 6px", fontSize: 11 }}>SOLO</button>
          <button className="ghost-btn" style={{ flex: 1, padding: "9px 6px", fontSize: 11, borderColor: accent, color: accent }}>LAG</button>
        </div>
        <button className="cta" style={{
          background: accent, color: "var(--bg-0)", borderColor: accent,
          fontWeight: 700, padding: "12px 14px", justifyContent: "space-between", marginTop: 4,
        }}>
          <span>MELD MEG PÅ LISTEN</span> <span>▶</span>
        </button>
      </div>
    </div>
  </section>
);

// ───────── Slik kommer du i gang — replaces fake "top fraggers" ─────────
const BroadcastGetStarted = ({ accent, onNav, discord = {} }) => {
  const steps = [
    { n: "01", k: "LAG BRUKER", p: "Logg inn med Discord. 30 sekunder, ingen passord å huske." },
    { n: "02", k: "BLI MED I MILJØET", p: "Hopp inn på Discord-serveren. Finn lag, snakk med kapteiner, se hvem som er på." },
    { n: "03", k: "MELD DEG PÅ", p: "Plukk neste åpne turnering. Solo eller komplett lag — begge funker." },
    { n: "04", k: "SPILL & RAPPORTER", p: "Spill kveldene som annonsert. Last opp scoreboard etter hver kamp — AI hjelper, admin verifiserer." },
  ];
  return (
    <section style={{
      padding: "64px 48px", background: "var(--bg-0)",
      borderBottom: "1px solid var(--line)", position: "relative", overflow: "hidden",
    }}>
      {/* Diagonal stripe accent */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `repeating-linear-gradient(115deg, transparent 0 120px, rgba(255,255,255,0.015) 120px 121px)`,
        pointerEvents: "none",
      }} />

      <div style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
            }}>BRIEFING / 04</div>
            <h2 style={{
              fontFamily: "var(--font-stencil)", fontSize: 64, letterSpacing: "0.01em", margin: 0, lineHeight: 0.95,
            }}>SLIK KOMMER DU <span style={{ color: accent }}>I GANG.</span></h2>
            <p style={{
              fontSize: 16, color: "var(--text-dim)", maxWidth: 640, marginTop: 14, lineHeight: 1.55,
            }}>
              Fire steg fra null til din første turnering. Ingen sølv-knapper, ingen kompliserte registreringer.
            </p>
          </div>
          {/* Diagonal accent slashes */}
          <div style={{ display: "flex", flexDirection: "column", gap: 6, paddingBottom: 16 }}>
            <div style={{ width: 80, height: 3, background: accent, transform: "skewX(-25deg)" }} />
            <div style={{ width: 60, height: 3, background: accent, transform: "skewX(-25deg)", opacity: 0.5 }} />
            <div style={{ width: 40, height: 3, background: accent, transform: "skewX(-25deg)", opacity: 0.25 }} />
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32, alignItems: "stretch" }}>
          {/* Steps */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
            {steps.map((s) => (
              <div key={s.n} style={{
                background: "var(--bg-1)", border: "1px solid var(--line)",
                padding: 22, position: "relative", overflow: "hidden", minHeight: 170,
              }}>
                {/* Big number watermark */}
                <div style={{
                  position: "absolute", right: -10, bottom: -30,
                  fontFamily: "var(--font-stencil)", fontSize: 150, lineHeight: 1,
                  color: "rgba(255,255,255,0.03)", pointerEvents: "none", letterSpacing: "-0.02em",
                }}>{s.n}</div>

                <div style={{ position: "relative", zIndex: 1 }}>
                  <div style={{
                    fontFamily: "var(--font-stencil)", fontSize: 26, color: accent, lineHeight: 1, letterSpacing: "0.02em",
                  }}>{s.n}</div>
                  <h3 style={{
                    fontFamily: "var(--font-stencil)", fontSize: 18, letterSpacing: "0.04em",
                    marginTop: 14, lineHeight: 1.15,
                  }}>{s.k}</h3>
                  <p style={{
                    fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-dim)",
                    marginTop: 8, lineHeight: 1.55, maxWidth: "94%",
                  }}>{s.p}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Discord card */}
          <div style={{
            background: "var(--bg-2)", border: `1px solid ${accent}`,
            padding: 28, position: "relative", overflow: "hidden",
            display: "flex", flexDirection: "column",
          }}>
            <span className="hcard-corners">
              <span /><span /><span /><span />
            </span>
            {/* Discord-purple subtle background tag */}
            <div style={{
              position: "absolute", right: -20, top: -40,
              fontFamily: "var(--font-stencil)", fontSize: 200, lineHeight: 1,
              color: "rgba(255,255,255,0.025)", letterSpacing: "-0.02em", pointerEvents: "none",
            }}>HQ</div>

            <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", height: "100%" }}>
              <div style={{
                display: "flex", justifyContent: "space-between",
                fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", color: "var(--text-faint)",
                paddingBottom: 12, borderBottom: "1px solid var(--line)",
              }}>
                <span>BASE / HQ</span>
                <span style={{ color: accent }}>● ALWAYS ON</span>
              </div>

              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 32, letterSpacing: "0.02em",
                lineHeight: 1.05, marginTop: 18,
              }}>
                DISCORD — DER MILJØET <span style={{ color: accent }}>SAMLES</span>
              </div>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)",
                marginTop: 12, lineHeight: 1.55,
              }}>
                Lag-søk, scrim-organisering, banter, turnerings-annonseringer, kapteiner som leter etter folk.
                Mest aktivt kvelden før hver turnering.
              </p>

              {/* Channel preview */}
              <div style={{
                marginTop: 18, padding: "14px 16px",
                background: "var(--bg-0)", border: "1px solid var(--line)",
                display: "flex", flexDirection: "column", gap: 6,
              }}>
                {[
                  { ch: "#generelt",       n: "423" },
                  { ch: "#lag-søk",        n: "182" },
                  { ch: "#scrims",         n:  "94" },
                  { ch: "#turneringer",    n: "211" },
                ].map((c) => (
                  <div key={c.ch} style={{
                    display: "flex", justifyContent: "space-between", alignItems: "baseline",
                    fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.05em",
                  }}>
                    <span style={{ color: "var(--text-dim)" }}>{c.ch}</span>
                    <span style={{ color: "var(--text-faint)", fontSize: 10, letterSpacing: "0.18em" }}>{c.n} msg/uke</span>
                  </div>
                ))}
              </div>

              {/* Member count */}
              <div style={{
                display: "flex", alignItems: "baseline", gap: 12, marginTop: 18,
                paddingTop: 14, borderTop: "1px dashed var(--line-2)",
              }}>
                <span style={{
                  fontFamily: "var(--font-stencil)", fontSize: 48, color: accent, lineHeight: 1,
                }}>{discord.online != null ? discord.online : "—"}</span>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)",
                  letterSpacing: "0.15em",
                }}>SPILLERE ONLINE NÅ</span>
              </div>

              <a href="https://discord.gg/DTgGQSCKgU" target="_blank" rel="noopener" className="cta" style={{
                marginTop: "auto", paddingTop: 14,
                background: accent, color: "var(--bg-0)", borderColor: accent,
                fontWeight: 700, padding: "14px 18px", justifyContent: "space-between",
                textDecoration: "none",
              }}>
                <span>JOIN DISCORD</span> <span>↗</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ───────── Footer ─────────
const BroadcastFooter = ({ accent }) => (
  <section style={{
    padding: "40px 48px 56px",
    fontFamily: "var(--font-mono)", fontSize: 11,
    color: "var(--text-faint)", letterSpacing: "0.18em",
  }}>
    <div style={{
      display: "flex", justifyContent: "space-between", paddingTop: 24,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ width: 12, height: 12, background: accent }} />
        <span style={{
          fontFamily: "var(--font-stencil)", fontSize: 18, color: "var(--text)", letterSpacing: "0.06em",
        }}>WZN LIGA NORGE</span>
      </div>
      <span>DISCORD · TWITCH · YOUTUBE · TWITTER</span>
      <span>BROADCAST CTRL · v2026.05.19</span>
    </div>
  </section>
);

Object.assign(window, { BroadcastLanding });