// views/Explainer.jsx — How World Cup Live works
function ExplainerView({ onRoute }) {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">Welcome · v3.2</div>
          <h1 className="type-h1">How World Cup Live works</h1>
          <div className="sub" style={{ maxWidth: 720 }}>
            One hub for every World Cup story ever told and every match still being played. Live data, a calibrated forecast model, and a guess-it-better game on top.
          </div>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => onRoute('home')}>Open Live Today <I.ChevR size={12} /></button>
      </div>

      {/* 4 pillars */}
      <div className="col4" style={{ marginBottom: 24 }}>
        {[
          { ic: I.Activity, t: 'Live', d: 'Real-time scores, xG, win probability and event timelines for every match in progress.' },
          { ic: I.Book,     t: 'History', d: '22 men\u2019s editions since 1930, plus Women\u2019s WC, Euros, Copa América, AFCON, Asian Cup and Gold Cup.' },
          { ic: I.Sigma,    t: 'Forecast', d: 'A poisson model run on 50,000 sims per tick. Outputs trophy, stage and per-match probabilities.' },
          { ic: I.Crown,    t: 'Pick\u2019em', d: 'Daily ranking challenge + per-match picks. Track yourself against the model and 18,000 others.' },
        ].map(({ ic: Ic, t, d }) => (
          <div key={t} className="panel" style={{ padding: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'color-mix(in oklch, var(--brand) 18%, var(--card))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand-fg)', marginBottom: 14 }}>
              <Ic size={18} />
            </div>
            <div className="strong" style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>{t}</div>
            <div className="subtle" style={{ fontSize: 13, marginTop: 6, lineHeight: 1.55 }}>{d}</div>
          </div>
        ))}
      </div>

      {/* How the model works */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>The forecast model · v3.2</h3><span className="subtle" style={{ fontSize: 11 }}>refit every 60s during live · 8s post-event</span></div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'start' }}>
          <div>
            <p className="subtle" style={{ fontSize: 14, lineHeight: 1.7, margin: '0 0 14px', textWrap: 'pretty' }}>
              Every team has a two-sided rating — an attack strength and a defence strength — fit from the last 8 years of international results, FIFA rankings, squad value, recent form and rest days. Per-match scoring rates feed a bivariate Poisson distribution.
            </p>
            <p className="subtle" style={{ fontSize: 14, lineHeight: 1.7, margin: '0 0 14px', textWrap: 'pretty' }}>
              For tournament forecasts, the model runs 50,000 monte-carlo simulations of the remaining bracket. Each minute of live action rebases the home team\u2019s scoring rate, then re-sims. A goal at minute 23 shifts probabilities instantly — that\u2019s the spike you see on the win-probability chart.
            </p>
            <p className="subtle" style={{ fontSize: 14, lineHeight: 1.7, margin: 0, textWrap: 'pretty' }}>
              Calibration over the last 100 international matches: <span className="strong">Brier 0.18 · log-loss 0.41 · favourite hit rate 68%</span>. Where the model thinks the market is wrong, the <strong>edge</strong> column flags it.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              ['Inputs', 'FIFA rank · last-8yr Elo · squad value · form · rest days · venue · ref tendency'],
              ['Per-match', 'Bivariate Poisson on team-pair scoring rates'],
              ['Tournament', '50,000 simulations of remaining bracket'],
              ['Live update', 'Re-rates after each event · 60s heartbeat'],
              ['Output', 'Win/draw/away · scoreline grid · stage · trophy · player odds'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 12, fontSize: 12 }}>
                <span className="eyebrow">{k}</span>
                <span style={{ color: 'var(--foreground)' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pick em scoring */}
      <div className="col2" style={{ marginBottom: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>Pick\u2019em · scoring</h3></div>
          <table className="table" style={{ marginBottom: 12 }}>
            <thead>
              <tr><th>What you predict</th><th style={{ textAlign: 'right' }}>Correct</th><th style={{ textAlign: 'right' }}>Bonus</th></tr>
            </thead>
            <tbody>
              <tr><td className="strong">Match outcome (W/D/L)</td><td className="mono" style={{ textAlign: 'right' }}>+10</td><td className="mono" style={{ textAlign: 'right' }}>—</td></tr>
              <tr><td className="strong">Exact scoreline</td><td className="mono" style={{ textAlign: 'right' }}>+30</td><td className="mono" style={{ textAlign: 'right' }}>+5 underdog</td></tr>
              <tr><td className="strong">First scorer</td><td className="mono" style={{ textAlign: 'right' }}>+15</td><td className="mono" style={{ textAlign: 'right' }}>—</td></tr>
              <tr><td className="strong">Daily challenge (4-team rank)</td><td className="mono" style={{ textAlign: 'right' }}>+20 / item</td><td className="mono" style={{ textAlign: 'right' }}>+50 perfect</td></tr>
              <tr><td className="strong">Streak bonus</td><td className="mono" style={{ textAlign: 'right' }}>×1.0</td><td className="mono" style={{ textAlign: 'right' }}>×1.5 at 5+</td></tr>
              <tr><td className="strong">Bracket pick</td><td className="mono" style={{ textAlign: 'right' }}>+5/+10/+20/+50</td><td className="mono" style={{ textAlign: 'right' }}>R16 → final</td></tr>
            </tbody>
          </table>
          <div className="subtle" style={{ fontSize: 12 }}>Picks lock at kickoff. Daily challenge resets at 00:00 UTC. Streak resets after a wrong daily rank.</div>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>The daily ranking game</h3><span className="subtle" style={{ fontSize: 11 }}>spiritual successor to "WC ranks"</span></div>
          <p className="subtle" style={{ fontSize: 13, lineHeight: 1.65, margin: '0 0 12px', textWrap: 'pretty' }}>
            Every day at midnight UTC we publish four items to put in order. They might be teams in a group, knockout odds, top-scorer favourites, or all-time scorers. Drag them into your best order, lock it, and find out how close you got.
          </p>
          <ol style={{ margin: 0, paddingLeft: 18, color: 'var(--foreground-subtle)', fontSize: 13, lineHeight: 1.9 }}>
            <li>Drag or use the ▲ ▼ controls to reorder</li>
            <li>Lock in before kickoff of the day\u2019s first match</li>
            <li>Reveal compares against the model\u2019s ranking</li>
            <li>Streaks accumulate when you nail all four</li>
            <li>One play per day · no take-backs</li>
          </ol>
          <div className="divider" />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--foreground-muted)' }}>
            <span>18,204 people played today</span>
            <span>Perfect score globally · 31%</span>
          </div>
        </section>
      </div>

      {/* Tournament coverage */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>What\u2019s covered</h3></div>
        <table className="table">
          <thead>
            <tr>
              <th>Competition</th>
              <th>Governing body</th>
              <th>Frequency</th>
              <th>Editions</th>
              <th>Latest</th>
              <th>Next</th>
            </tr>
          </thead>
          <tbody>
            {Object.values(window.WCL_COMPETITIONS).map(c => {
              const e = c.editions[c.editions.length - 1];
              return (
                <tr key={c.id}>
                  <td className="strong">{c.name}</td>
                  <td>{c.governing}</td>
                  <td>{c.frequency}</td>
                  <td className="mono">{c.editions.length}</td>
                  <td><span className="mono">{e.y}</span> · {window.WCL_TEAMS[e.winner]?.name || e.winner}</td>
                  <td className="subtle" style={{ fontSize: 12 }}>{c.next}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </section>

      {/* Glossary */}
      <section className="panel">
        <div className="panel-head"><h3>Glossary</h3></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {[
            ['xG', 'Expected goals — the quality of chances created, where 1.00 = a chance you\u2019d expect to score every time on average.'],
            ['PPDA', 'Passes per defensive action. Low = aggressive press. 8–10 is typical.'],
            ['Edge', 'Model probability minus market-implied probability. Positive = model thinks the bet is undervalued.'],
            ['Brier score', 'Mean squared error between predicted probability and actual outcome (0–1). Lower is better.'],
            ['Calibration', 'When the model says 70%, how often does it actually happen 70% of the time? 0.92 = very close.'],
            ['Big chance', 'A shot from a position with xG ≥ 0.30.'],
            ['Final-3rd touches', 'Number of times the ball was controlled by a team inside the opposition\u2019s final third.'],
            ['Cinderella', 'A team seeded ≥16 reaching at least the round of 16.'],
          ].map(([k, v]) => (
            <div key={k} style={{ padding: 14, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
              <div className="strong mono" style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, color: 'var(--foreground)' }}>{k}</div>
              <div className="subtle" style={{ fontSize: 12, lineHeight: 1.55 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <div style={{ marginTop: 24, display: 'flex', gap: 10, justifyContent: 'center' }}>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('odds')}>See the model in action</button>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('leaderboard')}>Play pick\u2019em</button>
        <button className="btn btn-primary btn-sm" onClick={() => onRoute('home')}>Open Live Today <I.ChevR size={12} /></button>
      </div>
    </div>
  );
}
Object.assign(window, { ExplainerView });