// Liga — info-side om den kommende WZN Liga. Hva blir det, format, interesse-form, FAQ.

const LigaPage = ({ accent }) => {
  const [interestCount, setInterestCount] = React.useState(0);
  React.useEffect(() => {
    if (window.db) {
      window.db.from("liga_interesse").select("id", { count: "exact", head: true })
        .then(({ count }) => { if (count != null) setInterestCount(count); });
    }
  }, []);
  return (
  <>
    <PageHeader
      eyebrow="COMING SOON / 03"
      title={<>WARZONE <span style={{ color: accent }}>LIGA</span>.</>}
      sub="Sesonglang norsk Warzone-liga med to divisjoner, ukentlige matchdays og premiepott. Vi lanserer når nok lag er på interesse-listen."
      accent={accent}
      right={
        <div style={{
          padding: "6px 14px", border: `1px solid ${accent}`, color: accent,
          fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.08em",
          background: "transparent",
        }}>SOON · INTERESSE ÅPEN</div>
      }
    />

    {/* Live LP-rangering */}
    <LigaLeaderboard accent={accent} />

    {/* Hero proposition */}
    <section style={{
      padding: "56px 48px",
      background: "var(--bg-0)",
      borderBottom: "1px solid var(--line)",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", right: -40, top: -100,
        fontFamily: "var(--font-stencil)", fontSize: 400, lineHeight: 0.9,
        color: "rgba(255,255,255,0.02)", pointerEvents: "none", letterSpacing: "-0.02em",
      }}>LIGA</div>

      <div style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <h2 style={{
            fontFamily: "var(--font-stencil)", fontSize: 84, letterSpacing: "0.01em", lineHeight: 0.95,
            margin: 0,
          }}>
            VIL DU VÆRE MED OG BYGGE<br/>
            NORGES <span style={{ color: accent }}>RÅESTE</span><br/>
            WARZONE-LIGA?
          </h2>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 18, color: "var(--text-dim)",
            marginTop: 22, lineHeight: 1.55, maxWidth: 620,
          }}>
            Vi planlegger en sesonglang liga som faktisk rangerer norske lag — med fast spilledag,
            verifiserte resultater og premiepott. Vi starter når vi er nok lag på interesse-listen.
          </p>
          <div style={{
            marginTop: 28, padding: "20px 24px",
            border: `1px dashed ${accent}`, background: "rgba(255,107,53,0.04)",
            display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center",
          }}>
            <div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em",
              }}>PÅ INTERESSE-LISTEN</div>
              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 64, color: accent, lineHeight: 1, marginTop: 4,
              }}>{interestCount}</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.12em" }}>
                spillere har sagt ifra
              </div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.12em", marginTop: 6,
              }}>VI STARTER NÅR VI ER 16+ LAG</div>
            </div>
            <a href="#interesse" style={{
              padding: "14px 22px", background: accent, color: "var(--bg-0)", borderColor: accent,
              fontFamily: "var(--font-stencil)", fontSize: 13, letterSpacing: "0.06em", fontWeight: 700,
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              MELD INTERESSE <span>▶</span>
            </a>
          </div>
        </div>

        {/* Right: planned format card */}
        <div style={{
          background: "var(--bg-1)", border: "1px solid var(--line-2)", padding: 24, position: "relative",
        }}>
          <span className="hcard-corners">
            <span /><span /><span /><span />
          </span>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
            letterSpacing: "0.2em", paddingBottom: 12, borderBottom: "1px solid var(--line)",
          }}>FORMAT · SESONG 01</div>

          <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 18 }}>
            {[
              { k: "DIVISJONER", v: "2", s: "Div.1 og Div.2 — opprykk/nedrykk hver sesong" },
              { k: "MATCHDAYS",  v: "20", s: "Søndager kl 20:00 — 5 BR-games per kveld" },
              { k: "FORMAT", v: "BR TRIOS", s: "Verdansk, Rebirth, Vondel — rotasjon" },
              { k: "PREMIEPOTT", v: "~150K", s: "kr · fordelt mellom topp 4 i hver div", accent: true },
            ].map(s => (
              <div key={s.k} style={{
                display: "grid", gridTemplateColumns: "120px 1fr",
                paddingBottom: 14, borderBottom: "1px dashed var(--line-2)",
              }}>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>{s.k}</div>
                  <div style={{
                    fontFamily: "var(--font-stencil)", fontSize: 28, lineHeight: 1, marginTop: 4,
                    color: s.accent ? accent : "var(--text)",
                  }}>{s.v}</div>
                </div>
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-dim)", alignSelf: "center",
                }}>{s.s}</div>
              </div>
            ))}
          </div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
            letterSpacing: "0.15em", marginTop: 8, lineHeight: 1.6,
          }}>
            * PLANLAGT FORMAT. KAN JUSTERES BASERT PÅ ANTALL LAG OG TILBAKEMELDINGER.
          </div>
        </div>
      </div>
    </section>

    {/* Slik blir det */}
    <section style={{
      padding: "64px 48px",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ marginBottom: 36 }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
        }}>HVORDAN / 03.B</div>
        <h2 style={{
          fontFamily: "var(--font-stencil)", fontSize: 56, letterSpacing: "0.02em", margin: 0, lineHeight: 0.95,
        }}>SLIK BLIR <span style={{ color: accent }}>EN SESONG.</span></h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {[
          { n: "01", k: "PÅMELDING", p: "Når vi har nok lag på interesse-listen, åpner vi formell påmelding med Discord-OAuth. Du bekrefter lag og roster." },
          { n: "02", k: "DIVISJONS-INNDELING", p: "Nye lag starter i Div.2. Lag som har bevist seg fra warm-up turneringer kan seede inn i Div.1 fra start." },
          { n: "03", k: "MATCHDAYS", p: "Hver søndag kl 20:00 spilles 5 BR-games. Resultater rapporteres med screenshots. AI ekstraherer score, admin verifiserer." },
          { n: "04", k: "OPPRYKK / NEDRYKK", p: "Etter siste matchday rykker topp 2 fra Div.2 opp, og bunn 2 fra Div.1 ned. Sesong-vinneren får varig plass i Hall of Fame.", accent: true },
        ].map(s => (
          <div key={s.n} style={{
            background: "var(--bg-1)", border: `1px solid ${s.accent ? accent : "var(--line)"}`,
            padding: 22, position: "relative", overflow: "hidden", minHeight: 220,
          }}>
            <div style={{
              position: "absolute", right: -10, bottom: -30,
              fontFamily: "var(--font-stencil)", fontSize: 160, lineHeight: 1,
              color: "rgba(255,255,255,0.03)", pointerEvents: "none",
            }}>{s.n}</div>
            <div style={{ position: "relative", zIndex: 1 }}>
              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 28, color: accent, lineHeight: 1, letterSpacing: "0.02em",
              }}>{s.n}</div>
              <h3 style={{
                fontFamily: "var(--font-stencil)", fontSize: 16, letterSpacing: "0.06em",
                marginTop: 12, lineHeight: 1.2,
              }}>{s.k}</h3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-dim)",
                marginTop: 10, lineHeight: 1.55,
              }}>{s.p}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* Interesse-form */}
    <section id="interesse" style={{
      padding: "72px 48px",
      background: "var(--bg-1)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.3em", marginBottom: 12,
          }}>SEKSJON 03.C · MELD INTERESSE</div>
          <h2 style={{
            fontFamily: "var(--font-stencil)", fontSize: 64, letterSpacing: "0.01em",
            lineHeight: 0.98, margin: 0,
          }}>
            BLI MED PÅ <br/>
            <span style={{ color: accent }}>LISTEN.</span>
          </h2>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17, color: "var(--text-dim)",
            marginTop: 22, maxWidth: 480, lineHeight: 1.55,
          }}>
            Null forpliktelser — du sier bare at du vil være med. Vi pinger deg
            på Discord når påmelding åpner. Du kan også fortelle litt om laget eller
            nivået ditt, så får vi planlagt riktig fra start.
          </p>
        </div>

        <LigaInteresseForm accent={accent} />
      </div>
    </section>

    {/* FAQ */}
    <section style={{
      padding: "72px 48px",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ marginBottom: 36 }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
        }}>SPØRSMÅL & SVAR / 03.D</div>
        <h2 style={{
          fontFamily: "var(--font-stencil)", fontSize: 56, letterSpacing: "0.02em", margin: 0, lineHeight: 0.95,
        }}>OFTE STILTE <span style={{ color: accent }}>SPØRSMÅL.</span></h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
        {[
          { q: "Når starter sesong 01?", a: "Vi starter når vi har 16+ lag på interesse-listen. Per nå er det 11 komplette lag. Det går unna." },
          { q: "Hva koster det å delta?", a: "Selve påmeldingen er gratis. Sponsorer dekker premiepotten." },
          { q: "Jeg har ikke fast lag — kan jeg fortsatt være med?", a: "Ja. Meld deg som solo-spiller. Vi har Discord-kanaler for lag-søk, og kapteiner kan plukke deg inn før sesongstart." },
          { q: "Hvilket nivå er forventet?", a: "Alle nivåer. Div.2 er for nye lag og casuals. Div.1 er for de mer drillede. Du starter i Div.2 hvis du er ny, og spiller deg opp." },
          { q: "Hvordan rapporteres scoren?", a: "Kaptein laster opp screenshots etter hver kamp. AI ekstraherer placement og kills, admin verifiserer. Du slipper å regne." },
          { q: "Hva skjer hvis et lag dropper midt i sesongen?", a: "Vi har reserveliste. Lag som forlater får poengfradrag, og en reservelag fyller plassen i Div.2." },
        ].map((f, i) => (
          <div key={i} style={{
            padding: "20px 24px",
            background: "var(--bg-1)", border: "1px solid var(--line)",
          }}>
            <div style={{
              fontFamily: "var(--font-stencil)", fontSize: 11, letterSpacing: "0.06em",
              color: accent, marginBottom: 8,
            }}>SP {String(i+1).padStart(2,"0")}</div>
            <div style={{
              fontFamily: "var(--font-stencil)", fontSize: 18, letterSpacing: "0.02em",
              marginBottom: 10,
            }}>{f.q}</div>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)", lineHeight: 1.6,
              margin: 0,
            }}>{f.a}</p>
          </div>
        ))}
      </div>
    </section>
  </>
  );
};

