/* Header.jsx — top nav for the book site */

function Header({ onJump }) {
  const { t } = useI18n();
  return (
    <header className="nav">
      <div className="container nav-row">
        <a href="#top" className="brand" onClick={(e) => { e.preventDefault(); onJump?.('top'); }}>
          <span className="mark" aria-hidden="true"></span>
          <span>The Society That Learns</span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#about"   onClick={(e) => { e.preventDefault(); onJump?.('about'); }}>{t('nav.about')}</a>
          <a href="#authors" onClick={(e) => { e.preventDefault(); onJump?.('authors'); }}>{t('nav.authors')}</a>
          <a href="#praise"  onClick={(e) => { e.preventDefault(); onJump?.('praise'); }}>{t('nav.praise')}</a>
          <a href="#oa"      onClick={(e) => { e.preventDefault(); onJump?.('oa'); }}>{t('nav.oa')}</a>
          <a href="#papers"  onClick={(e) => { e.preventDefault(); onJump?.('papers'); }}>{t('nav.papers')}</a>
          <a href="#subscribe" onClick={(e) => { e.preventDefault(); onJump?.('subscribe'); }}>{t('nav.subscribe')}</a>
          <a href="mailto:thesocietythatlearns@tltlab.org">{t('nav.contact')}</a>
          <LangSwitch />
        </nav>
      </div>
    </header>
  );
}

window.Header = Header;