// Shared bits: top bar, bottom nav, language toggle, hooks
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// Custom hook: i18n
function useT() {
  const [lang, setLang] = useState(() => localStorage.getItem('astronia-lang') || 'de');
  const t = useCallback((key) => {
    const dict = window.AstroniaData.i18n[lang];
    return (dict && dict[key]) || key;
  }, [lang]);
  const setLangPersist = useCallback((l) => {
    setLang(l);
    try { localStorage.setItem('astronia-lang', l); } catch {}
  }, []);
  return { lang, setLang: setLangPersist, t };
}

// Top bar
function TopBar({ lang, setLang, t, onPitch }) {
  return (
    <header className="topbar">
      <div className="brand">
        <img src="assets/astronia-logo.png" alt="Astronia" />
        <div>
          <div className="brand-text">ASTRONIA</div>
          <div className="brand-sub">{t('brandSub')}</div>
        </div>
      </div>
      <div className="topbar-right">
        <button className="pitch-btn" onClick={onPitch} title={t('pitchHint')}>
          <span className="pitch-dot"></span>
          <span className="pitch-label">{t('pitchCta')}</span>
        </button>
        <div className="su-tag" title="Schülerunion Niederösterreich">
          <span>mit</span>
          <img src="assets/schuelerunion-logo.png" alt="Schülerunion" />
        </div>
        <div className="lang-toggle" role="tablist" aria-label="Language">
          <button className={lang === 'de' ? 'active' : ''} onClick={() => setLang('de')} aria-pressed={lang === 'de'}>DE</button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')} aria-pressed={lang === 'en'}>EN</button>
        </div>
      </div>
    </header>
  );
}

// Bottom navigation (iOS pill)
const NavIcons = {
  home: (
    <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a2 2 0 01-2 2h-4v-6h-6v6H5a2 2 0 01-2-2v-9z"/></svg>
  ),
  team: (
    <svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.2"/><circle cx="17" cy="9.5" r="2.4"/><path d="M3 19c.6-3.3 3.2-5 6-5s5.4 1.7 6 5"/><path d="M14.5 18c.5-2.4 2.2-3.6 4-3.6 1.6 0 2.7.6 3.3 1.6"/></svg>
  ),
  demands: (
    <svg viewBox="0 0 24 24"><path d="M7 3h8l4 4v14a1 1 0 01-1 1H7a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg>
  ),
  events: (
    <svg viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4"/><circle cx="8" cy="14" r="1" fill="currentColor"/><circle cx="12" cy="14" r="1" fill="currentColor"/></svg>
  ),
  contact: (
    <svg viewBox="0 0 24 24"><path d="M4 6.5l8 5.5 8-5.5"/><rect x="3" y="5" width="18" height="14" rx="2"/></svg>
  ),
};

function BottomNav({ active, setActive, t }) {
  const items = [
    { id: 'home', label: t('navHome') },
    { id: 'team', label: t('navTeam') },
    { id: 'demands', label: t('navDemands') },
    { id: 'events', label: t('navEvents') },
    { id: 'contact', label: t('navContact') },
  ];
  return (
    <div className="bottom-nav-wrap">
      <nav className="bottom-nav" role="tablist">
        {items.map(item => (
          <button
            key={item.id}
            className={`nav-item ${active === item.id ? 'active' : ''}`}
            onClick={() => setActive(item.id)}
            role="tab"
            aria-selected={active === item.id}
          >
            {NavIcons[item.id]}
            <span className="label">{item.label}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

// Footer note
function FooterNote({ t }) {
  return (
    <footer style={{
      marginTop: 72,
      paddingTop: 28,
      borderTop: '1px solid var(--line)',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: 24,
      flexWrap: 'wrap',
      color: 'var(--ink-mute)',
      fontSize: 12.5,
    }}>
      <div style={{ maxWidth: 540, lineHeight: 1.55 }}>
        {t('footerNote')}
      </div>
      <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
        <img src="assets/schuelerunion-logo.png" alt="Schülerunion" style={{ height: 28, opacity: 0.85 }} />
        <span style={{ letterSpacing: '0.16em', textTransform: 'uppercase', fontSize: 10.5 }}>© 2026 Astronia</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  useT, TopBar, BottomNav, FooterNote, NavIcons,
});