/* ============================================================
   HERMES Connect Hub — Home (Über uns)
   ============================================================ */
function PageHome() {
  const { lang, go, tweaks } = useApp();
  const H = HC.home;
  const upcoming = HC.events.slice(0, 3);
  const [teamTab, setTeamTab] = useState('board');

  const teamData = { board: HC.board, office: HC.office, chapters: HC.chapters };
  const teamTabs = [
    { id: 'board',    label: { de: 'Vorstand', fr: 'Comité', it: 'Comitato' } },
    { id: 'office',   label: { de: 'Geschäftsstelle', fr: 'Secrétariat', it: 'Segretariato' } },
    { id: 'chapters', label: { de: 'Chapter Leads', fr: 'Chapter Leads', it: 'Chapter Leads' } },
  ];

  return (
    <main>
      {/* ---------- HERO ---------- */}
      <section className="hero hero--centered">
        <div className="hero__bg" aria-hidden="true">
          <div className="hero__grid"></div>
        </div>
        <div className="wrap hero__inner hero__inner--centered">
          <div className="hero__copy hero__copy--centered">
            <Reveal>
              <h1 className="hero__title--centered">{tr(H.heroKicker, lang)}</h1>
            </Reveal>
            <Reveal delay={130}>
              <p className="lede hero__sub hero__sub--centered">{tr(H.heroSub, lang)}</p>
            </Reveal>
            <Reveal delay={190}>
              <div className="hero__actions hero__actions--centered">
                <button className="btn btn--primary btn--lg" onClick={() => go('mitglieder')}>{tr(HC.t.join, lang)}</button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ---------- INTRO ---------- */}
      <section className="section">
        <div className="wrap">
          <div className="introsplit">
            <Reveal>
              <div className="eyebrow">{tr({ de: 'Über uns', fr: 'À propos', it: 'Chi siamo' }, lang)}</div>
              <h2 className="title">{tr({ de: 'Eine Community, die Projekte zum Erfolg führt.', fr: 'Une communauté qui mène les projets au succès.', it: 'Una community che porta i progetti al successo.' }, lang)}</h2>
            </Reveal>
            <Reveal delay={90}><p className="lede">{tr(H.intro, lang)}</p></Reveal>
          </div>
        </div>
      </section>

      {/* ---------- PILLARS ---------- */}
      <section className="section section--soft">
        <div className="wrap">
          <div className="grid pillars">
            {H.pillars.map((p, i) => (
              <Reveal key={p.k} delay={i * 90} className="pillar card">
                <span className="kicker-num">{p.k}</span>
                <h3 className="subtitle pillar__t">{tr(p.title, lang)}</h3>
                <p>{tr(p.body, lang)}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- BRIDGE THE GAP ---------- */}
      <section className="section">
        <div className="wrap">
          <SectionHeader lang={lang} align="center" maxw="640px"
            eyebrow={{ de: 'Innovation', fr: 'Innovation', it: 'Innovazione' }}
            title={{ de: 'Bridge the gap', fr: 'Bridge the gap', it: 'Bridge the gap' }}
            lede={H.innovation} />
          <Reveal delay={100}>
            <div className="bridge">
              <div className="bridge__node bridge__node--a">
                <Ico name="users" size={26} />
                <strong>{tr({ de: 'Anwender*innen', fr: 'Utilisateurs', it: 'Utenti' }, lang)}</strong>
                <span>{tr({ de: 'Verwaltung · Wirtschaft · Forschung', fr: 'Administration · économie · recherche', it: 'Amministrazione · economia · ricerca' }, lang)}</span>
              </div>
              <div className="bridge__mid">
                <div className="bridge__hub">
                  <Logo height={50} />
                  <span className="bridge__hublbl">{tr({ de: 'sammelt · bereitet auf · vermittelt', fr: 'recueille · prépare · transmet', it: 'raccoglie · elabora · trasmette' }, lang)}</span>
                </div>
                <div className="bridge__lines" aria-hidden="true"><span></span><span></span></div>
              </div>
              <div className="bridge__node bridge__node--b">
                <Ico name="globe" size={26} />
                <strong>{tr({ de: 'Bundeskanzlei', fr: 'Chancellerie fédérale', it: 'Cancelleria federale' }, lang)}</strong>
                <span>{tr({ de: 'Eignerin der HERMES-Methode', fr: 'Propriétaire de la méthode HERMES', it: 'Proprietaria del metodo HERMES' }, lang)}</span>
              </div>
            </div>
          </Reveal>
          <Reveal delay={140}>
            <div className="bridge__cta">
              <a className="linkarrow" href="https://www.hermes-ch.ch" onClick={(e) => { e.preventDefault(); go('ressourcen'); }}>
                {tr({ de: 'Factsheet HERMES Connect Hub', fr: 'Fiche d’information', it: 'Scheda informativa' }, lang)} <span className="arr">→</span>
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------- PURPOSE quote band ---------- */}
      <section className="section section--navy purpose">
        <div className="wrap">
          <Reveal>
            <BracketMark size={56} stroke={3} color="rgba(142,167,255,.5)" style={{ marginBottom: 26 }} />
            <p className="purpose__quote">{tr(H.purpose, lang)}</p>
            <div className="purpose__by">{tr({ de: 'Purpose — Why we do it', fr: 'Notre raison d’être', it: 'Il nostro scopo' }, lang)}</div>
          </Reveal>
        </div>
      </section>

      {/* ---------- UPCOMING EVENTS ---------- */}
      <section className="section">
        <div className="wrap">
          <div className="rowhead">
            <SectionHeader lang={lang}
              eyebrow={{ de: 'Agenda', fr: 'Agenda', it: 'Agenda' }}
              title={{ de: 'Nächste Veranstaltungen', fr: 'Prochains événements', it: 'Prossimi eventi' }} />
            <button className="btn btn--ghost" onClick={() => go('events')}>{tr(HC.t.allEvents, lang)} <span className="arr">→</span></button>
          </div>
          <div className="grid events-grid">
            {upcoming.map((ev, i) => (
              <Reveal key={ev.id} delay={i * 80}><EventCard ev={ev} lang={lang} onOpen={() => go('events')} /></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- TEAM ---------- */}
      <section className="section section--soft">
        <div className="wrap">
          <SectionHeader lang={lang}
            eyebrow={{ de: 'Organisation', fr: 'Organisation', it: 'Organizzazione' }}
            title={{ de: 'Ein ehrenamtlicher Vorstand aus allen Sprachregionen', fr: 'Un comité bénévole de toutes les régions', it: 'Un comitato volontario da tutte le regioni' }}
            maxw="720px" />
          <div className="tabs">
            {teamTabs.map((tb) => (
              <button key={tb.id} className={`tab ${teamTab === tb.id ? 'on' : ''}`} onClick={() => setTeamTab(tb.id)}>{tr(tb.label, lang)}</button>
            ))}
          </div>
          <div className="grid team-grid">
            {teamData[teamTab].map((p, i) => (<Reveal key={p.name + i} delay={(i % 4) * 60}><PersonCard p={p} /></Reveal>))}
          </div>
          <Reveal>
            <p className="team__note">{tr({ de: 'Die Geschäftsstelle befindet sich an der Berner Fachhochschule am Institute Digital Technology Management (IDTM). Die Bundeskanzlei ist durch ein Beiratsmitglied vertreten.', fr: "Le secrétariat se trouve à la Haute école spécialisée bernoise (IDTM).", it: 'Il segretariato si trova presso la BFH (IDTM).' }, lang)}</p>
          </Reveal>
        </div>
      </section>

      {/* ---------- NETWORK / MEMBERS ---------- */}
      <section className="section">
        <div className="wrap">
          <SectionHeader lang={lang} align="center" maxw="620px"
            eyebrow={{ de: 'Netzwerk', fr: 'Réseau', it: 'Rete' }}
            title={{ de: 'Über 36 Organisationen sind dabei', fr: 'Plus de 36 organisations nous font confiance', it: 'Oltre 36 organizzazioni con noi' }} />
          <Reveal delay={80}><LogoWall items={HC.memberLogos} /></Reveal>
          <Reveal delay={120}>
            <div style={{ textAlign: 'center', marginTop: 38 }}>
              <button className="btn btn--ghost" onClick={() => go('mitglieder')}>{tr({ de: 'Alle Mitglieder ansehen', fr: 'Voir tous les membres', it: 'Tutti i membri' }, lang)} <span className="arr">→</span></button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------- STATS STRIP ---------- */}
      {(!tweaks || tweaks.heroStats !== false) && (
        <section className="section section--tight section--soft">
          <div className="wrap">
            <Reveal>
              <div className="statstrip" style={{ marginTop: 0 }}>
                {H.stats.map((s, i) => (
                  <div key={i} className="statstrip__item">
                    <div className="statstrip__num display">{s.num}</div>
                    <div className="statstrip__lbl">{tr(s.label, lang)}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </section>
      )}

      <JoinBand />
    </main>
  );
}

/* Hero network visual — circles + lines only (community / connect motif) */
function NetworkPanel() {
  const nodes = [
    [50, 18], [20, 38], [80, 34], [34, 70], [66, 74], [50, 48], [12, 68], [88, 64],
  ];
  const links = [[5,0],[5,1],[5,2],[5,3],[5,4],[1,6],[4,7],[2,7],[3,6],[0,2]];
  return (
    <div className="netpanel">
      <div className="netpanel__frame">
        <svg viewBox="0 0 100 92" className="netpanel__svg" aria-hidden="true">
          {links.map(([a, b], i) => (
            <line key={i} x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]} stroke="rgba(10,86,148,.28)" strokeWidth="0.5" />
          ))}
          {nodes.map(([x, y], i) => (
            <g key={i}>
              <circle cx={x} cy={y} r={i === 5 ? 5.2 : 3} fill={i === 5 ? 'var(--hc-blue)' : '#fff'} stroke={i === 5 ? 'var(--hc-blue)' : 'var(--hc-navy)'} strokeWidth="0.8" className="netnode" style={{ animationDelay: `${i * 0.3}s` }} />
            </g>
          ))}
        </svg>
        <div className="netpanel__chip netpanel__chip--1">HERMES 2022</div>
        <div className="netpanel__chip netpanel__chip--2">Bundeskanzlei</div>
        <div className="netpanel__chip netpanel__chip--3">BFH · IDTM</div>
      </div>
    </div>
  );
}

/* Reusable join CTA band */
function JoinBand() {
  const { lang, go } = useApp();
  return (
    <section className="joinband">
      <div className="wrap joinband__inner">
        <div>
          <h2 className="display joinband__title">{tr({ de: 'Werden Sie Teil der HERMES Community', fr: 'Rejoignez la communauté HERMES', it: 'Entra nella community HERMES' }, lang)}</h2>
          <p className="joinband__sub">{tr({ de: 'Vernetzung, vergünstigte Events und direkter Draht zur Methodenentwicklung – ab CHF 25 im Jahr.', fr: 'Réseau, événements à tarif réduit et lien direct avec le développement de la méthode.', it: 'Networking, eventi scontati e contatto diretto con lo sviluppo del metodo.' }, lang)}</p>
        </div>
        <div className="joinband__actions">
          <button className="btn btn--light btn--lg" onClick={() => go('mitglieder')}>{tr(HC.t.join, lang)} <span className="arr">→</span></button>
          <button className="btn btn--lg joinband__ghost" onClick={() => go('kontakt')}>{tr({ de: 'Kontakt aufnehmen', fr: 'Nous contacter', it: 'Contattaci' }, lang)}</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PageHome, JoinBand, NetworkPanel });