// ───────── Interesse-form med Supabase-submit ─────────
const LigaInteresseForm = ({ accent }) => {
  const [discord, setDiscord] = React.useState("");
  const [gamertag, setGamertag] = React.useState("");
  const [type, setType] = React.useState("lag");
  const [division, setDivision] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [err, setErr] = React.useState("");

  const handleSubmit = async () => {
    if (!discord.trim()) { setErr("Discord-navn er påkrevd"); return; }
    setLoading(true); setErr("");
    const { error } = await window.db.from("liga_interesse").insert({
      discord_name: discord.trim(),
      activision_id: gamertag.trim() || null,
      type,
      division_preference: division.trim() || null,
    });
    setLoading(false);
    if (error) setErr("Feil: " + error.message);
    else setSubmitted(true);
  };

  if (submitted) return (
    <div style={{ border: `1px dashed ${accent}`, padding: 40, background: "rgba(255,107,53,0.04)", textAlign: "center" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.2em", marginBottom: 12 }}>✓ REGISTRERT</div>
      <div style={{ fontFamily: "var(--font-stencil)", fontSize: 32, letterSpacing: "0.02em", lineHeight: 1.1 }}>DU ER PÅ LISTEN.</div>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)", marginTop: 12, lineHeight: 1.6 }}>
        Vi pinger deg på Discord når påmelding åpner. Ingen forpliktelser.
      </p>
    </div>
  );

  return (
    <div style={{ border: `1px dashed ${accent}`, padding: 32, background: "rgba(255,107,53,0.04)" }}>
      <div style={{
        display: "inline-block",
        fontFamily: "var(--font-stencil)", fontSize: 11, letterSpacing: "0.08em",
        background: accent, color: "var(--bg-0)", padding: "4px 12px", marginBottom: 18,
      }}>MELD INTERESSE</div>

      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <label style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em", display: "block", marginBottom: 6 }}>DISCORD-NAVN *</label>
          <input type="text" placeholder="bruker#1234" value={discord} onChange={e => setDiscord(e.target.value)} style={{
            width: "100%", boxSizing: "border-box", background: "var(--bg-2)", border: "1px solid var(--line-2)",
            padding: "12px 14px", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
          }} />
        </div>
        <div>
          <label style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em", display: "block", marginBottom: 6 }}>GAMERTAG (ACTIVISION-ID)</label>
          <input type="text" placeholder="cryptic#2345" value={gamertag} onChange={e => setGamertag(e.target.value)} style={{
            width: "100%", boxSizing: "border-box", background: "var(--bg-2)", border: "1px solid var(--line-2)",
            padding: "12px 14px", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
          }} />
        </div>

        <div>
          <label style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em", display: "block", marginBottom: 6 }}>DU VIL DELTA SOM</label>
          <div style={{ display: "flex", gap: 6 }}>
            {[
              { val: "solo", label: "SOLO-SPILLER", hint: "Vil bli plukket inn på et lag" },
              { val: "lag",  label: "KOMPLETT LAG", hint: "Vi er allerede 3+ stk" },
            ].map(o => (
              <button key={o.val} onClick={() => setType(o.val)} style={{
                flex: 1, padding: "12px 14px",
                background: type === o.val ? "var(--bg-3)" : "transparent",
                border: `1px solid ${type === o.val ? accent : "var(--line-2)"}`,
                fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.06em",
                color: type === o.val ? accent : "var(--text-dim)", cursor: "pointer", textAlign: "left",
              }}>
                <div>{o.label}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--text-faint)", letterSpacing: "0.15em", marginTop: 4, fontWeight: 400 }}>{o.hint}</div>
              </button>
            ))}
          </div>
        </div>

        <div>
          <label style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em", display: "block", marginBottom: 6 }}>DIVISJON DU SIKTER PÅ (VALGFRITT)</label>
          <input type="text" placeholder="Div.1 · Div.2 · Spiller hva som helst" value={division} onChange={e => setDivision(e.target.value)} style={{
            width: "100%", boxSizing: "border-box", background: "var(--bg-2)", border: "1px solid var(--line-2)",
            padding: "12px 14px", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
          }} />
        </div>

        {err && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "#e63946", letterSpacing: "0.1em" }}>{err}</div>}

        <button onClick={handleSubmit} disabled={loading} className="cta" style={{
          background: accent, color: "var(--bg-0)", borderColor: accent,
          fontWeight: 700, padding: "16px 20px", justifyContent: "space-between", marginTop: 6,
          opacity: loading ? 0.7 : 1, cursor: loading ? "default" : "pointer",
        }}>
          <span>{loading ? "LAGRER..." : "MELD MEG PÅ LISTEN"}</span> <span>▶</span>
        </button>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.15em", lineHeight: 1.6, textAlign: "center", marginTop: 4 }}>
          INGEN GEBYR · INGEN BINDING · KUN VARSEL NÅR SESONGEN ÅPNER
        </div>
      </div>
    </div>
  );
};

