/* ============================================================
   HERMES Connect Hub — Shared components & app context
   ============================================================ */
const { createContext, useContext, useState, useEffect, useRef, useCallback } = React;

/* App-wide context: language + routing */
const HCContext = createContext(null);
const useApp = () => useContext(HCContext);

/* localize helper */
function tr(obj, lang) {
  if (obj == null) return '';
  if (typeof obj === 'string') return obj;
  return obj[lang] || obj.de || '';
}

/* ---- Brand logo (real asset) ---- */
function Logo({ variant = 'main', height = 62, onClick }) {
  const src = variant === 'inverted'
    ? 'assets/01 Logo HCH/HERMES Connect Inverted Color.png'
    : 'assets/01 Logo HCH/HERMES Connect Main Logo.png';
  return (
    <a href="#home" onClick={onClick} aria-label="HERMES Connect Hub — Startseite"
       style={{ display: 'inline-flex', alignItems: 'center' }}>
      <img src={src} alt="HERMES Connect Hub" style={{ height, width: 'auto' }} />
    </a>
  );
}

/* ---- Decorative bracket mark (echoes logo frame) ---- */
function BracketMark({ size = 120, color = 'var(--hc-blue)', stroke = 3, style }) {
  return (
    <svg width={size} height={size * 1.18} viewBox="0 0 120 142" fill="none" style={style} aria-hidden="true">
      <path d={`M40 4 H8 V138 H40`} stroke={color} strokeWidth={stroke} />
      <path d={`M80 4 H112 V138 H80`} stroke={color} strokeWidth={stroke} />
    </svg>
  );
}

/* ---- Reveal on scroll ---- */
function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const show = () => el.classList.add('in');
    // Fail-open: if already in (or near) the viewport at mount, reveal right away.
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh * 0.95) { show(); return; }
    if (!('IntersectionObserver' in window)) { show(); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { show(); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    // Safety net: never leave content permanently hidden if the observer never fires.
    const fallback = setTimeout(show, 900);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${className}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </Tag>
  );
}

/* ---- Section header block ---- */
function SectionHeader({ eyebrow, title, lede, lang, align = 'left', maxw }) {
  return (
    <div style={{ textAlign: align, maxWidth: maxw, marginInline: align === 'center' ? 'auto' : undefined }}>
      {eyebrow && <div className="eyebrow" style={align === 'center' ? { justifyContent: 'center' } : null}>{tr(eyebrow, lang)}</div>}
      <h2 className="title">{tr(title, lang)}</h2>
      {lede && <p className="lede" style={{ marginTop: 18 }}>{tr(lede, lang)}</p>}
    </div>
  );
}

/* ============================================================
   HEADER
   ============================================================ */
