---
import { agenda, disciplines, days, slots } from '../data/agenda';
---
<section class="section section--dark agenda">
  <div class="container">
    <div class="section-heading"><h2>Agenda</h2></div>
    <div class="agenda__tabs" role="tablist">
      {disciplines.map((d, i) => (
        <button class:list={['agenda__tab', { 'is-active': i === 0 }]} data-filter={d} role="tab" aria-selected={i === 0 ? 'true' : 'false'}>{d}</button>
      ))}
    </div>
    <div class="agenda__grid">
      <div class="agenda__corner"></div>
      {days.map((d) => <div class="agenda__day">{d}</div>)}
      {slots.map((slot) => (
        <>
          <div class="agenda__slot">{slot}</div>
          {days.map((_, dayIdx) => {
            const entry = agenda.find((e) => e.day === dayIdx && e.slot === slot);
            return entry
              ? <div class="agenda__cell" data-discipline={entry.discipline}><strong>{entry.discipline}</strong><span>{entry.time}</span><em>{entry.trainer}</em></div>
              : <div class="agenda__cell agenda__cell--empty"></div>;
          })}
        </>
      ))}
    </div>
  </div>
</section>

<style>
  .agenda__tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 40px; }
  .agenda__tab { background: transparent; color: #b9aea4; border: 0; cursor: pointer; font-family: var(--font-heading); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: 10px 18px; }
  .agenda__tab.is-active { background: var(--c-accent); color: #fff; }
  .agenda__grid { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 2px; }
  .agenda__day, .agenda__slot { font-family: var(--font-heading); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #b9aea4; display: flex; align-items: center; justify-content: center; padding: 10px 4px; }
  .agenda__cell { background: var(--c-accent); color: #fff; padding: 14px 8px; text-align: center; font-size: .72rem; display: flex; flex-direction: column; gap: 2px; }
  .agenda__cell strong { font-family: var(--font-heading); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
  .agenda__cell em { font-style: normal; opacity: .85; }
  .agenda__cell--empty { background: transparent; }
  .agenda__cell.is-dim { opacity: .15; }
  @media (max-width: 991px) { .agenda__grid { grid-template-columns: 60px repeat(7, minmax(90px, 1fr)); overflow-x: auto; } }
</style>

<script>
  document.querySelectorAll<HTMLElement>('.agenda').forEach((root) => {
    const tabs = root.querySelectorAll<HTMLButtonElement>('.agenda__tab');
    const cells = root.querySelectorAll<HTMLElement>('.agenda__cell[data-discipline]');
    tabs.forEach((tab) => tab.addEventListener('click', () => {
      tabs.forEach((t) => { t.classList.toggle('is-active', t === tab); t.setAttribute('aria-selected', String(t === tab)); });
      const f = tab.dataset.filter!;
      cells.forEach((c) => c.classList.toggle('is-dim', f !== 'Events' && c.dataset.discipline !== f));
    }));
  });
</script>