// ───────── Reusable field ─────────
const Field = ({ label, placeholder }) => (
  <div>
    <label style={{
      fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
      letterSpacing: "0.2em", display: "block", marginBottom: 6,
    }}>{label}</label>
    <input type="text" placeholder={placeholder} style={{
      width: "100%", boxSizing: "border-box",
      background: "var(--bg-2)", border: "1px solid var(--line-2)", padding: "12px 14px",
      fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
    }} />
  </div>
);

// ── Live LP-rangering ─────────────────────────────────────────────────────────
const LigaLeaderboard = ({ accent }) => {
  const [teams, setTeams] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    const fetch = async () => {
      if (window.db) {
        try {
          const { data } = await window.db
            .from("team_bonuses")
            .select("*")
            .order("bonus", { ascending: false })
            .limit(20);
          if (!cancelled && data) setTeams(data);
        } catch (e) {
          console.warn("team_bonuses feil:", e.message);
        }
      }
      if (!cancelled) setLoading(false);
    };
    fetch();

    // Realtime-oppdatering
    let sub;
    if (window.db) {
      sub = window.db.channel("liga-lb")
        .on("postgres_changes", { event: "*", schema: "public", table: "team_bonuses" }, () => fetch())
        .subscribe();
    }
    return () => { cancelled = true; if (sub) sub.unsubscribe(); };
  }, []);

  const medals = ["🥇", "🥈", "🥉"];
  const maxLP  = teams[0]?.bonus || 1;

  if (loading) return (
    <div style={{ padding: "32px 48px", color: "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 13 }}>
      LASTER RANGERING…
    </div>
  );

  if (teams.length === 0) return (
    <section style={{ padding: "40px 48px", borderBottom: "1px solid var(--line)" }}>
      <div style={{
        padding: "32px", border: "1px dashed var(--line-2)",
        textAlign: "center", color: "var(--text-dim)", fontFamily: "var(--font-body)",
      }}>
        <div style={{ fontSize: 40, marginBottom: 12 }}>🏆</div>
        <div style={{ fontSize: 16, fontWeight: 700 }}>INGEN LP-DATA ENNÅ</div>
        <div style={{ fontSize: 14, marginTop: 8 }}>Rangeringen fylles når turneringsresultater godkjennes.</div>
      </div>
    </section>
  );

  return (
    <section style={{
      padding: "48px 48px",
      borderBottom: "1px solid var(--line)",
      background: "var(--bg-1)",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: accent,
            letterSpacing: "0.25em", marginBottom: 8,
          }}>LIVE · OPPDATERES AUTOMATISK</div>
          <h3 style={{
            fontFamily: "var(--font-stencil)", fontSize: 40, margin: 0, letterSpacing: "0.02em",
          }}>LP RANGERING</h3>
        </div>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
          letterSpacing: "0.15em",
        }}>LIGAPOENG AKKUMULERT</div>
      </div>

      {/* Topp 3 podium */}
      {teams.length >= 3 && (
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          gap: 16, marginBottom: 24,
        }}>
          {[teams[1], teams[0], teams[2]].map((t, pIdx) => {
            const realIdx = pIdx === 0 ? 1 : pIdx === 1 ? 0 : 2;
            const heights = ["160px", "200px", "140px"];
            const isWinner = realIdx === 0;
            return (
              <div key={t.team_id || pIdx} style={{
                height: heights[pIdx],
                display: "flex", flexDirection: "column", alignItems: "center",
                justifyContent: "flex-end", padding: "16px 12px",
                background: isWinner ? `${accent}12` : "var(--bg-2)",
                border: `1px solid ${isWinner ? accent : "var(--line)"}`,
                position: "relative",
              }}>
                <div style={{ fontSize: pIdx === 1 ? 36 : 28, marginBottom: 6 }}>{medals[realIdx]}</div>
                <div style={{
                  fontFamily: "var(--font-stencil)", fontSize: 11, color: "var(--text-dim)",
                  letterSpacing: "0.12em", marginBottom: 4,
                }}>{t.team_id?.slice(0, 10) || "—"}</div>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: pIdx === 1 ? 28 : 22,
                  color: isWinner ? accent : "var(--text)", fontWeight: 900,
                }}>{t.bonus || 0} LP</div>
                <div style={{
                  position: "absolute", top: 8, right: 8,
                  fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
                }}>#{realIdx + 1}</div>
              </div>
            );
          })}
        </div>
      )}

      {/* Full tabell */}
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {teams.map((t, i) => {
          const barW = Math.round((t.bonus / maxLP) * 100);
          const isTop3 = i < 3;
          return (
            <div key={t.team_id || i} style={{
              display: "grid",
              gridTemplateColumns: "40px 1fr auto 80px",
              gap: 16, alignItems: "center",
              padding: "10px 16px",
              background: isTop3 ? "var(--bg-2)" : "transparent",
              borderLeft: `3px solid ${isTop3 ? accent : "var(--line)"}`,
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 13,
                color: isTop3 ? accent : "var(--text-faint)", textAlign: "center",
              }}>
                {medals[i] || `${i + 1}.`}
              </div>
              <div>
                <div style={{
                  fontFamily: "var(--font-stencil)", fontSize: 14,
                  color: "var(--text)", marginBottom: 4,
                }}>{t.team_id?.slice(0, 16) || "Ukjent lag"}</div>
                <div style={{
                  height: 3, background: "var(--line)", borderRadius: 2, overflow: "hidden",
                }}>
                  <div style={{
                    height: "100%", width: `${barW}%`,
                    background: accent, borderRadius: 2,
                  }} />
                </div>
              </div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 18,
                color: accent, fontWeight: 900, textAlign: "right",
              }}>{t.bonus || 0}</div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: "var(--text-faint)", textAlign: "right",
              }}>LP</div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

Object.assign(window, { LigaPage, LigaLeaderboard, LigaInteresseForm, Field });