// views/WC2026.jsx — 2026 FIFA World Cup detail page
function WC2026View({ onRoute }) {
  const W = window.WCL_2026;
  const meta = W.meta;
  const sortedVenues = W.venues.slice().sort((a, b) => b.cap - a.cap);

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">Edition #{meta.edition} · {meta.startDate} → {meta.endDate} · {meta.days} days</div>
          <h1 className="type-h1">{meta.name}</h1>
          <div className="sub" style={{ maxWidth: 760 }}>
            First 48-team World Cup. {meta.matches} matches across {meta.venues} stadiums in {meta.cities} cities — co-hosted by {meta.hosts.join(', ')}.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('alltime')}><I.Book size={12} /> All-time stats</button>
          <button className="btn btn-primary btn-sm" onClick={() => onRoute('home')}><I.Activity size={12} /> Live today</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-label">Teams</div><div className="kpi-value">{meta.teams}</div><div className="kpi-delta up">+16 from 2022</div></div>
        <div className="kpi"><div className="kpi-label">Matches</div><div className="kpi-value">{meta.matches}</div><div className="kpi-delta up">+40 from 2022</div></div>
        <div className="kpi"><div className="kpi-label">Days</div><div className="kpi-value">{meta.days}</div><div className="kpi-delta">June 11 – July 19</div></div>
        <div className="kpi"><div className="kpi-label">Defending champion</div><div className="kpi-value" style={{ fontSize: 22 }}><TeamRow code={meta.defendingChampion} big /></div><div className="kpi-delta">won 2022</div></div>
      </div>

      {/* Opening + Final hero */}
      <div className="col2" style={{ marginBottom: 16 }}>
        <section className="match-hero" style={{ padding: '20px 22px' }}>
          <div className="meta-strip">
            <div className="stage-tag"><I.Activity size={12} /> Opening match · June 11, 2026</div>
            <span><I.Stadium size={12} /> {meta.openingMatch.venue} · {meta.openingMatch.city}</span>
          </div>
          <div className="scoreline">
            <div className="team">
              <Flag code={meta.openingMatch.home} size="lg" />
              <div className="crest">{window.WCL_TEAMS[meta.openingMatch.home]?.name}<small>Host · Group A</small></div>
            </div>
            <div className="ko-time" style={{ fontSize: 24 }}>vs</div>
            <div className="team away">
              <Flag code={meta.openingMatch.away} size="lg" />
              <div className="crest" style={{ textAlign: 'right' }}>{window.WCL_TEAMS[meta.openingMatch.away]?.name}<small>Returns since 2010</small></div>
            </div>
          </div>
        </section>

        <section className="match-hero" style={{ padding: '20px 22px', background: 'linear-gradient(135deg, color-mix(in oklch, var(--trophy) 16%, var(--card)), var(--card))', borderColor: 'color-mix(in oklch, var(--trophy) 30%, var(--border))' }}>
          <div className="meta-strip">
            <div className="stage-tag"><I.Trophy size={12} style={{ color: 'var(--trophy)' }} /> Final · July 19, 2026</div>
            <span><I.Stadium size={12} /> {meta.finalMatch.venue}</span>
          </div>
          <div className="scoreline">
            <div className="team">
              <I.Trophy size={48} style={{ color: 'var(--trophy)' }} />
              <div className="crest" style={{ color: 'var(--trophy)' }}>To be decided<small>finalists projected · model picks ARG vs BRA</small></div>
            </div>
            <div className="ko-time" style={{ fontSize: 24 }}>·</div>
            <div className="team away">
              <div className="crest" style={{ textAlign: 'right' }}>{meta.finalMatch.city}<small>{meta.finalMatch.alias}</small></div>
              <I.Stadium size={48} style={{ color: 'var(--trophy)' }} />
            </div>
          </div>
        </section>
      </div>

      {/* 12 groups */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>12 groups · 48 teams · drawn {meta.drawDate}</h3><span className="subtle" style={{ fontSize: 11 }}>{meta.drawVenue}</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12 }}>
          {W.groups.map(g => (
            <div key={g.id} style={{
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius-md)',
              background: 'var(--surface)',
              padding: 12,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid var(--border)' }}>
                <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--foreground)' }}>Group {g.id}</span>
                {g.host && <span className="badge live" style={{ background: 'color-mix(in oklch, var(--brand) 18%, transparent)', color: 'var(--brand-fg)', borderColor: 'color-mix(in oklch, var(--brand) 40%, transparent)' }}>Host {g.host}</span>}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {g.teams.map(code => (
                  <button key={code} onClick={() => onRoute('team', { code })} style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    padding: '6px 4px',
                    background: 'transparent', border: 'none',
                    cursor: 'pointer',
                    color: 'inherit', fontFamily: 'inherit',
                    fontSize: 13,
                    textAlign: 'left',
                  }}>
                    <Flag code={code} />
                    <span className="strong" style={{ flex: 1 }}>{window.WCL_TEAMS[code]?.name || code}</span>
                    <span className="mono subtle" style={{ fontSize: 10 }}>#{window.WCL_TEAMS[code]?.fifa ?? '—'}</span>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Schedule by round */}
      <div className="col2" style={{ marginBottom: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>Schedule by round</h3><span className="subtle" style={{ fontSize: 11 }}>{meta.matches} total matches</span></div>
          <table className="table">
            <thead><tr><th>Round</th><th>Dates</th><th style={{ textAlign: 'right' }}>Matches</th></tr></thead>
            <tbody>
              {W.schedule.map(r => (
                <tr key={r.round}>
                  <td className="strong" style={{ color: r.round === 'Final' ? 'var(--trophy)' : 'var(--foreground)' }}>
                    {r.round === 'Final' && <I.Trophy size={11} style={{ color: 'var(--trophy)', marginRight: 6, verticalAlign: '-1px' }} />}
                    {r.round}
                  </td>
                  <td className="subtle">{r.dates}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{r.count}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Debutants & returns</h3><span className="subtle" style={{ fontSize: 11 }}>4 first-timers</span></div>
          <div style={{ marginBottom: 14 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Making their World Cup debut</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {[['CPV','Cape Verde'],['CUW','Curaçao'],['JOR','Jordan'],['UZB','Uzbekistan']].map(([c, n]) => (
                <span key={c} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '6px 10px',
                  background: 'color-mix(in oklch, var(--brand) 14%, transparent)',
                  border: '1px solid color-mix(in oklch, var(--brand) 30%, transparent)',
                  borderRadius: 999, fontSize: 12, fontWeight: 600,
                }}><Flag code={c} /> {n}</span>
              ))}
            </div>
          </div>
          <div className="divider" />
          <div className="eyebrow" style={{ marginBottom: 8 }}>Notable returns</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, color: 'var(--foreground-subtle)', lineHeight: 1.8 }}>
            {meta.notableReturns.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </section>
      </div>

      {/* Venues */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>{W.venues.length} host venues across {meta.cities} cities</h3>
          <span className="subtle" style={{ fontSize: 11 }}>{meta.citiesByCountry.USA} USA · {meta.citiesByCountry.MEX} MEX · {meta.citiesByCountry.CAN} CAN</span>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>City</th>
              <th>Stadium</th>
              <th>Tournament name</th>
              <th style={{ textAlign: 'right' }}>Capacity</th>
              <th style={{ width: 60 }}>Roof</th>
              <th style={{ textAlign: 'right' }}>Matches</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            {sortedVenues.map(v => (
              <tr key={v.stadium}>
                <td className="strong">
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                    <Flag code={v.country} />
                    {v.city}
                  </span>
                </td>
                <td className="strong">{v.stadium}{v.prev && <span className="mono subtle" style={{ marginLeft: 8, fontSize: 11 }}>prev: {v.prev.join(', ')}</span>}</td>
                <td className="subtle mono" style={{ fontSize: 11 }}>{v.alias}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{v.cap.toLocaleString()}</td>
                <td className="mono subtle" style={{ fontSize: 11 }}>{v.dome ? 'closed' : 'open'}</td>
                <td className="mono strong" style={{ textAlign: 'right' }}>{v.matches}</td>
                <td className="subtle" style={{ fontSize: 12 }}>{v.finalHost ? <span style={{ color: 'var(--trophy)', fontWeight: 600 }}><I.Trophy size={11} style={{ verticalAlign: '-1px', marginRight: 4 }} /> Final</span> : ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* Facts */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>Why 2026 is different</h3></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
          {W.facts.map((f, i) => (
            <div key={i} style={{
              padding: 14,
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius-md)',
              fontSize: 13,
              lineHeight: 1.5,
              color: 'var(--foreground-subtle)',
              textWrap: 'pretty',
              display: 'flex',
              gap: 10,
              alignItems: 'flex-start',
            }}>
              <span style={{ color: 'var(--trophy)', fontSize: 18, lineHeight: 1, flexShrink: 0 }}>·</span>
              <span>{f}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Regions */}
      <section className="panel">
        <div className="panel-head"><h3>Geographic regions</h3><span className="subtle" style={{ fontSize: 11 }}>cities grouped for scheduling</span></div>
        <div className="col3">
          {Object.entries(W.regions).map(([region, cities]) => (
            <div key={region} style={{ padding: 14, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>{region} region · {cities.length} cities</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13 }}>
                {cities.map(c => <span key={c} className="strong">{c}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { WC2026View });