// views/guide.jsx — The complete guide. 2026 deep-dive links, a primer on the
// competition, and a portal to every edition from 1930 to 2034.
function GuideView({ onRoute }) {
  const M = window.WCL_2026.meta;
  const A = window.WCL_ALLTIME;
  const H = window.WCL_HISTORY;

  // future editions (not in the historical archive)
  const future = [
    { y: 2026, host: 'USA · Canada · Mexico', winner: null, route: () => onRoute('wc2026') },
    { y: 2030, host: 'Morocco · Portugal · Spain', winner: null, note: 'Centenary — opening games in Uruguay, Argentina, Paraguay' },
    { y: 2034, host: 'Saudi Arabia', winner: null },
  ];

  const guide2026 = [
    { label: '16 host venues', desc: 'Stadiums, capacities & match counts across 3 nations', Icon: I.Stadium, route: 'wc2026' },
    { label: '48 teams · 12 groups', desc: 'The full field and the final draw', Icon: I.Users, route: 'teams' },
    { label: 'Format & schedule', desc: 'Group stage → Round of 32 → final', Icon: I.Calendar, route: 'wc2026' },
    { label: 'Host cities map', desc: 'Western, Central & Eastern regions', Icon: I.Map, route: 'wc2026' },
  ];

  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>Guide</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>The complete World Cup guide</h1>
          <div className="sub">Everything about 2026, a primer on the tournament itself, and a portal into all 25 editions from 1930 to 2034.</div>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('agent')}><I.Chat size={14} /> Ask a question</button>
      </div>

      {/* 2026 deep links */}
      <div className="eyebrow" style={{ marginBottom: 10 }}>FIFA World Cup 26</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12, marginBottom: 24 }}>
        {guide2026.map(s => (
          <button key={s.label} className="hub-card" onClick={() => onRoute(s.route)}>
            <span className="hub-ic" style={{ color: 'var(--trophy)', background: 'color-mix(in oklch, var(--trophy) 14%, transparent)', borderColor: 'color-mix(in oklch, var(--trophy) 30%, transparent)' }}><s.Icon size={18} /></span>
            <span style={{ flex: 1 }}><span className="hub-title">{s.label}</span><span className="hub-desc">{s.desc}</span></span>
            <I.ChevR size={15} className="subtle" />
          </button>
        ))}
      </div>

      {/* Primer */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>What is the World Cup?</h3><a className="link subtle" onClick={() => onRoute('stats')}>Statistics <I.ChevR size={12} /></a></div>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--foreground-subtle)', maxWidth: 860, textWrap: 'pretty' }}>
          The FIFA World Cup is football&rsquo;s flagship — contested every four years since {A.meta.fromYear}. {A.meta.editions} editions have produced just {A.meta.championsCount} champions from {A.meta.nationsEverPlayed} nations that have ever played. The trophy itself — {A.meta.trophy.split('.')[0]} — has been lifted by Brazil a record five times. 2026 is the largest ever: the first co-hosted by three nations and the first with 48 teams.
        </p>
        <div className="col4" style={{ marginTop: 16 }}>
          <div className="kpi"><div className="kpi-label">Editions</div><div className="kpi-value">{A.meta.editions}</div><div className="kpi-delta">since 1930</div></div>
          <div className="kpi"><div className="kpi-label">Champions</div><div className="kpi-value">{A.meta.championsCount}</div><div className="kpi-delta">nations only</div></div>
          <div className="kpi"><div className="kpi-label">Nations played</div><div className="kpi-value">{A.meta.nationsEverPlayed}</div><div className="kpi-delta">all-time</div></div>
          <div className="kpi"><div className="kpi-label">Next after 2026</div><div className="kpi-value" style={{ fontSize: 20 }}>2030</div><div className="kpi-delta">centenary</div></div>
        </div>
      </section>

      {/* Every edition portal */}
      <section className="panel">
        <div className="panel-head"><h3>Every edition · 1930 → 2034</h3><a className="link subtle" onClick={() => onRoute('history')}>History timeline <I.ChevR size={12} /></a></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 10 }}>
          {H.map(h => (
            <button key={h.y} onClick={() => onRoute('tournament', { year: h.y, competition: 'wc_men' })} style={editionCardStyle(false)}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-hover)'; e.currentTarget.style.background = 'var(--card-hover)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.background = 'var(--surface)'; }}>
              <div className="mono strong" style={{ fontSize: 14, color: 'var(--foreground)' }}>{h.y}</div>
              <div className="subtle" style={{ fontSize: 11, margin: '3px 0 8px', minHeight: 26 }}>{h.host}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Flag code={h.winner} /><span className="mono" style={{ fontSize: 10, color: 'var(--trophy)' }}>{h.winner}</span></div>
            </button>
          ))}
          {future.map(f => (
            <button key={f.y} onClick={() => f.route ? f.route() : null} style={editionCardStyle(true)}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'color-mix(in oklch, var(--upcoming) 50%, transparent)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'color-mix(in oklch, var(--upcoming) 30%, transparent)'; }}>
              <div className="mono strong" style={{ fontSize: 14, color: 'var(--upcoming)' }}>{f.y}{f.y === 2026 && <span className="badge live" style={{ marginLeft: 6, fontSize: 9 }}>next</span>}</div>
              <div className="subtle" style={{ fontSize: 11, margin: '3px 0 8px', minHeight: 26 }}>{f.host}</div>
              <div className="subtle" style={{ fontSize: 10, lineHeight: 1.4 }}>{f.note || (f.route ? 'Open 2026 details →' : 'Upcoming')}</div>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}

function editionCardStyle(future) {
  return {
    background: 'var(--surface)',
    border: '1px solid ' + (future ? 'color-mix(in oklch, var(--upcoming) 30%, transparent)' : 'var(--border)'),
    borderRadius: 'var(--radius-md)',
    padding: '12px 14px',
    cursor: 'pointer',
    textAlign: 'left',
    color: 'inherit',
    fontFamily: 'inherit',
    transition: 'border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)',
  };
}
Object.assign(window, { GuideView });