// views/sitemap.jsx — every page in World Cup Live, grouped, deep-linkable.
function SitemapView({ onRoute }) {
  const groups = [
    { title: 'World Cup 2026', items: [
      { id: 'home',    label: 'Home · Overview',  desc: 'Countdown and the front door' },
      { id: 'live',    label: 'Live Today',       desc: 'Live scores, win probability, timeline' },
      { id: 'matches', label: 'Fixtures',         desc: 'All 104 matches across 39 days' },
      { id: 'pickem',  label: 'Pick’em',        desc: 'Predict every match, locks at kick-off' },
      { id: 'table',   label: 'Group Table',      desc: '12 groups of four' },
      { id: 'bracket', label: 'Knockout / Bracket', desc: 'Round of 32 → final simulator' },
      { id: 'odds',    label: 'Odds & Model',     desc: 'Trophy odds, model vs market' },
      { id: 'players', label: 'Players',          desc: 'Stars, legends, Golden Boot' },
      { id: 'teams',   label: 'Teams',            desc: 'All 48 qualified nations' },
      { id: 'leaderboard', label: 'Pick\u2019em', desc: 'Daily challenge + global leaderboard' },
      { id: 'agent',   label: 'Agent · WorldCupAI', desc: 'Ask anything about the tournament' },
    ]},
    { title: 'Explore', items: [
      { id: 'stats',   label: 'Statistics',       desc: '2026 profile + all-time numbers' },
      { id: 'guide',   label: 'Guide',            desc: 'Primer + every edition 1930–2034' },
      { id: 'history', label: 'History',          desc: 'Timeline of every edition' },
      { id: 'tournaments', label: 'Tournaments',  desc: 'Index of every edition' },
      { id: 'medals',  label: 'Medals',           desc: 'All-time medal table' },
      { id: 'maps',    label: 'Maps',             desc: 'World + per-edition stadium maps' },
      { id: 'faq',     label: 'FAQ',              desc: 'Common questions, SEO answers' },
      { id: 'alltime', label: 'All-time records', desc: 'Champions, scorers, confederations' },
      { id: 'wc2026',  label: '2026 details',     desc: 'Venues, groups, format, schedule' },
    ]},
    { title: 'System', items: [
      { id: 'explainer', label: 'How it works',   desc: 'Model, scoring, glossary, coverage' },
      { id: 'sitemap',   label: 'Sitemap',        desc: 'This page' },
      { id: 'admin',     label: 'Admin',          desc: 'Integrations, tests & data (sign-in)' },
    ]},
  ];

  const dynamic = [
    { label: 'Team profile', hint: 'team/{code}', example: () => onRoute('team', { code: 'ARG' }) },
    { label: 'Match detail', hint: 'match', example: () => onRoute('match') },
    { label: 'Edition', hint: 'tournament/{year}', example: () => onRoute('tournament', { year: 2022, competition: 'wc_men' }) },
  ];

  const total = groups.reduce((s, g) => s + g.items.length, 0) + dynamic.length;

  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>Sitemap</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>Sitemap</h1>
          <div className="sub">{total} pages · every route is deep-linkable via the URL hash (e.g. <span className="mono">#/team/ARG</span>).</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {groups.map(g => (
          <section key={g.title}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{g.title}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 10 }}>
              {g.items.map(it => (
                <button key={it.id} className="hub-card" style={{ padding: 14 }} onClick={() => onRoute(it.id)}>
                  <span style={{ flex: 1 }}>
                    <span className="hub-title">{it.label}</span>
                    <span className="hub-desc">{it.desc}</span>
                    <span className="mono subtle" style={{ display: 'block', fontSize: 10.5, marginTop: 4 }}>#/{it.id}</span>
                  </span>
                  <I.ChevR size={15} className="subtle" />
                </button>
              ))}
            </div>
          </section>
        ))}

        <section>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Dynamic routes</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 10 }}>
            {dynamic.map(d => (
              <button key={d.label} className="hub-card" style={{ padding: 14 }} onClick={d.example}>
                <span style={{ flex: 1 }}>
                  <span className="hub-title">{d.label}</span>
                  <span className="mono subtle" style={{ display: 'block', fontSize: 10.5, marginTop: 4 }}>#/{d.hint}</span>
                </span>
                <I.ArrowUR size={14} className="subtle" />
              </button>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}
Object.assign(window, { SitemapView });