/* ============================================================
   HERMES Connect Hub — Mitglieder (Membership)
   ============================================================ */
function PageMitglieder() {
  const { lang, go } = useApp();
  const [tier, setTier] = useState(1);
  const [sent, setSent] = useState(false);
  const formRef = useRef(null);

  const pickTier = (i) => {
    setTier(i);
    if (formRef.current) {
      const y = formRef.current.getBoundingClientRect().top + window.scrollY - 90;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  return (
    <main>
      <PageHero lang={lang}
        eyebrow={{ de: 'Mitgliedschaft', fr: 'Adhésion', it: 'Adesione' }}
        title={{ de: 'Werden Sie Mitglied', fr: 'Devenez membre', it: 'Diventa membro' }}
        lede={{ de: 'Der HERMES Connect Hub bietet viele Formate zum Wissenstransfer und Erfahrungsaustausch – hier treffen Best Practices aus verschiedenen Branchen auf wissenschaftliches Knowhow.', fr: "Le HERMES Connect Hub offre de nombreux formats d'échange de connaissances et d'expériences.", it: 'HERMES Connect Hub offre molti formati per lo scambio di conoscenze ed esperienze.' }} />

      {/* Benefits */}
      <section className="section--tight">
        <div className="wrap">
          <div className="grid benefits">
            {HC.benefits.map((b, i) => (
              <Reveal key={i} delay={(i % 3) * 70} className="benefit">
                <span className="benefit__ic"><Ico name="check" size={18} /></span>
                <span>{tr(b, lang)}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Tiers */}
      <section className="section section--soft">
        <div className="wrap">
          <SectionHeader lang={lang}
            eyebrow={{ de: 'Tarife', fr: 'Tarifs', it: 'Tariffe' }}
            title={{ de: 'Mitgliedschaft für jede Grösse', fr: 'Une adhésion pour chaque taille', it: 'Un’adesione per ogni dimensione' }}
            lede={{ de: 'Es gibt unterschiedliche Tarife für Studierende, Einzelpersonen und Unternehmen.', fr: 'Différents tarifs pour étudiants, particuliers et entreprises.', it: 'Tariffe diverse per studenti, privati e aziende.' }} />
          <div className="tiers">
            {HC.tiers.map((tr_, i) => (
              <Reveal key={i} delay={(i % 3) * 60}
                className={`tier card card--hover ${tr_.featured ? 'tier--feat' : ''} ${tier === i ? 'tier--sel' : ''}`}
                onClick={() => pickTier(i)}>
                {tr_.featured && <span className="tier__badge">{tr({ de: 'Beliebt', fr: 'Populaire', it: 'Popolare' }, lang)}</span>}
                <span className={`tier__who chip ${tr_.who === 'org' ? 'chip--navy' : 'chip--soft'}`}>{tr_.who === 'org' ? tr({ de: 'Organisation', fr: 'Organisation', it: 'Organizzazione' }, lang) : tr({ de: 'Person', fr: 'Personne', it: 'Persona' }, lang)}</span>
                <h3 className="tier__name">{tr(tr_.name, lang)}</h3>
                <div className="tier__price"><span className="tier__cur">CHF</span><span className="tier__amt display">{tr_.price}</span></div>
                <div className="tier__unit">{tr({ de: 'pro Jahr', fr: 'par an', it: "all'anno" }, lang)}</div>
                <div className="tier__note">{tr(tr_.note, lang)}</div>
                <span className="tier__pick">{tier === i ? tr({ de: 'Ausgewählt ✓', fr: 'Sélectionné ✓', it: 'Selezionato ✓' }, lang) : tr({ de: 'Auswählen', fr: 'Choisir', it: 'Scegli' }, lang)}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Join form */}
      <section className="section" ref={formRef}>
        <div className="wrap joinform-wrap">
          <div className="joinform-intro">
            <div className="eyebrow">{tr({ de: 'Anmeldung', fr: 'Inscription', it: 'Iscrizione' }, lang)}</div>
            <h2 className="title">{tr({ de: 'Anmeldeformular Mitgliedschaft', fr: "Formulaire d'adhésion", it: 'Modulo di adesione' }, lang)}</h2>
            <p className="lede" style={{ marginTop: 16 }}>{tr({ de: 'Melden Sie sich hier an und werden Sie Teil unserer Community. Sie erhalten anschliessend die Rechnung sowie alle Informationen von unserer Geschäftsstelle.', fr: 'Inscrivez-vous et rejoignez notre communauté.', it: 'Iscriviti e unisciti alla nostra community.' }, lang)}</p>
            <div className="joinform-selected">
              <span>{tr({ de: 'Gewählter Tarif', fr: 'Tarif choisi', it: 'Tariffa scelta' }, lang)}</span>
              <strong>{tr(HC.tiers[tier].name, lang)} · CHF {HC.tiers[tier].price} <small>{tr(HC.tiers[tier].note, lang)}</small></strong>
            </div>
          </div>

          {sent ? (
            <div className="card joinform thanks">
              <div className="thanks__ic"><Ico name="check" size={30} /></div>
              <h3 className="subtitle">{tr({ de: 'Vielen Dank für Ihre Anmeldung!', fr: 'Merci pour votre inscription !', it: 'Grazie per la tua iscrizione!' }, lang)}</h3>
              <p>{tr({ de: 'Unsere Geschäftsstelle meldet sich in Kürze bei Ihnen.', fr: 'Notre secrétariat vous contactera prochainement.', it: 'Il nostro segretariato ti contatterà a breve.' }, lang)}</p>
              <button className="btn btn--ghost" onClick={() => setSent(false)}>{tr({ de: 'Weitere Anmeldung', fr: 'Nouvelle inscription', it: 'Nuova iscrizione' }, lang)}</button>
            </div>
          ) : (
            <form className="card joinform" onSubmit={(e) => { e.preventDefault(); setSent(true); window.scrollTo({ top: formRef.current.offsetTop - 90, behavior: 'smooth' }); }}>
              <div className="formgrid">
                <div className="field span2"><label>{tr({ de: 'Unternehmen / Organisation', fr: 'Entreprise / organisation', it: 'Azienda / organizzazione' }, lang)}</label><input className="input" placeholder={tr({ de: 'Optional bei Einzelpersonen', fr: 'Facultatif', it: 'Facoltativo' }, lang)} /></div>
                <div className="field"><label>{tr({ de: 'Vorname', fr: 'Prénom', it: 'Nome' }, lang)} <span className="req">*</span></label><input className="input" required /></div>
                <div className="field"><label>{tr({ de: 'Nachname', fr: 'Nom', it: 'Cognome' }, lang)} <span className="req">*</span></label><input className="input" required /></div>
                <div className="field"><label>{tr({ de: 'E-Mail-Adresse', fr: 'E-mail', it: 'E-mail' }, lang)} <span className="req">*</span></label><input className="input" type="email" required /></div>
                <div className="field"><label>{tr({ de: 'Telefon', fr: 'Téléphone', it: 'Telefono' }, lang)}</label><input className="input" type="tel" /></div>
                <div className="field span2"><label>{tr({ de: 'Strasse und Hausnummer', fr: 'Rue et numéro', it: 'Via e numero' }, lang)}</label><input className="input" /></div>
                <div className="field"><label>{tr({ de: 'PLZ', fr: 'NPA', it: 'CAP' }, lang)}</label><input className="input" /></div>
                <div className="field"><label>{tr({ de: 'Stadt', fr: 'Ville', it: 'Città' }, lang)}</label><input className="input" /></div>
                <div className="field span2"><label>{tr({ de: 'Mitgliedschaft', fr: 'Adhésion', it: 'Adesione' }, lang)} <span className="req">*</span></label>
                  <select className="select" value={tier} onChange={(e) => setTier(+e.target.value)}>
                    {HC.tiers.map((tt, i) => (<option key={i} value={i}>{tr(tt.name, lang)} — CHF {tt.price} ({tr(tt.note, lang)})</option>))}
                  </select>
                </div>
              </div>
              <div className="formchecks">
                <label className="checkrow"><input type="checkbox" required /><span>{tr({ de: 'Ich bin damit einverstanden, dass der Verein meine Daten zu administrativen Vereinszwecken nutzt (z.B. Rechnungsstellung, Information).', fr: "J'accepte que l'association utilise mes données à des fins administratives.", it: "Accetto che l'associazione utilizzi i miei dati per scopi amministrativi." }, lang)}</span></label>
                <label className="checkrow"><input type="checkbox" /><span>{tr({ de: 'Ich bin einverstanden, dass meine Organisation auf der Mitgliederliste (Website) aufgeführt wird.', fr: "J'accepte de figurer sur la liste des membres.", it: "Accetto di comparire nell'elenco dei membri." }, lang)}</span></label>
              </div>
              <button className="btn btn--primary btn--lg" type="submit" style={{ alignSelf: 'flex-start' }}>{tr({ de: 'Anmeldung absenden', fr: "Envoyer l'inscription", it: "Invia l'iscrizione" }, lang)} <span className="arr">→</span></button>
            </form>
          )}
        </div>
      </section>

      {/* Member wall */}
      <section className="section section--soft">
        <div className="wrap">
          <SectionHeader lang={lang}
            eyebrow={{ de: 'Mitglieder', fr: 'Membres', it: 'Membri' }}
            title={{ de: 'Unsere Mitgliedsorganisationen', fr: 'Nos organisations membres', it: 'Le nostre organizzazioni membri' }}
            lede={{ de: 'Einzelmitgliedschaften und Studierende werden nicht auf der Website veröffentlicht.', fr: 'Les adhésions individuelles ne sont pas publiées.', it: 'Le adesioni individuali non vengono pubblicate.' }} />
          <Reveal delay={60}><LogoWall items={HC.memberLogos} /></Reveal>
          <Reveal delay={100}>
            <div className="memtext">
              {HC.memberTextOnly.map((m) => (<span key={m} className="memtext__item">{m}</span>))}
            </div>
          </Reveal>
        </div>
      </section>

      <JoinBand />
    </main>
  );
}

Object.assign(window, { PageMitglieder });