function Header() {
  const { lang, setLang, route, go } = useApp();
  const { nav, t } = HC;
  const [scrolled, setScrolled] = useState(false);
  const [openMenu, setOpenMenu] = useState(false);   // mobile
  const [openDrop, setOpenDrop] = useState(false);   // ressourcen dropdown
  const dropRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => { setOpenMenu(false); setOpenDrop(false); }, [route]);

  useEffect(() => {
    const onDoc = (e) => { if (dropRef.current && !dropRef.current.contains(e.target)) setOpenDrop(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const isActive = (id, item) =>
    route === id || (item.children && item.children.some((c) => c.id === route));

  const langs = ['de', 'fr', 'it'];

  return (
    <header className={`hdr ${scrolled ? 'hdr--scrolled' : ''}`}>
      <div className="wrap wrap-wide hdr__inner">
        <div className="hdr__logo"><Logo height={60} onClick={(e) => { e.preventDefault(); go('home'); }} /></div>

        <nav className="hdr__nav" aria-label="Hauptnavigation">
          {nav.map((item) => item.children ? (
            <div key={item.id} className="hdr__dropwrap" ref={dropRef}>
              <button
                className={`hdr__link ${isActive(item.id, item) ? 'is-active' : ''}`}
                onClick={() => setOpenDrop((v) => !v)}
                aria-expanded={openDrop}>
                {tr(item.label, lang)}
                <svg className={`caret ${openDrop ? 'up' : ''}`} width="11" height="7" viewBox="0 0 11 7" aria-hidden="true"><path d="M1 1l4.5 4.5L10 1" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"/></svg>
              </button>
              {openDrop && (
                <div className="hdr__drop">
                  {item.children.map((c) => (
                    <button key={c.id} className="hdr__dropitem" onClick={() => go(c.id)}>
                      <span className="hdr__dropitem-t">{tr(c.label, lang)}</span>
                      <span className="hdr__dropitem-d">{tr(c.desc, lang)}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <button key={item.id}
              className={`hdr__link ${route === item.id ? 'is-active' : ''}`}
              onClick={() => go(item.id)}>
              {tr(item.label, lang)}
            </button>
          ))}
        </nav>

        <div className="hdr__right">
          <div className="langsw" role="group" aria-label="Sprache">
            {langs.map((l) => (
              <button key={l} className={`langsw__b ${lang === l ? 'on' : ''}`} onClick={() => setLang(l)}>{l.toUpperCase()}</button>
            ))}
          </div>
          <button className="btn btn--primary hdr__cta" onClick={() => go('mitglieder')}>{tr(t.join, lang)}</button>
          <button className={`burger ${openMenu ? 'on' : ''}`} aria-label="Menü" onClick={() => setOpenMenu((v) => !v)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      <div className={`mobile ${openMenu ? 'mobile--open' : ''}`}>
        <div className="mobile__inner">
          {nav.map((item) => (
            <div key={item.id}>
              <button className={`mobile__link ${route === item.id ? 'is-active' : ''}`} onClick={() => go(item.id)}>{tr(item.label, lang)}</button>
              {item.children && (
                <div className="mobile__sub">
                  {item.children.map((c) => (
                    <button key={c.id} className={`mobile__sublink ${route === c.id ? 'is-active' : ''}`} onClick={() => go(c.id)}>{tr(c.label, lang)}</button>
                  ))}
                </div>
              )}
            </div>
          ))}
          <button className="btn btn--primary btn--lg" style={{ marginTop: 18, width: '100%', justifyContent: 'center' }} onClick={() => go('mitglieder')}>{tr(t.join, lang)}</button>
          <div className="langsw langsw--mobile">
            {langs.map((l) => (<button key={l} className={`langsw__b ${lang === l ? 'on' : ''}`} onClick={() => setLang(l)}>{l.toUpperCase()}</button>))}
          </div>
        </div>
      </div>
    </header>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  const { lang, go } = useApp();
  const { nav, t, contact } = HC;
  return (
    <footer className="ftr">
      <div className="wrap wrap-wide">
        <div className="ftr__top">
          <div className="ftr__brand">
            <Logo variant="inverted" height={74} onClick={(e) => { e.preventDefault(); go('home'); }} />
            <p className="ftr__tag">{tr({ de: 'Die Projektmanagement Community der Schweiz. Verbunden mit der Bundeskanzlei.', fr: 'La communauté suisse de gestion de projet.', it: 'La community svizzera di project management.' }, lang)}</p>
            <a className="ftr__li" href={contact.linkedin} target="_blank" rel="noreferrer" aria-label="LinkedIn">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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>
              LinkedIn
            </a>
          </div>

          <div className="ftr__cols">
            <div className="ftr__col">
              <h4>{tr({ de: 'Navigation', fr: 'Navigation', it: 'Navigazione' }, lang)}</h4>
              {nav.filter((n) => !n.children).map((n) => (
                <button key={n.id} className="ftr__link" onClick={() => go(n.id)}>{tr(n.label, lang)}</button>
              ))}
            </div>
            <div className="ftr__col">
              <h4>{tr({ de: 'Ressourcen', fr: 'Ressources', it: 'Risorse' }, lang)}</h4>
              {nav.find((n) => n.id === 'ressourcen').children.map((c) => (
                <button key={c.id} className="ftr__link" onClick={() => go(c.id)}>{tr(c.label, lang)}</button>
              ))}
              <button className="ftr__link" onClick={() => go('events')}>{tr({ de: 'Vergangene Events', fr: 'Événements passés', it: 'Eventi passati' }, lang)}</button>
            </div>
            <div className="ftr__col">
              <h4>{tr({ de: 'Kontakt', fr: 'Contact', it: 'Contatto' }, lang)}</h4>
              {contact.address.map((line, i) => (<span key={i} className="ftr__txt">{line}</span>))}
              <a className="ftr__link" href={`mailto:${contact.email}`}>{contact.email}</a>
            </div>
          </div>
        </div>

        <div className="ftr__bottom">
          <span>© {new Date().getFullYear()} HERMES Connect Hub · {tr({ de: 'Unabhängiger Verein', fr: 'Association indépendante', it: 'Associazione indipendente' }, lang)}</span>
          <div className="ftr__legal">
            <button className="ftr__link" onClick={() => go('kontakt')}>Statuten</button>
            <button className="ftr__link" onClick={() => go('kontakt')}>Datenschutz</button>
            <button className="ftr__link" onClick={() => go('kontakt')}>Impressum</button>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HCContext, useApp, tr, Logo, BracketMark, Reveal, SectionHeader, Header, Footer });