/* ============================================================
   HERMES Connect Hub — Ressourcen · Sponsoring · Kontakt · Agora
   ============================================================ */

/* ---------------- RESSOURCEN ---------------- */
function PageRessourcen({ focus }) {
  const { lang, go } = useApp();
  const refs = { handbuecher: useRef(null), schulungen: useRef(null), feedback: useRef(null) };
  const [fbSent, setFbSent] = useState(false);

  useEffect(() => {
    if (focus && refs[focus] && refs[focus].current) {
      const y = refs[focus].current.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }, [focus]);

  return (
    <main>
      <PageHero lang={lang}
        eyebrow={{ de: 'Ressourcen', fr: 'Ressources', it: 'Risorse' }}
        title={{ de: 'Ressourcen & Werkzeuge', fr: 'Ressources & outils', it: 'Risorse e strumenti' }}
        lede={{ de: 'Handbücher bestellen, akkreditierte Schulungen finden und Praxis-Feedback an die Bundeskanzlei geben – alles an einem Ort.', fr: 'Manuels, formations accréditées et retours de terrain – au même endroit.', it: 'Manuali, formazioni accreditate e riscontri pratici – in un unico posto.' }}>
        <div className="reschips">
          <button className="filter" onClick={() => go('handbuecher')}>{tr({ de: 'Handbücher', fr: 'Manuels', it: 'Manuali' }, lang)}</button>
          <button className="filter" onClick={() => go('schulungen')}>{tr({ de: 'Schulungsanbieter', fr: 'Formations', it: 'Formazioni' }, lang)}</button>
          <button className="filter" onClick={() => go('feedback')}>{tr({ de: 'Feedback HERMES', fr: 'Feedback', it: 'Feedback' }, lang)}</button>
        </div>
      </PageHero>

      {/* Handbücher */}
      <section className="section" ref={refs.handbuecher}>
        <div className="wrap">
          <SectionHeader lang={lang} eyebrow={{ de: 'Bestellung', fr: 'Commande', it: 'Ordine' }}
            title={{ de: 'Handbücher bestellen', fr: 'Commander les manuels', it: 'Ordinare i manuali' }}
            lede={{ de: 'Die offiziellen HERMES Publikationen in allen Landessprachen – versandkostenfrei für Mitglieder.', fr: 'Les publications officielles HERMES, frais de port offerts aux membres.', it: 'Le pubblicazioni ufficiali HERMES, spedizione gratuita per i membri.' }} />
          <div className="grid books-grid">
            {HC.handbuecher.map((b, i) => (
              <Reveal key={i} delay={i * 70} className="book card card--hover">
                <div className="book__cover" aria-hidden="true">
                  <div className="book__spine"></div>
                  <span className="book__h">HERMES</span>
                  <span className="book__k">{tr(b.kind, lang)}</span>
                </div>
                <div className="book__body">
                  <h3 className="book__title">{b.title}</h3>
                  <div className="book__meta"><Ico name="globe" size={15} /> {b.lang}</div>
                  <div className="book__foot">
                    <span className="book__price">{b.price}</span>
                    <button className="btn btn--ghost">{tr({ de: 'Bestellen', fr: 'Commander', it: 'Ordina' }, lang)}</button>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Schulungsanbieter */}
      <section className="section section--soft" ref={refs.schulungen}>
        <div className="wrap">
          <SectionHeader lang={lang} eyebrow={{ de: 'Weiterbildung', fr: 'Formation', it: 'Formazione' }}
            title={{ de: 'Akkreditierte Schulungsanbieter', fr: 'Organismes de formation accrédités', it: 'Enti di formazione accreditati' }}
            lede={{ de: 'Diese Anbieter führen anerkannte HERMES Foundation- und Advanced-Kurse durch.', fr: 'Ces organismes proposent des cours HERMES Foundation et Advanced reconnus.', it: 'Questi enti offrono corsi HERMES Foundation e Advanced riconosciuti.' }} />
          <div className="grid courses-grid">
            {HC.schulungen.map((s, i) => (
              <Reveal key={i} delay={(i % 3) * 60} className="course card card--hover">
                <div className="course__top">
                  <span className="course__name">{s.name}</span>
                  <Ico name="arrowright" size={18} />
                </div>
                <span className="chip chip--soft">{tr(s.kind, lang)}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Feedback HERMES */}
      <section className="section" ref={refs.feedback}>
        <div className="wrap feedback-wrap">
          <div className="feedback-intro">
            <div className="eyebrow">{tr({ de: 'Feedback HERMES', fr: 'Feedback HERMES', it: 'Feedback HERMES' }, lang)}</div>
            <h2 className="title">{tr({ de: 'Ihr Praxis-Input verbessert die Methode', fr: 'Votre retour améliore la méthode', it: 'Il tuo riscontro migliora il metodo' }, lang)}</h2>
            <p className="lede" style={{ marginTop: 16 }}>{tr({ de: 'Wo stossen Sie bei der Anwendung von HERMES an Grenzen? Wir sammeln Ihre Inputs, bereiten sie auf und teilen sie mit der Bundeskanzlei – so bleibt die Methode bedürfnisgerecht.', fr: 'Où atteignez-vous les limites de HERMES ? Nous transmettons vos retours à la Chancellerie.', it: 'Dove incontri i limiti di HERMES? Trasmettiamo i tuoi riscontri alla Cancelleria.' }, lang)}</p>
            <ul className="feedback-list">
              {[{ de: 'Anonyme oder namentliche Eingabe', fr: 'Saisie anonyme ou nominative', it: 'Inserimento anonimo o nominativo' }, { de: 'Aufbereitung durch den Vorstand', fr: 'Préparation par le comité', it: 'Elaborazione dal comitato' }, { de: 'Direkter Kanal zur Methoden-Eignerin', fr: 'Canal direct vers la propriétaire de la méthode', it: 'Canale diretto verso la proprietaria' }].map((li, i) => (
                <li key={i}><span className="benefit__ic"><Ico name="check" size={15} /></span>{tr(li, lang)}</li>
              ))}
            </ul>
          </div>
          {fbSent ? (
            <div className="card joinform thanks">
              <div className="thanks__ic"><Ico name="check" size={30} /></div>
              <h3 className="subtitle">{tr({ de: 'Danke für Ihren Input!', fr: 'Merci pour votre retour !', it: 'Grazie per il tuo riscontro!' }, lang)}</h3>
              <p>{tr({ de: 'Wir prüfen Ihr Feedback und leiten es an die Bundeskanzlei weiter.', fr: 'Nous transmettrons votre retour à la Chancellerie.', it: 'Trasmetteremo il tuo riscontro alla Cancelleria.' }, lang)}</p>
            </div>
          ) : (
            <form className="card joinform" onSubmit={(e) => { e.preventDefault(); setFbSent(true); }}>
              <div className="field"><label>{tr({ de: 'Themenbereich', fr: 'Domaine', it: 'Tema' }, lang)}</label>
                <select className="select"><option>Szenarien & Module</option><option>Rollen & Verantwortlichkeiten</option><option>Vorlagen & Ergebnisse</option><option>Tailoring</option><option>{tr({ de: 'Anderes', fr: 'Autre', it: 'Altro' }, lang)}</option></select>
              </div>
              <div className="field"><label>{tr({ de: 'Ihr Feedback', fr: 'Votre retour', it: 'Il tuo riscontro' }, lang)} <span className="req">*</span></label><textarea className="textarea" required placeholder={tr({ de: 'Beschreiben Sie die Herausforderung aus der Praxis …', fr: 'Décrivez le défi rencontré …', it: 'Descrivi la sfida riscontrata …' }, lang)}></textarea></div>
              <div className="field"><label>{tr({ de: 'E-Mail (optional)', fr: 'E-mail (facultatif)', it: 'E-mail (facoltativo)' }, lang)}</label><input className="input" type="email" /></div>
              <button className="btn btn--primary btn--lg" type="submit" style={{ alignSelf: 'flex-start' }}>{tr({ de: 'Feedback senden', fr: 'Envoyer', it: 'Invia' }, lang)} <span className="arr">→</span></button>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}

/* ---------------- SPONSORING ---------------- */
function PageSponsoring() {
  const { lang, go } = useApp();
  const packs = [
    { name: 'Partner', tone: 'soft', items: [{ de: 'Logo auf der Website', fr: 'Logo sur le site', it: 'Logo sul sito' }, { de: 'Erwähnung im Newsletter', fr: 'Mention dans la newsletter', it: 'Menzione nella newsletter' }, { de: '2 Event-Tickets', fr: '2 billets', it: '2 biglietti' }] },
    { name: 'Silber', tone: 'silver', feat: true, items: [{ de: 'Alle Partner-Leistungen', fr: 'Toutes les prestations Partner', it: 'Tutti i vantaggi Partner' }, { de: 'Logo auf Event-Bühne', fr: 'Logo sur scène', it: 'Logo sul palco' }, { de: 'Stand an der HERMES Connect', fr: 'Stand à HERMES Connect', it: 'Stand a HERMES Connect' }, { de: '5 Event-Tickets', fr: '5 billets', it: '5 biglietti' }] },
    { name: 'Gold', tone: 'gold', items: [{ de: 'Alle Silber-Leistungen', fr: 'Toutes les prestations Silber', it: 'Tutti i vantaggi Silber' }, { de: 'Speaking-Slot an einem Flaggschiff-Event', fr: 'Intervention lors d’un événement phare', it: 'Speaking slot a un evento di punta' }, { de: 'Co-Branding HERMES Café', fr: 'Co-branding HERMES Café', it: 'Co-branding HERMES Café' }, { de: '10 Event-Tickets', fr: '10 billets', it: '10 biglietti' }] },
  ];
  return (
    <main>
      <PageHero lang={lang}
        eyebrow={{ de: 'Sponsoring', fr: 'Sponsoring', it: 'Sponsoring' }}
        title={{ de: 'Sichtbarkeit in der HERMES Community', fr: 'Visibilité dans la communauté HERMES', it: 'Visibilità nella community HERMES' }}
        lede={{ de: 'Als Sponsor erreichen Sie Projektleitende, IT-Berater und Entscheidungsträger aus Verwaltung und Wirtschaft – schweizweit und in allen drei Sprachregionen.', fr: 'En tant que sponsor, touchez les chefs de projet et décideurs dans toute la Suisse.', it: 'Come sponsor raggiungi project manager e decisori in tutta la Svizzera.' }} />
      <section className="section--tight">
        <div className="wrap">
          <div className="grid sponsor-stats">
            {[{ n: '36+', l: { de: 'Mitgliedsorganisationen', fr: 'organisations membres', it: 'organizzazioni' } }, { n: '500+', l: { de: 'Community-Mitglieder', fr: 'membres de la communauté', it: 'membri' } }, { n: '8', l: { de: 'Events pro Jahr', fr: 'événements par an', it: 'eventi all’anno' } }, { n: '3', l: { de: 'Sprachregionen', fr: 'régions linguistiques', it: 'regioni' } }].map((s, i) => (
              <Reveal key={i} delay={i * 60} className="sstat"><span className="sstat__n display">{s.n}</span><span className="sstat__l">{tr(s.l, lang)}</span></Reveal>
            ))}
          </div>
        </div>
      </section>
      <section className="section section--soft">
        <div className="wrap">
          <SectionHeader lang={lang} align="center" maxw="560px" eyebrow={{ de: 'Pakete', fr: 'Forfaits', it: 'Pacchetti' }} title={{ de: 'Sponsoring-Pakete', fr: 'Forfaits de sponsoring', it: 'Pacchetti di sponsoring' }} />
          <div className="grid packs">
            {packs.map((p, i) => (
              <Reveal key={p.name} delay={i * 80} className={`pack card ${p.feat ? 'pack--feat' : ''}`}>
                <span className={`pack__tag pack__tag--${p.tone}`}>{p.name}</span>
                <ul className="pack__list">
                  {p.items.map((it, j) => (<li key={j}><Ico name="check" size={16} />{tr(it, lang)}</li>))}
                </ul>
                <button className="btn btn--ghost" onClick={() => go('kontakt')} style={{ width: '100%', justifyContent: 'center' }}>{tr({ de: 'Anfragen', fr: 'Demander', it: 'Richiedi' }, lang)}</button>
              </Reveal>
            ))}
          </div>
          <p className="team__note">{tr({ de: 'Individuelle Pakete auf Anfrage. Sponsoring-Erträge fliessen vollumfänglich in die gemeinnützige Vereinsarbeit.', fr: 'Forfaits sur mesure sur demande.', it: 'Pacchetti su misura su richiesta.' }, lang)}</p>
        </div>
      </section>
      <JoinBand />
    </main>
  );
}

/* ---------------- KONTAKT ---------------- */
function PageKontakt() {
  const { lang } = useApp();
  const C = HC.contact;
  const [sent, setSent] = useState(false);
  return (
    <main>
      <PageHero lang={lang}
        eyebrow={{ de: 'Kontakt', fr: 'Contact', it: 'Contatto' }}
        title={{ de: 'Sprechen Sie mit uns', fr: 'Parlez-nous', it: 'Parla con noi' }}
        lede={{ de: 'Die Geschäftsstelle an der Berner Fachhochschule ist Ihre Ansprechpartnerin für alle Fragen rund um Mitgliedschaft, Events und die HERMES-Methode.', fr: 'Le secrétariat à la BFH est votre interlocuteur pour toutes vos questions.', it: 'Il segretariato presso la BFH è il tuo referente per ogni domanda.' }} />
      <section className="section--tight">
        <div className="wrap kontakt-wrap">
          <div className="kontakt-info">
            <div className="kinfo card">
              <span className="kinfo__ic"><Ico name="mail" size={20} /></span>
              <div><span className="kinfo__l">E-Mail</span><a href={`mailto:${C.email}`} className="kinfo__v">{C.email}</a></div>
            </div>
            <div className="kinfo card">
              <span className="kinfo__ic"><Ico name="pin" size={20} /></span>
              <div><span className="kinfo__l">{tr({ de: 'Geschäftsstelle', fr: 'Secrétariat', it: 'Segretariato' }, lang)}</span>{C.address.map((l, i) => (<span key={i} className="kinfo__v" style={{ display: 'block', fontWeight: 400, color: 'var(--muted)' }}>{l}</span>))}</div>
            </div>
            <div className="kinfo card">
              <span className="kinfo__ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H21.4v-5.4c0-1.3-.02-2.96-1.8-2.96-1.8 0-2.08 1.4-2.08 2.86V21H13.7z"/></svg></span>
              <div><span className="kinfo__l">LinkedIn</span><a href={C.linkedin} target="_blank" rel="noreferrer" className="kinfo__v">HERMES Connect Hub</a></div>
            </div>
            <div className="klinks">
              <a className="linkarrow" href="#"><Ico name="doc" size={16} /> Factsheet (PDF)</a>
              <a className="linkarrow" href="#"><Ico name="doc" size={16} /> {tr({ de: 'Unsere Statuten', fr: 'Nos statuts', it: 'I nostri statuti' }, lang)}</a>
            </div>
          </div>

          {sent ? (
            <div className="card joinform thanks">
              <div className="thanks__ic"><Ico name="check" size={30} /></div>
              <h3 className="subtitle">{tr({ de: 'Nachricht gesendet!', fr: 'Message envoyé !', it: 'Messaggio inviato!' }, lang)}</h3>
              <p>{tr({ de: 'Wir melden uns so rasch wie möglich bei Ihnen.', fr: 'Nous vous répondrons dès que possible.', it: 'Ti risponderemo al più presto.' }, lang)}</p>
            </div>
          ) : (
            <form className="card joinform" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="formgrid">
                <div className="field"><label>{tr({ de: 'Name', fr: 'Nom', it: 'Nome' }, lang)} <span className="req">*</span></label><input className="input" required /></div>
                <div className="field"><label>{tr({ de: 'E-Mail', fr: 'E-mail', it: 'E-mail' }, lang)} <span className="req">*</span></label><input className="input" type="email" required /></div>
                <div className="field span2"><label>{tr({ de: 'Betreff', fr: 'Objet', it: 'Oggetto' }, lang)}</label><input className="input" /></div>
                <div className="field span2"><label>{tr({ de: 'Nachricht', fr: 'Message', it: 'Messaggio' }, lang)} <span className="req">*</span></label><textarea className="textarea" required></textarea></div>
              </div>
              <label className="checkrow"><input type="checkbox" required /><span>{tr({ de: 'Ich bin einverstanden, dass meine Angaben zur Bearbeitung der Anfrage verwendet werden.', fr: "J'accepte que mes données soient utilisées pour traiter ma demande.", it: 'Accetto che i miei dati siano usati per gestire la richiesta.' }, lang)}</span></label>
              <button className="btn btn--primary btn--lg" type="submit" style={{ alignSelf: 'flex-start' }}>{tr({ de: 'Nachricht senden', fr: 'Envoyer', it: 'Invia' }, lang)} <span className="arr">→</span></button>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}

/* ---------------- HERMES AGORA (flagship event page) ---------------- */
function PageAgora() {
  const { lang, go } = useApp();
  const program = [
    { t: '13:00', d: { de: 'Türöffnung & Welcome Coffee', fr: 'Accueil & café', it: 'Accoglienza & caffè' } },
    { t: '13:30', d: { de: 'Keynote: HERMES & digitale Transformation', fr: 'Keynote', it: 'Keynote' } },
    { t: '14:30', d: { de: 'Interaktive Workshops (parallel)', fr: 'Ateliers interactifs', it: 'Workshop interattivi' } },
    { t: '16:00', d: { de: 'Praxis-Panel & Community-Inputs', fr: 'Panel & retours', it: 'Panel & riscontri' } },
    { t: '17:00', d: { de: 'Apéro riche & Networking', fr: 'Apéritif & réseautage', it: 'Aperitivo & networking' } },
  ];
  return (
    <main>
      <section className="agora-hero">
        <div className="wrap agora-hero__inner">
          <Reveal>
            <span className="chip chip--gold">HERMES Agora 2026</span>
            <h1 className="display agora-hero__title">HERMES<br/>Agora</h1>
            <p className="lede measure-sm" style={{ color: '#cdd3ec', marginTop: 18 }}>{tr({ de: 'Das Westschweizer Flaggschiff-Format des HERMES Connect Hub – ein Nachmittag voller Impulse, Workshops und Begegnungen.', fr: 'Le format phare romand du HERMES Connect Hub.', it: 'Il formato di punta romando di HERMES Connect Hub.' }, lang)}</p>
            <div className="agora-hero__meta">
              <span><Ico name="clock" /> 15. Sept. 2026 · 13:00 – 18:00</span>
              <span><Ico name="pin" /> ISEIG, Av. des Boveresses 52, Lausanne</span>
            </div>
            <div className="hero__actions" style={{ marginTop: 28 }}>
              <button className="btn btn--light btn--lg" onClick={() => go('mitglieder')}>{tr(HC.t.register, lang)} <span className="arr">→</span></button>
              <button className="btn btn--lg joinband__ghost" onClick={() => go('events')}>{tr(HC.t.allEvents, lang)}</button>
            </div>
          </Reveal>
        </div>
      </section>
      <section className="section">
        <div className="wrap agora-grid">
          <div>
            <SectionHeader lang={lang} eyebrow={{ de: 'Über das Event', fr: "À propos", it: "L'evento" }} title={{ de: 'Wo HERMES auf Innovation trifft', fr: 'Où HERMES rencontre l’innovation', it: 'Dove HERMES incontra l’innovazione' }} />
            <p className="lede" style={{ marginTop: 18 }}>{tr({ de: 'An der HERMES Agora bringen wir die Westschweizer Community zusammen: Projektleitende, Berater*innen und Methoden-Expert*innen diskutieren aktuelle Herausforderungen und entwickeln gemeinsam Lösungen. Alle Teilnehmenden erhalten die Anerkennung für die HERMES Advanced Rezertifizierung.', fr: "À l'Agora HERMES, nous réunissons la communauté romande pour développer ensemble des solutions.", it: "All'Agora HERMES riuniamo la community romanda per sviluppare soluzioni insieme." }, lang)}</p>
          </div>
          <div className="program card">
            <h3 className="subtitle" style={{ marginBottom: 18 }}>{tr({ de: 'Programm', fr: 'Programme', it: 'Programma' }, lang)}</h3>
            {program.map((row, i) => (
              <div key={i} className="program__row"><span className="program__t">{row.t}</span><span className="program__d">{tr(row.d, lang)}</span></div>
            ))}
          </div>
        </div>
      </section>
      <JoinBand />
    </main>
  );
}

Object.assign(window, { PageRessourcen, PageSponsoring, PageKontakt, PageAgora });