// ============================================================
// Sticky top nav
// ============================================================

const Nav = ({ onJoin }) => {
  const { t } = useI18n();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 32);
    window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);

  return (
    <nav className="site-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(10,10,11,.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(160%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      padding: '18px 48px', display: 'flex', alignItems: 'center', gap: 32,
      transition: 'background 200ms var(--ease-out), border-color 200ms var(--ease-out)',
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
        <img src="assets3/logo-gold.png" style={{ height: 26 }} alt="Beymann" />
      </a>
      <div className="nav-flex-spacer" style={{ flex: 1 }} />
      <div className="nav-prelaunch" style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '.12em',
        textTransform: 'uppercase', marginRight: 8,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999, background: 'var(--gold-400)',
          boxShadow: '0 0 12px rgba(196,172,120,.7)',
        }} />
        {t('nav.preLaunch')}
      </div>
      <LangSwitcher />
      <Btn onClick={onJoin}>
        <span className="nav-cta-full">{t('nav.joinWaitlist')}</span>
        <span className="nav-cta-short">{t('nav.join')}</span>
      </Btn>
    </nav>
  );
};

Object.assign(window, { Nav });