/* All page components — split for clarity but registered on window */
const { useState: uS, useEffect: uE, useMemo: uM, useRef: uR } = React;

// =========================================================
// HOMEPAGE
// =========================================================
window.HomePage = function HomePage({ navigate, lang }) {
  const t = useT(lang);
  const [activeNews, setActiveNews] = uS(0);
  const news = window.NEWS;
  const upcoming = window.MATCHES.filter(m => m.status === "upcoming").slice(0, 4);
  const previous = window.MATCHES.filter(m => m.status !== "upcoming").slice(0, 4);
  const feature = news[activeNews];

  // auto-rotate
  uE(() => {
    const id = setInterval(() => setActiveNews(i => (i + 1) % news.length), 7000);
    return () => clearInterval(id);
  }, [news.length]);

  return (
    <div className="page-fade">
      {/* HERO */}
      <section className="hero hero-grid">
        <div className="wrap hero-inner">
          <div className="hero-meta">
            <span className="pill"><span className="dot"/>EU NORTH · 2026 SPRING SPLIT</span>
            <span className="pill numeric">EST. 2025 · LEAGUE OF LEGENDS · 11 ROSTERS</span>
          </div>
          <h1 className="hero-title">
            <div>{t("hero.title.line1")}</div>
            <div><span className="stroke">{t("hero.title.line2")}</span></div>
            <div>{t("hero.title.line3")}</div>
          </h1>
          <p className="hero-sub">{t("hero.intro")}</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={() => navigate({ page: "teams" })}>
              {t("hero.cta.primary")} <span className="arrow"><Icon.arrow /></span>
            </button>
            <button className="btn btn-ghost" onClick={() => navigate({ page: "matchdays" })}>
              {t("hero.cta.secondary")}
            </button>
          </div>

          <div className="hero-stats">
            <div className="stat"><div className="num">11</div><div className="lbl">{t("hero.stat.teams")}</div></div>
            <div className="stat"><div className="num">55</div><div className="lbl">{t("hero.stat.players")}</div></div>
            <div className="stat"><div className="num"><span>02</span></div><div className="lbl">{t("hero.stat.trophies")}</div></div>
            <div className="stat"><div className="num"><span>06</span></div><div className="lbl">{t("hero.stat.leagues")}</div></div>
          </div>
        </div>
      </section>

      {/* GAMES */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="// 01 — GAMES" title={t("section.games")} sub={t("section.games.sub")} />
          <div className="games-grid">
            {window.GAMES.map((g, i) => {
              const team = window.TEAMS.find(tm => tm.game === g.id);
              return (
                <div key={g.id} className="game-banner" style={{ "--bg": g.bg }} onClick={() => team && navigate({ page: "team", slug: team.slug })}>
                  <div className="bg" style={{ background: `radial-gradient(400px 240px at 70% 90%, ${g.glyphColor}26, transparent 70%), ${g.bg}` }}/>
                  <div className="number">// 0{i+1}</div>
                  <div className="arrow"><Icon.arrow size={14}/></div>
                  <div className="glyph" style={{ color: g.glyphColor }}>
                    <GameGlyph id={g.id} color={g.glyphColor} />
                  </div>
                  <div className="body">
                    <div className="game-meta">{g.short} · {team ? team.league.split("·")[0].trim() : "—"}</div>
                    <div className="game-name">{g.name}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* NEWS */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="// 02 — NEWS" title={t("section.news")} sub={t("section.news.sub")}
            right={<button className="btn btn-ghost" onClick={() => navigate({ page: "news" })}>{t("view.all")} <span className="arrow"><Icon.arrow/></span></button>} />
          <div className="news-carousel">
            <div className="news-feature" onClick={() => navigate({ page: "newsItem", id: feature.id })}>
              <div className="bg" style={{ background: feature.bg }}/>
              <div className="scrim" />
              <div className="meta-row">
                <span className="tag">{feature.category}</span>
                <span className="date">{formatDate(feature.date, lang)}</span>
              </div>
              <h3>{feature[`title_${lang}`]}</h3>
              <p>{feature[`excerpt_${lang}`]}</p>
            </div>
            <div className="news-side">
              {news.slice(0, 4).map((n, i) => (
                <div key={n.id} className={"news-card " + (i === activeNews ? "active" : "")}
                  onMouseEnter={() => setActiveNews(i)}
                  onClick={() => navigate({ page: "newsItem", id: n.id })}>
                  <div className="num">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div className="title">{n[`title_${lang}`]}</div>
                    <div className="meta">{n.category} · {formatDate(n.date, lang)}</div>
                  </div>
                  <div className="arrow"><Icon.arrow/></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* UPCOMING */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="// 03 — UPCOMING" title={t("section.upcoming")} sub={t("section.upcoming.sub")}
            right={<button className="btn btn-ghost" onClick={() => navigate({ page: "matchdays" })}>{t("view.all")} <span className="arrow"><Icon.arrow/></span></button>} />
          <div className="matches-grid">
            {upcoming.map(m => <MatchCard key={m.id} m={m} lang={lang}/>)}
          </div>
        </div>
      </section>

      {/* PREVIOUS */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="// 04 — PREVIOUS" title={t("section.previous")} sub={t("section.previous.sub")}
            right={<button className="btn btn-ghost" onClick={() => navigate({ page: "matchhistory" })}>{t("view.all")} <span className="arrow"><Icon.arrow/></span></button>} />
          <div className="matches-grid">
            {previous.map(m => <MatchCard key={m.id} m={m} lang={lang}/>)}
          </div>
        </div>
      </section>

      {/* SPONSORS */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="// 05 — PARTNERS" title={t("section.sponsors")} sub={t("section.sponsors.sub")} />
          <div className="sponsors">
            {window.SPONSORS.map(s => (
              <div key={s.id} className="sponsor" style={{position:"relative"}}>
                <div className="tier">{s.tier}</div>
                <SponsorLogo name={s.name}/>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// =========================================================
// TEAMS LIST
// =========================================================
window.TeamsPage = function TeamsPage({ navigate, lang }) {
  const t = useT(lang);
  return (
    <div className="page-fade">
      <PageHero
        crumbs={[{ label: t("nav.teams") }]}
        title={t("teams.title")}
        lead={t("teams.lead")}
        navigate={navigate} lang={lang}
      />
      <section className="section">
        <div className="wrap">
          {window.TEAMS.map(team => {
            const game = window.GAMES.find(g => g.id === team.game);
            return (
              <div key={team.slug} className="team-tile" onClick={() => navigate({ page: "team", slug: team.slug })}>
                <div className="logo"><TeamLogo team={team} size={80}/></div>
                <div>
                  <div className="name">{team.name}</div>
                  <div className="sub">{team.region} · {t("team.captain").toUpperCase()}: {team.captain}</div>
                </div>
                <div className="game-info">
                  <div className="game">{game.name}</div>
                  <div className="league">{team.league}</div>
                </div>
                <div className="arrow-wrap"><Icon.arrow size={20}/></div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
};

// =========================================================
// TEAM DETAIL
// =========================================================
window.TeamDetailPage = function TeamDetailPage({ slug, navigate, lang }) {
  const t = useT(lang);
  const team = window.TEAMS.find(tm => tm.slug === slug);
  const isLoL = team && team.game === "lol";
  const ROLE_ORDER_LOL = ["TOP", "JUNGLE", "MID", "ADC", "SUPPORT"];
  const sortedRoster = uM(() => {
    if (!team) return [];
    if (isLoL) {
      return [...team.roster].sort((a, b) => ROLE_ORDER_LOL.indexOf(a.role) - ROLE_ORDER_LOL.indexOf(b.role));
    }
    return team.roster;
  }, [team]);
  const [selectedId, setSelectedId] = uS(sortedRoster[0]?.id);
  const player = sortedRoster.find(p => p.id === selectedId);
  const game = team && window.GAMES.find(g => g.id === team.game);

  if (!team) return <div className="wrap" style={{padding:80}}>Team not found.</div>;

  return (
    <div className="page-fade">
      {/* breadcrumb */}
      <div className="page-hero" style={{paddingBottom:24}}>
        <div className="wrap page-hero-inner" style={{gap:0}}>
          <div className="crumbs">
            <button onClick={() => navigate({ page: "home" })}>{t("nav.home")}</button>
            <span className="sep">/</span>
            <button onClick={() => navigate({ page: "teams" })}>{t("nav.teams")}</button>
            <span className="sep">/</span>
            <span style={{color:"var(--ink)"}}>{team.name}</span>
          </div>
        </div>
      </div>

      {/* Team banner */}
      <section className="team-banner">
        <div className="wrap team-banner-inner">
          <div className="logo-big"><TeamLogo team={team} size={132}/></div>
          <div>
            <div className="eyebrow accent" style={{marginBottom:10}}>// {team.abbr} · {game.short}</div>
            <h1>{team.name}</h1>
            <div className="meta">
              <div className="item"><div className="lbl">{t("team.game")}</div><div className="val">{game.name}</div></div>
              <div className="item"><div className="lbl">{t("team.league")}</div><div className="val">{team.league}</div></div>
              <div className="item"><div className="lbl">{t("team.region")}</div><div className="val">{team.region}</div></div>
              <div className="item"><div className="lbl">{t("team.captain")}</div><div className="val">{team.captain}</div></div>
              <div className="item"><div className="lbl">{t("team.founded")}</div><div className="val">{team.founded}</div></div>
            </div>
          </div>
        </div>
      </section>

      <section style={{padding:"40px 0 0"}}>
        <div className="wrap">
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65, maxWidth: 920, margin: 0 }}>
            {team[`description_${lang}`]}
          </p>
        </div>
      </section>

      {/* Roster + player */}
      <section className="section" style={{paddingTop:40}}>
        <div className="wrap team-body">
          <div className="roster-panel">
            <div className="roster-head">
              <div className="ttl">{t("team.roster")}</div>
              <div className="count">{String(sortedRoster.length).padStart(2,"0")}</div>
            </div>
            <div className="roster-list">
              {sortedRoster.map(p => (
                <button key={p.id}
                  className={"roster-row " + (p.id === selectedId ? "active" : "")}
                  onClick={() => setSelectedId(p.id)}>
                  <div className="role-icon"><RoleIcon role={p.role} size={20}/></div>
                  <div className="flag">{p.country_flag}</div>
                  <div className="name-block">
                    <div className="name">{p.first} <span className="nick">"{p.nick}"</span> {p.last}</div>
                    <div className="real-name">{t("role." + p.role)} · {p.country}</div>
                  </div>
                  <div className="age">{p.age}</div>
                </button>
              ))}
            </div>
          </div>

          <div>
            {!player ? (
              <div className="player-panel player-panel-empty">
                <div>
                  <div className="display-md">{t("select.player")}</div>
                  <div style={{maxWidth:380, margin:"0 auto"}}>{t("select.player.sub")}</div>
                </div>
              </div>
            ) : (
              <div className="player-panel" key={player.id}>
                <div className="player-hero">
                  <div className="info">
                    <div className="role-tag"><RoleIcon role={player.role} size={14}/> {t("role." + player.role)}</div>
                    <div className="player-name">
                      {player.first}
                      <span className="nick">"{player.nick}"</span>
                      {player.last}
                    </div>
                    <div className="real">{player.country_flag} {player.country} · {player.age} YRS</div>
                    <div className="meta-row">
                      {Object.entries(player.stats).slice(0,4).map(([k,v]) => (
                        <div key={k} className="it">
                          <div className="lbl">{k.toUpperCase()}</div>
                          <div className="val numeric">{v}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                  {player.champion && (
                    <div className="champion" title={player.champion}>
                      <span className="champ-tag">{isLoL ? "LoL" : game.short}</span>
                      {isLoL && player.champion_id ? (
                        <img src={`https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/${player.champion_id}.png`}
                          alt={player.champion}
                          onError={(e) => { e.target.style.display = 'none'; }}
                        />
                      ) : (
                        <div style={{display:"grid",placeItems:"center",height:"100%",color:"var(--electric)",fontFamily:"var(--display)",fontSize:26,fontWeight:800,letterSpacing:"0.04em"}}>
                          {player.champion.split(" ").map(w=>w[0]).slice(0,2).join("")}
                        </div>
                      )}
                      <div className="champ-label">{player.champion}</div>
                    </div>
                  )}
                </div>
                <div className="player-body">
                  <div className="bio">{player[`bio_${lang}`]}</div>
                  <div className="player-stats">
                    {Object.entries(player.stats).map(([k,v], i) => (
                      <div key={k} className="stat">
                        <div className={"num " + (i===1 ? "accent" : "")}>{v}</div>
                        <div className="lbl">{k.toUpperCase()}</div>
                      </div>
                    ))}
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 10 }}>// LINKS</div>
                    <div className="socials">
                      {player.opgg && <a href={player.opgg} target="_blank" rel="noopener" className="social-link opgg">OP.GG <Icon.external/></a>}
                      {player.socials.twitch && <a className="social-link"><Icon.twitch/> {player.socials.twitch}</a>}
                      {player.socials.youtube && <a className="social-link"><Icon.youtube/> {player.socials.youtube}</a>}
                      {player.socials.twitter && <a className="social-link"><Icon.x/> @{player.socials.twitter}</a>}
                      {player.socials.discord && <a className="social-link"><Icon.discord/> {player.socials.discord}</a>}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="wrap" style={{marginTop:32}}>
          <a href={team.opgg_url} target="_blank" rel="noopener" className="btn btn-primary">
            {t("view.opgg")} <Icon.external size={14}/>
          </a>
        </div>
      </section>

      {/* Coaching staff */}
      <section className="section" style={{paddingTop:24}}>
        <div className="wrap">
          <SectionHead num="// STAFF" title={t("coaching.staff")} />
          <div className="staff-grid">
            {team.staff.map(s => (
              <div key={s.id} className="staff-card">
                <div className="avatar">{s.nick[0]}</div>
                <div>
                  <div className="name">{s.first} <span className="nick">"{s.nick}"</span> {s.last}</div>
                  <div className="role">{s.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// =========================================================
// NEWS
// =========================================================
window.NewsPage = function NewsPage({ navigate, lang }) {
  const t = useT(lang);
  return (
    <div className="page-fade">
      <PageHero crumbs={[{label: t("nav.news")}]} title={t("news.title")} lead={t("news.lead")} navigate={navigate} lang={lang}/>
      <section className="section">
        <div className="wrap">
          <div className="article-list">
            {window.NEWS.map(n => (
              <div key={n.id} className="article-row" onClick={() => navigate({ page: "newsItem", id: n.id })}>
                <div className="img" style={{ background: n.bg }}/>
                <div className="body">
                  <div className="meta-row">
                    <span className="tag">{n.category}</span>
                    <span className="date">{formatDate(n.date, lang)}</span>
                  </div>
                  <h3>{n[`title_${lang}`]}</h3>
                  <p>{n[`excerpt_${lang}`]}</p>
                </div>
                <div className="read">{t("read.more")} <Icon.arrow size={12}/></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

window.NewsItemPage = function NewsItemPage({ id, navigate, lang }) {
  const t = useT(lang);
  const n = window.NEWS.find(x => x.id === id);
  if (!n) return null;
  return (
    <div className="page-fade">
      <PageHero
        crumbs={[{label: t("nav.news"), onClick: () => navigate({ page: "news" })}, {label: n.category}]}
        title={n[`title_${lang}`]}
        lead={n[`excerpt_${lang}`]}
        navigate={navigate} lang={lang}
      />
      <section className="section">
        <div className="wrap" style={{display:"grid",gridTemplateColumns:"1fr 320px", gap:48, alignItems:"start"}}>
          <div>
            <div style={{ height: 360, background: n.bg, marginBottom: 32, border: "1px solid var(--abyss-line)" }}/>
            <div style={{ fontSize: 17, lineHeight: 1.7, color: "var(--ink-2)" }}>
              <p>{n[`body_${lang}`]}</p>
              <p>Lorem-style filler kept short — admin will fill the long-form body via the news editor. The article model stores: <em>id, slug, category, date, title, excerpt, body (markdown), cover_image, author, related_team, language</em>.</p>
              <p>Ready to plug into <span style={{ color: "var(--electric)", fontFamily: "var(--mono)" }}>GET /api/news/:id?lang={lang}</span>.</p>
            </div>
          </div>
          <aside style={{ position: "sticky", top: 100 }}>
            <div style={{ padding: 20, border: "1px solid var(--abyss-line)", background: "var(--abyss-mid)" }}>
              <div className="eyebrow accent" style={{marginBottom:12}}>{t("read.more")}</div>
              {window.NEWS.filter(x => x.id !== n.id).slice(0, 3).map(o => (
                <div key={o.id} onClick={() => navigate({ page: "newsItem", id: o.id })}
                  style={{ padding: "12px 0", borderTop: "1px solid var(--abyss-line-soft)", cursor: "pointer" }}>
                  <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 14, textTransform: "uppercase", letterSpacing: "0.02em", lineHeight: 1.2 }}>{o[`title_${lang}`]}</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.2em", color: "var(--ink-3)", textTransform: "uppercase", marginTop: 4 }}>{o.category} · {formatDate(o.date, lang)}</div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
};

// =========================================================
// ACHIEVEMENTS
// =========================================================
window.AchievementsPage = function AchievementsPage({ navigate, lang }) {
  const t = useT(lang);
  return (
    <div className="page-fade">
      <PageHero crumbs={[{label: t("nav.achievements")}]} title={t("ach.title")} lead={t("ach.lead")} navigate={navigate} lang={lang}/>
      <section className="section">
        <div className="wrap">
          <div className="ach-grid">
            {window.ACHIEVEMENTS.map(a => (
              <div key={a.id} className={"ach-card " + (a.place === 1 ? "first" : "")}
                onClick={() => navigate({ page: "team", slug: a.team_slug })}>
                <div className="date">{formatDate(a.date, lang)}</div>
                <div>
                  <div className="league-name">{a[`league_${lang}`]}</div>
                  <div className="team-name">{a.team}</div>
                  <div className="desc">{a[`desc_${lang}`]}</div>
                </div>
                <div className="place">
                  {a.place === 1 ? (
                    <div style={{display:"flex",flexDirection:"column",alignItems:"end",gap:6}}>
                      <span className="trophy"><Icon.trophy size={56}/></span>
                      <div className="num">01</div>
                      <div className="lbl">CHAMPION</div>
                    </div>
                  ) : (
                    <>
                      <div className="num">{String(a.place).padStart(2,"0")}</div>
                      <div className="lbl">{t("ach.place")}</div>
                    </>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// =========================================================
// ABOUT (with FAQ)
// =========================================================
window.AboutPage = function AboutPage({ navigate, lang }) {
  const t = useT(lang);
  const [openFaq, setOpenFaq] = uS(0);
  return (
    <div className="page-fade">
      <PageHero crumbs={[{label: t("nav.about.us")}]} title={t("about.title")} lead={t("about.lead")} navigate={navigate} lang={lang}/>
      <section className="section">
        <div className="wrap">
          <div className="tabs">
            <button className="tab active">{t("about.tab.about")}</button>
            <button className="tab" onClick={() => navigate({ page: "matchhistory" })}>{t("about.tab.history")}</button>
          </div>

          <div className="about-grid">
            <div className="about-text">
              <div className="eyebrow accent">// MISSION</div>
              <h2 className="display-md">{t("about.mission")}</h2>
              <p>{t("about.mission.body")}</p>

              <div style={{height:24}} />
              <div className="eyebrow accent">// HISTORY</div>
              <h2 className="display-md">{t("about.history")}</h2>
              <div style={{display:"flex",flexDirection:"column",gap:14}}>
                {window.ABOUT_HISTORY.map(h => (
                  <div key={h.year} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 24, paddingBottom:14, borderBottom:"1px solid var(--abyss-line-soft)" }}>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 36, color: "var(--electric)", lineHeight: 1 }}>{h.year}</div>
                    <div style={{ color: "var(--ink-2)", lineHeight: 1.6 }}>{h[`text_${lang}`]}</div>
                  </div>
                ))}
              </div>

              <div style={{height:24}} />
              <div className="eyebrow accent">// FAQ</div>
              <h2 className="display-md">{t("about.faq")}</h2>
              <div className="faq">
                {window.FAQ.map((f, i) => (
                  <div key={i} className={"faq-item " + (openFaq === i ? "open" : "")} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <div className="faq-q">
                      {f[`q_${lang}`]}
                      <div className="plus"><Icon.plus size={14}/></div>
                    </div>
                    {openFaq === i && <div className="faq-a">{f[`a_${lang}`]}</div>}
                  </div>
                ))}
              </div>
            </div>

            <div className="about-side">
              <div className="stat-card"><div className="lbl">{t("about.stat.teams")}</div><div className="val">11</div></div>
              <div className="stat-card"><div className="lbl">{t("about.stat.trophies")}</div><div className="val"><span>02</span></div></div>
              <div className="stat-card"><div className="lbl">{t("about.stat.players")}</div><div className="val">55</div></div>
              <div className="stat-card"><div className="lbl">{t("about.stat.events")}</div><div className="val"><span>18</span></div></div>
              <div style={{ padding: 22, background: "var(--abyss-mid)", border: "1px solid var(--abyss-line)" }}>
                <div className="eyebrow accent" style={{ marginBottom: 12 }}>// HQ</div>
                <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 24, textTransform: "uppercase", letterSpacing: "0.02em", lineHeight: 1, marginBottom: 8 }}>Copenhagen, Denmark</div>
                <div style={{ color: "var(--ink-3)", fontSize: 13 }}>Bootcamp & broadcast facility · Open since 2026.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// =========================================================
// MATCH HISTORY (with filters)
// =========================================================
window.MatchHistoryPage = function MatchHistoryPage({ navigate, lang }) {
  const t = useT(lang);
  const allMatches = uM(() => window.MATCHES.filter(m => m.status !== "upcoming"), []);
  const tournaments = uM(() => Array.from(new Set(allMatches.map(m => m.tournament))), [allMatches]);
  const [filterTeam, setFilterTeam] = uS("all");
  const [filterTournament, setFilterTournament] = uS("all");
  const [from, setFrom] = uS("");
  const [to, setTo] = uS("");

  const filtered = uM(() => allMatches.filter(m => {
    if (filterTeam !== "all" && m.team_slug !== filterTeam) return false;
    if (filterTournament !== "all" && m.tournament !== filterTournament) return false;
    const d = new Date(m.date).getTime();
    if (from && d < new Date(from).getTime()) return false;
    if (to && d > new Date(to).getTime() + 86400000) return false;
    return true;
  }), [filterTeam, filterTournament, from, to, allMatches]);

  return (
    <div className="page-fade">
      <PageHero crumbs={[{label: t("nav.about"), onClick: () => navigate({ page: "about" })}, {label: t("about.tab.history")}]}
        title={t("history.title")} lead={t("history.lead")} navigate={navigate} lang={lang}/>
      <section className="section">
        <div className="wrap">
          <div className="tabs">
            <button className="tab" onClick={() => navigate({ page: "about" })}>{t("about.tab.about")}</button>
            <button className="tab active">{t("about.tab.history")}</button>
          </div>

          <div className="filters">
            <div className="filter">
              <label>{t("history.filter.team")}</label>
              <select value={filterTeam} onChange={e => setFilterTeam(e.target.value)}>
                <option value="all">{t("all")}</option>
                {window.TEAMS.map(tm => <option key={tm.slug} value={tm.slug}>{tm.name}</option>)}
              </select>
            </div>
            <div className="filter">
              <label>{t("history.filter.tournament")}</label>
              <select value={filterTournament} onChange={e => setFilterTournament(e.target.value)}>
                <option value="all">{t("all")}</option>
                {tournaments.map(tn => <option key={tn} value={tn}>{tn}</option>)}
              </select>
            </div>
            <div className="filter">
              <label>{t("history.filter.from")}</label>
              <input type="date" value={from} onChange={e => setFrom(e.target.value)}/>
            </div>
            <div className="filter">
              <label>{t("history.filter.to")}</label>
              <input type="date" value={to} onChange={e => setTo(e.target.value)}/>
            </div>
          </div>

          {filtered.length === 0 ? (
            <div style={{ padding: 60, textAlign: "center", color: "var(--ink-3)", border: "1px dashed var(--abyss-line)" }}>
              {t("no.results")}
            </div>
          ) : (
            <div className="history-list">
              {filtered.map(m => {
                const isWin = m.status === "win";
                return (
                  <div key={m.id} className={"history-row " + (isWin ? "win" : "loss")}>
                    <div className="date">{formatDate(m.date, lang)}</div>
                    <div className="team">{m.team_abbr} · {m.team.replace("Abyssalis ","")}</div>
                    <div className={"score " + (isWin ? "w" : "l")}>{m.score_us} : {m.score_them}</div>
                    <div className="opp">{m.opp_abbr} · {m.opp}</div>
                    <div className="tour">{m.tournament}</div>
                    <div className={"res-pill " + (isWin ? "w" : "l")}>{isWin ? t("win") : t("loss")}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>
    </div>
  );
};

// =========================================================
// MATCHDAYS
// =========================================================
window.MatchdaysPage = function MatchdaysPage({ navigate, lang }) {
  const t = useT(lang);
  // Filter: upcoming within 7 days from current. We'll consider "now" = 2026-05-08 (matches mock dates).
  const now = new Date("2026-05-08T00:00:00");
  const weekFromNow = new Date(now); weekFromNow.setDate(now.getDate() + 7);
  const upcoming = uM(() => window.MATCHES.filter(m => {
    if (m.status !== "upcoming") return false;
    const d = new Date(m.date);
    return d >= now && d <= weekFromNow;
  }).sort((a,b) => new Date(a.date) - new Date(b.date)), []);

  // Group by day
  const byDay = uM(() => {
    const groups = {};
    upcoming.forEach(m => {
      const d = new Date(m.date);
      const key = d.toISOString().split("T")[0];
      groups[key] = groups[key] || [];
      groups[key].push(m);
    });
    return Object.entries(groups);
  }, [upcoming]);

  return (
    <div className="page-fade">
      <PageHero crumbs={[{label: t("nav.matchdays")}]} title={t("matchdays.title")} lead={t("matchdays.lead")} navigate={navigate} lang={lang}/>
      <section className="section">
        <div className="wrap">
          {byDay.length === 0 ? (
            <div style={{padding:60, textAlign:"center", color:"var(--ink-3)", border:"1px dashed var(--abyss-line)"}}>{t("matchdays.empty")}</div>
          ) : byDay.map(([day, matches]) => {
            const d = new Date(day + "T12:00:00");
            return (
              <div key={day} className="matchday-day">
                <h2>
                  <span className="day-num">{String(d.getDate()).padStart(2,"0")}</span>
                  <span className="day-name">{formatDayName(day, lang)}</span>
                  <span className="day-month">{useT(lang)("month."+d.getMonth())} · {d.getFullYear()}</span>
                </h2>
                <div className="matches-grid">
                  {matches.map(m => <MatchCard key={m.id} m={m} lang={lang}/>)}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
};