// views/stats.jsx — the numbers. 2026 tournament profile + all-time World Cup statistics.
function StatsView({ onRoute, clock }) {
  const A = window.WCL_ALLTIME;
  const M = window.WCL_2026.meta;
  const H = window.WCL_HISTORY;
  const ck = clock || window.WCL_CLOCK.compute('live');

  const goalsSeries = H.map(h => h.goals / (h.teams >= 32 ? 64 : h.teams >= 24 ? 52 : h.teams * 2.4));
  const attendanceSeries = [32808,21353,20824,47511,29562,23423,27912,51094,52312,49099,40679,40572,46039,48389,68991,43517,42268,52491,49669,53592,47371,53191];

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ display: 'flex', gap: 6, color: 'var(--foreground-muted)', fontSize: 12, marginBottom: 8 }}>
            <a className="link" onClick={() => onRoute('home')}>Home</a><I.ChevR size={12} /><span>Statistics</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>World Cup statistics</h1>
          <div className="sub">The 2026 tournament by the numbers, plus 96 years of all-time records — sourced from FIFA &amp; Wikipedia.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('alltime')}><I.Trophy size={14} /> All-time records</button>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('guide')}><I.Compass size={14} /> Guide</button>
        </div>
      </div>

      {/* 2026 tournament profile */}
      <div className="eyebrow" style={{ marginBottom: 10 }}>FIFA World Cup 26 · the tournament</div>
      <div className="col4" style={{ marginBottom: 12 }}>
        <div className="kpi"><div className="kpi-label">Teams</div><div className="kpi-value">{M.teams}</div><div className="kpi-delta up">+16 vs 2022</div></div>
        <div className="kpi"><div className="kpi-label">Matches</div><div className="kpi-value">{M.matches}</div><div className="kpi-delta up">+40 vs 2022</div></div>
        <div className="kpi"><div className="kpi-label">Host cities</div><div className="kpi-value">{M.cities}</div><div className="kpi-delta">{M.citiesByCountry.USA} US · {M.citiesByCountry.MEX} MX · {M.citiesByCountry.CAN} CA</div></div>
        <div className="kpi"><div className="kpi-label">Days</div><div className="kpi-value">{M.days}</div><div className="kpi-delta">Jun 11 – Jul 19</div></div>
      </div>
      <div className="col4" style={{ marginBottom: 20 }}>
        <div className="kpi"><div className="kpi-label">Largest venue</div><div className="kpi-value" style={{ fontSize: 18 }}>AT&amp;T Stadium</div><div className="kpi-delta">94,000 · Dallas · 9 matches</div></div>
        <div className="kpi"><div className="kpi-label">Matches by host</div><div className="kpi-value" style={{ fontSize: 18 }}>{M.matchesByCountry.USA}/{M.matchesByCountry.MEX}/{M.matchesByCountry.CAN}</div><div className="kpi-delta">US / MX / CA</div></div>
        <div className="kpi"><div className="kpi-label">Debutants</div><div className="kpi-value" style={{ fontSize: 18 }}>{M.debutants.length}</div><div className="kpi-delta">{M.debutants.join(', ')}</div></div>
        <div className="kpi"><div className="kpi-label">Format</div><div className="kpi-value" style={{ fontSize: 15, lineHeight: 1.25 }}>12 × 4 → R32</div><div className="kpi-delta">top 2 + 8 best thirds</div></div>
      </div>

      {/* Trends */}
      <div className="col2" style={{ marginBottom: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>Goals per match · by edition</h3><span className="subtle" style={{ fontSize: 11 }}>1930 → 2022</span></div>
          <div style={{ color: 'var(--pitch)', height: 90 }}>
            <Sparkline data={goalsSeries} color="currentColor" fill height={90} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--foreground-muted)' }}>
            <span>1930</span><span className="strong" style={{ color: 'var(--foreground)' }}>peak 5.38 · 1954</span><span>2022</span>
          </div>
        </section>
        <section className="panel">
          <div className="panel-head"><h3>Average attendance · by edition</h3><span className="subtle" style={{ fontSize: 11 }}>per match</span></div>
          <div style={{ color: 'var(--upcoming)', height: 90 }}>
            <Sparkline data={attendanceSeries} color="currentColor" fill height={90} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--foreground-muted)' }}>
            <span>1930</span><span className="strong" style={{ color: 'var(--foreground)' }}>record 68,991 · USA 1994</span><span>2022</span>
          </div>
        </section>
      </div>

      {/* All-time leaders */}
      <div className="col2">
        <section className="panel">
          <div className="panel-head"><h3>Most titles · by nation</h3><a className="link subtle" onClick={() => onRoute('alltime')}>Full table <I.ChevR size={12} /></a></div>
          <table className="table">
            <thead><tr><th>Nation</th><th style={{ width: 70, textAlign: 'right' }}>Titles</th><th style={{ width: 80, textAlign: 'right' }}>Finals</th><th style={{ width: 70, textAlign: 'right' }}>Top-4</th></tr></thead>
            <tbody>
              {A.championsByNation.map(c => (
                <tr key={c.team} onClick={() => onRoute('team', { code: c.team })} style={{ cursor: 'pointer' }}>
                  <td className="strong"><TeamRow code={c.team} /></td>
                  <td className="mono strong" style={{ textAlign: 'right', color: 'var(--trophy)' }}>{c.titles}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{c.titles + c.runnerUp.length}</td>
                  <td className="mono subtle" style={{ textAlign: 'right' }}>{c.top4}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Top scorers · all-time</h3><a className="link subtle" onClick={() => onRoute('players')}>Players <I.ChevR size={12} /></a></div>
          <table className="table">
            <thead><tr><th style={{ width: 20 }}>#</th><th>Player</th><th style={{ width: 50 }}>Nat</th><th style={{ width: 60, textAlign: 'right' }}>Goals</th></tr></thead>
            <tbody>
              {A.topScorers.slice(0, 8).map((p, i) => (
                <tr key={p.player}>
                  <td className="mono subtle">{i + 1}</td>
                  <td className="strong">{p.player}{p.active && <span className="badge live" style={{ marginLeft: 6, fontSize: 9 }}>active</span>}</td>
                  <td><Flag code={p.team} /></td>
                  <td className="mono strong" style={{ textAlign: 'right' }}>{p.goals}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      {/* Confederation table */}
      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>By confederation · all-time</h3><span className="subtle" style={{ fontSize: 11 }}>teams entered → finishes</span></div>
        <table className="table">
          <thead>
            <tr><th>Confederation</th><th style={{ textAlign: 'right' }}>Entries</th><th style={{ textAlign: 'right' }}>Top 16</th><th style={{ textAlign: 'right' }}>Top 4</th><th style={{ textAlign: 'right' }}>Finals</th><th style={{ textAlign: 'right' }}>Titles</th></tr>
          </thead>
          <tbody>
            {A.byConfederation.map(c => (
              <tr key={c.confed}>
                <td className="strong">{c.confed}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.teams}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top16}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top4}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top2}</td>
                <td className="mono strong" style={{ textAlign: 'right', color: c.first ? 'var(--trophy)' : 'var(--foreground-muted)' }}>{c.first}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* Records grid */}
      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>Records &amp; oddities</h3><span className="subtle" style={{ fontSize: 11 }}>to end of 2022</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 10 }}>
          {A.records.map((r, i) => (
            <div key={i} style={{ padding: 14, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
              <div className="eyebrow" style={{ marginBottom: 6 }}>{r.k}</div>
              <div className="strong" style={{ fontSize: 15, fontWeight: 600 }}>{r.v}</div>
              <div className="subtle" style={{ fontSize: 12, marginTop: 3 }}>{r.sub}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { StatsView });