/* ============================================================
   HERMES Connect Hub — Events
   ============================================================ */
function PageEvents() {
  const { lang, go } = useApp();
  const [filter, setFilter] = useState('all');
  const [active, setActive] = useState(null);

  const filters = [
    { id: 'all',      label: { de: 'Alle', fr: 'Tous', it: 'Tutti' } },
    { id: 'flagship', label: { de: 'Flaggschiff-Events', fr: 'Événements phares', it: 'Eventi di punta' } },
    { id: 'tagung',   label: { de: 'Tagungen', fr: 'Conférences', it: 'Conferenze' } },
    { id: 'club',     label: { de: 'PM Club', fr: 'PM Club', it: 'PM Club' } },
  ];
  const list = HC.events.filter((e) => filter === 'all' ? true : e.type === filter);

  return (
    <main>
      <PageHero lang={lang}
        eyebrow={{ de: 'Agenda 2026', fr: 'Agenda 2026', it: 'Agenda 2026' }}
        title={{ de: 'Events & Veranstaltungen', fr: 'Événements', it: 'Eventi' }}
        lede={{ de: 'Tagungen, Chapter-Treffen und das HERMES Café – alle Anlässe werden für die HERMES Advanced Rezertifizierung (TÜV SÜD) anerkannt.', fr: 'Tous les événements sont reconnus pour la recertification HERMES Advanced (TÜV SÜD).', it: 'Tutti gli eventi sono riconosciuti per la ricertificazione HERMES Advanced (TÜV SÜD).' }}>
        <div className="notebar">
          <Ico name="spark" />
          <span>{tr({ de: 'Neu ab 1. Januar 2026: Als Mitglied ist die Teilnahme an drei Anlässen des BFH Projektmanagement Clubs kostenlos. Ab dem vierten Anlass gilt ein Ticketpreis von CHF 50.', fr: 'Dès le 1ᵉʳ janvier 2026 : trois événements du BFH PM Club gratuits pour les membres, puis CHF 50.', it: 'Dal 1° gennaio 2026: tre eventi del BFH PM Club gratuiti per i membri, poi CHF 50.' }, lang)}</span>
        </div>
      </PageHero>

      <section className="section--tight">
        <div className="wrap">
          <div className="filters">
            {filters.map((f) => (
              <button key={f.id} className={`filter ${filter === f.id ? 'on' : ''}`} onClick={() => setFilter(f.id)}>{tr(f.label, lang)}</button>
            ))}
          </div>
          <div className="evtlist">
            {list.map((ev, i) => (
              <Reveal key={ev.id} delay={(i % 3) * 70}><EventCard ev={ev} lang={lang} onOpen={setActive} /></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Past events */}
      <section className="section section--soft">
        <div className="wrap">
          <SectionHeader lang={lang}
            eyebrow={{ de: 'Rückblick', fr: 'Rétrospective', it: 'Retrospettiva' }}
            title={{ de: 'Vergangene Events', fr: 'Événements passés', it: 'Eventi passati' }} />
          <div className="grid past-grid">
            {HC.pastEvents.map((p, i) => (
              <Reveal key={i} delay={i * 60} className="past card card--hover">
                <span className="past__year">{p.year}</span>
                <h3 className="past__title">{p.title}</h3>
                <span className="past__place"><Ico name="pin" size={15} /> {p.place}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section newsletter">
        <div className="wrap newsletter__inner">
          <div>
            <h2 className="title">{tr({ de: 'Keinen Anlass verpassen', fr: 'Ne manquez aucun événement', it: 'Non perdere nessun evento' }, lang)}</h2>
            <p className="lede" style={{ marginTop: 12 }}>{tr({ de: 'Abonnieren Sie unseren Newsletter und bleiben Sie auf dem Laufenden.', fr: 'Abonnez-vous à notre newsletter.', it: 'Iscriviti alla nostra newsletter.' }, lang)}</p>
          </div>
          <form className="newsletter__form" onSubmit={(e) => e.preventDefault()}>
            <input className="input" type="email" placeholder={tr({ de: 'E-Mail-Adresse', fr: 'Adresse e-mail', it: 'Indirizzo e-mail' }, lang)} required />
            <button className="btn btn--primary" type="submit">{tr(HC.t.newsletter, lang)}</button>
          </form>
        </div>
      </section>

      {active && <EventModal ev={active} lang={lang} onClose={() => setActive(null)} go={go} />}
    </main>
  );
}

function EventModal({ ev, lang, onClose, go }) {
  const { eventTypes } = HC;
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__card" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Schliessen">✕</button>
        <div className="modal__head">
          <div className="evt__date evt__date--lg">
            <span className="evt__wd">{tr(ev.weekday, lang)}</span>
            <span className="evt__day">{ev.day}</span>
            <span className="evt__mon">{tr(ev.mon, lang)}</span>
          </div>
          <div>
            <div className="evt__tags">
              <span className="chip">{tr(eventTypes[ev.type], lang)}</span>
              {ev.members && <span className="chip chip--navy">Members only</span>}
            </div>
            <h2 className="title" style={{ marginTop: 12, fontSize: 30 }}>{ev.title}</h2>
          </div>
        </div>
        <div className="modal__body">
          <div className="modal__row"><Ico name="clock" /><span><strong>{tr({ de: 'Zeit', fr: 'Heure', it: 'Ora' }, lang)}</strong>{ev.day}. {tr(ev.mon, lang)} 2026 · {ev.time}</span></div>
          <div className="modal__row"><Ico name="pin" /><span><strong>{tr({ de: 'Ort', fr: 'Lieu', it: 'Luogo' }, lang)}</strong>{ev.place}</span></div>
          {ev.note && <div className="modal__row"><Ico name="spark" /><span><strong>{tr({ de: 'Hinweis', fr: 'Note', it: 'Nota' }, lang)}</strong>{tr(ev.note, lang)}</span></div>}
          <div className="modal__row"><Ico name="check" /><span><strong>{tr({ de: 'Zertifizierung', fr: 'Certification', it: 'Certificazione' }, lang)}</strong>{tr({ de: 'Anerkannt für die HERMES Advanced Rezertifizierung (TÜV SÜD).', fr: 'Reconnu pour la recertification HERMES Advanced.', it: 'Riconosciuto per la ricertificazione HERMES Advanced.' }, lang)}</span></div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--primary btn--lg" onClick={() => { onClose(); }}>{tr(HC.t.register, lang)} <span className="arr">→</span></button>
          {ev.members && <button className="btn btn--ghost btn--lg" onClick={() => { onClose(); go('mitglieder'); }}>{tr(HC.t.join, lang)}</button>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageEvents });