// Hvem er vi — about page. Mission, story, verdier, team/mods, kontakt.

const OmOssPage = ({ accent }) => {
  const [discordOnline, setDiscordOnline] = React.useState(null);
  React.useEffect(() => {
    fetch("https://discord.com/api/guilds/798843968527269938/widget.json")
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d?.presence_count != null) setDiscordOnline(d.presence_count); })
      .catch(() => {});
  }, []);
  return (
  <>
    <PageHeader
      eyebrow="ABOUT / 06"
      title={<>HVEM ER <span style={{ color: accent }}>VI?</span></>}
      sub="WZN Liga er et åpent norsk Warzone-community drevet av folk som faktisk spiller. Vi arrangerer ukentlige turneringer og bygger en sesonglang liga."
      accent={accent}
    />

    {/* Big mission statement */}
    <section style={{
      padding: "72px 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: 360, lineHeight: 0.9,
        color: "rgba(255,255,255,0.02)", pointerEvents: "none", letterSpacing: "-0.02em",
      }}>NORGE</div>

      <div style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "flex-start" }}>
        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 12, color: accent, letterSpacing: "0.3em",
            marginBottom: 24,
          }}>— OPPDRAGET —</div>
          <h2 style={{
            fontFamily: "var(--font-stencil)", fontSize: 90, letterSpacing: "0.01em", lineHeight: 0.95,
            margin: 0,
          }}>
            SAMLE<br/>
            <span style={{ color: accent }}>WARZONE</span><br/>
            NORGE.
          </h2>
        </div>
        <div style={{
          paddingTop: 60, paddingLeft: 32, borderLeft: `4px solid ${accent}`,
        }}>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 24, lineHeight: 1.45, color: "var(--text)",
            margin: 0, textWrap: "pretty",
          }}>
            <span style={{
              float: "left", fontFamily: "var(--font-stencil)", fontSize: 84, lineHeight: 0.85,
              color: accent, marginRight: 14, marginTop: 6, marginBottom: -6,
            }}>D</span>
            et finnes hundrevis av norske Warzone-spillere som kunne spilt mot
            hverandre dag etter dag — uten å vite hvem som faktisk er best.
            Vi prøver å gjøre noe med det.
          </p>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17, color: "var(--text-dim)",
            marginTop: 22, lineHeight: 1.65,
          }}>
            Turneringer ukentlig, en sesonglang liga på vei, verifiserte resultater og en Discord-server
            der lag finner hverandre. Åpent for alle — bronze eller iridescent — fordi det er sånn
            et miljø vokser.
          </p>
        </div>
      </div>
    </section>

    {/* Verdier */}
    <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,
        }}>VERDIER / 06.A</div>
        <h2 style={{
          fontFamily: "var(--font-stencil)", fontSize: 56, letterSpacing: "0.02em", margin: 0, lineHeight: 0.95,
        }}>HVA VI <span style={{ color: accent }}>STÅR FOR.</span></h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
        {[
          { n: "01", k: "ÅPENT FOR ALLE",
            p: "Bronze eller Iridescent — alle er velkommen. Vi har formater for casuals og for de som vil teste seg, slik at det er noe å spille om uansett nivå." },
          { n: "02", k: "TRANSPARENS",
            p: "Verifiserte resultater, åpen regelsett, åpen kommunikasjon. Endringer i format eller regler kommer i god tid med begrunnelse." },
          { n: "03", k: "NORSK MILJØ",
            p: "Norsk språk, norske spillere, norske tidspunkt. Vi planlegger rundt nordmenns kalendre — ikke amerikanske kveldsslot." },
          { n: "04", k: "DREVET AV SPILLERE",
            p: "Vi som driver dette spiller selv. Beslutninger tas av folk som faktisk er i lobbies kvelden før." },
          { n: "05", k: "FAIR PLAY",
            p: "Null toleranse for juks, toxicity og targeted harassment. Anti-cheat verifiseres, rapporter tas på alvor." },
          { n: "06", k: "BYGGES SAMMEN",
            p: "Vi spør, vi lytter, vi endrer. Discord-serveren er der avgjørelsene starter, og det er der du kan påvirke hvordan ligaen utvikler seg." },
        ].map((v) => (
          <div key={v.n} style={{
            background: "var(--bg-1)", border: "1px solid var(--line)",
            padding: 24, position: "relative", overflow: "hidden", minHeight: 200,
          }}>
            <div style={{
              position: "absolute", right: -8, bottom: -30,
              fontFamily: "var(--font-stencil)", fontSize: 160, lineHeight: 1,
              color: "rgba(255,255,255,0.03)", pointerEvents: "none",
            }}>{v.n}</div>
            <div style={{ position: "relative", zIndex: 1 }}>
              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 28, color: accent, lineHeight: 1, letterSpacing: "0.02em",
              }}>{v.n}</div>
              <h3 style={{
                fontFamily: "var(--font-stencil)", fontSize: 18, letterSpacing: "0.04em",
                marginTop: 14, lineHeight: 1.15,
              }}>{v.k}</h3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)",
                marginTop: 10, lineHeight: 1.6, maxWidth: "94%",
              }}>{v.p}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* Team / mods */}
    <section style={{
      padding: "64px 48px",
      background: "var(--bg-1)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ marginBottom: 32 }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
        }}>TEAM / 06.B</div>
        <h2 style={{
          fontFamily: "var(--font-stencil)", fontSize: 56, letterSpacing: "0.02em", margin: 0, lineHeight: 0.95,
        }}>HVEM <span style={{ color: accent }}>DRIVER</span> DETTE.</h2>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-dim)", marginTop: 14, maxWidth: 620, lineHeight: 1.55,
        }}>
          Et lite team av norske Warzone-spillere og admins. Vi er på Discord daglig — slå på tråden hvis du har spørsmål eller forslag.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {[
          { name: "Magicsidd",  role: "Founder & Admin",  tag: "FND" },
          { name: "Cryptic",    role: "Tournament Ops",   tag: "OPS" },
          { name: "Hawk1",      role: "Discord Mod",      tag: "MOD" },
          { name: "FrostByte",  role: "Score Verifier",   tag: "VER" },
        ].map((p, i) => (
          <div key={p.name} style={{
            background: "var(--bg-2)", border: "1px solid var(--line)",
            padding: 20, position: "relative",
          }}>
            <div style={{
              width: 64, height: 64, border: `2px solid ${accent}`, background: "var(--bg-3)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-stencil)", fontSize: 22, color: accent, letterSpacing: "0.04em",
              marginBottom: 16,
            }}>{p.tag}</div>
            <div style={{
              fontFamily: "var(--font-stencil)", fontSize: 18, letterSpacing: "0.04em",
            }}>{p.name}</div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.12em", marginTop: 4,
            }}>{p.role.toUpperCase()}</div>
            <div style={{
              marginTop: 14, paddingTop: 12, borderTop: "1px dashed var(--line-2)",
              display: "flex", justifyContent: "space-between",
              fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.15em",
            }}>
              <span>OPS-CODE</span>
              <span style={{ color: accent }}>06.{String(i+1).padStart(2,"0")}</span>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* Kontakt + Discord CTA */}
    <section style={{
      padding: "64px 48px",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "stretch",
      }}>
        <div style={{
          background: "var(--bg-2)", border: `1px solid ${accent}`,
          padding: 32, position: "relative", overflow: "hidden",
          display: "flex", flexDirection: "column",
        }}>
          <span className="hcard-corners">
            <span /><span /><span /><span />
          </span>
          <div style={{
            position: "absolute", right: -20, top: -40,
            fontFamily: "var(--font-stencil)", fontSize: 200, lineHeight: 1,
            color: "rgba(255,255,255,0.025)", pointerEvents: "none", letterSpacing: "-0.02em",
          }}>HQ</div>

          <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", height: "100%" }}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em",
              paddingBottom: 12, borderBottom: "1px solid var(--line)",
            }}>BASE / HQ</div>
            <h3 style={{
              fontFamily: "var(--font-stencil)", fontSize: 36, letterSpacing: "0.02em", lineHeight: 1.05,
              marginTop: 18,
            }}>
              DISCORD — DER MILJØET <span style={{ color: accent }}>SAMLES</span>
            </h3>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)", marginTop: 12, lineHeight: 1.6,
            }}>
              Det er her alt skjer. Lag-søk, scrim-organisering, banter, turnerings-annonseringer.
              Mest aktivt kvelden før hver turnering.
            </p>
            <div style={{
              display: "flex", alignItems: "baseline", gap: 12, marginTop: "auto", paddingTop: 18,
              borderTop: "1px dashed var(--line-2)",
            }}>
              <span style={{ fontFamily: "var(--font-stencil)", fontSize: 48, color: accent, lineHeight: 1 }}>{discordOnline != null ? discordOnline : "—"}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.15em" }}>ONLINE PÅ DISCORD NÅ</span>
            </div>
            <button className="cta" style={{
              marginTop: 16,
              background: accent, color: "var(--bg-0)", borderColor: accent,
              fontWeight: 700, padding: "14px 18px", justifyContent: "space-between",
            }}>
              <span>JOIN DISCORD</span> <span>↗</span>
            </button>
          </div>
        </div>

        <div style={{
          background: "var(--bg-1)", border: "1px solid var(--line)",
          padding: 32, position: "relative",
        }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
          }}>KONTAKT / 06.C</div>
          <h3 style={{
            fontFamily: "var(--font-stencil)", fontSize: 32, letterSpacing: "0.02em", lineHeight: 1.05, margin: 0,
          }}>SPØR OSS OM HVA <span style={{ color: accent }}>SOM HELST.</span></h3>

          <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              { k: "DISCORD-TICKET",  v: "#support",                    sub: "Raskeste vei — admin svarer som regel innen timen." },
              { k: "EMAIL",           v: "hei@wzn-liga.no",             sub: "Pressehenvendelser, sponsing, partnerskap." },
              { k: "SPONSING",        v: "Vil du støtte miljøet?",       sub: "Vi tar gjerne en prat — premier, infrastruktur, eller bare backing." },
            ].map(c => (
              <div key={c.k} style={{
                padding: "14px 0", borderBottom: "1px dashed var(--line-2)",
                display: "grid", gridTemplateColumns: "140px 1fr", gap: 18, alignItems: "baseline",
              }}>
                <div>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em",
                  }}>{c.k}</div>
                </div>
                <div>
                  <div style={{
                    fontFamily: "var(--font-stencil)", fontSize: 16, color: accent, letterSpacing: "0.04em",
                  }}>{c.v}</div>
                  <div style={{
                    fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-dim)", marginTop: 4, lineHeight: 1.5,
                  }}>{c.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  </>
  );
};

Object.assign(window, { OmOssPage });