// views/Matches.jsx — All fixtures view
function MatchesView({ onRoute }) {
  const grouped = {
    'Today · Jun 22':  window.WCL_TODAY,
    'Tomorrow · Jun 23': [
      { id: 'd1', group: 'Group E', home: 'BEL', away: 'CRO', state: 'soon', ko: '12:00 ET' },
      { id: 'd2', group: 'Group G', home: 'ITA', away: 'POL', state: 'soon', ko: '15:00 ET' },
      { id: 'd3', group: 'Group A', home: 'USA', away: 'IRN', state: 'soon', ko: '18:00 ET' },
      { id: 'd4', group: 'Group H', home: 'URU', away: 'GHA', state: 'soon', ko: '21:00 ET' },
    ],
    'Yesterday · Jun 21': [
      { id: 'y1', group: 'Group A', home: 'CAN', away: 'POL', state: 'ft', score: [1, 1] },
      { id: 'y2', group: 'Group C', home: 'GER', away: 'MAR', state: 'ft', score: [2, 2] },
      { id: 'y3', group: 'Group E', home: 'BEL', away: 'AUS', state: 'ft', score: [3, 0] },
      { id: 'y4', group: 'Group F', home: 'ESP', away: 'COL', state: 'ft', score: [1, 0] },
    ],
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">39-day calendar · 104 matches</div>
          <h1 className="type-h1">Fixtures</h1>
          <div className="sub">Matchday 2 of group stage · knockout begins Jul 4</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div className="seg">
            <button>All</button>
            <button className="active">Group stage</button>
            <button>Knockout</button>
          </div>
          <input className="input" placeholder="Filter group, team…" style={{ width: 200 }} />
        </div>
      </div>

      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>39-day overview</h3><span className="subtle" style={{ fontSize: 11 }}>each square = matchday</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(39, 1fr)', gap: 3 }}>
          {Array.from({ length: 39 }).map((_, i) => {
            const isPast = i < 3;
            const isToday = i === 3;
            const isKnockout = i > 22;
            return (
              <div key={i} title={`Day ${i+1}`} style={{
                aspectRatio: 1,
                background: isToday ? 'var(--live-red)' :
                  isPast ? 'color-mix(in oklch, var(--pitch) 50%, var(--card))' :
                  isKnockout ? 'color-mix(in oklch, var(--trophy) 30%, var(--card))' :
                  'var(--surface)',
                border: '1px solid var(--border)',
                borderRadius: 3,
                fontSize: 9,
                color: isToday ? 'white' : 'var(--foreground-muted)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontFamily: 'var(--font-mono)',
                fontWeight: 600,
              }}>{i + 1}</div>
            );
          })}
        </div>
        <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 11, color: 'var(--foreground-muted)' }}>
          <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'color-mix(in oklch, var(--pitch) 50%, var(--card))', marginRight: 6, borderRadius: 2, verticalAlign: '-2px' }} /> Completed</span>
          <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--live-red)', marginRight: 6, borderRadius: 2, verticalAlign: '-2px' }} /> Today</span>
          <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--surface)', border: '1px solid var(--border)', marginRight: 6, borderRadius: 2, verticalAlign: '-2px' }} /> Upcoming</span>
          <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'color-mix(in oklch, var(--trophy) 30%, var(--card))', marginRight: 6, borderRadius: 2, verticalAlign: '-2px' }} /> Knockout</span>
        </div>
      </section>

      {Object.entries(grouped).map(([day, list]) => (
        <section key={day} className="panel" style={{ marginBottom: 16 }}>
          <div className="panel-head"><h3>{day}</h3><span className="subtle" style={{ fontSize: 11 }}>{list.length} matches</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {list.map(t => <FixtureRow key={t.id} row={t} onClick={() => onRoute('match')} />)}
          </div>
        </section>
      ))}
    </div>
  );
}
Object.assign(window, { MatchesView });