function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const isTR = window.__locale === 'tr';
  const legalSuffix = isTR ? '-tr.html' : '.html';
  const otherLocaleHref = isTR ? '/' : '/tr/';
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container inner">
        <div className="brand" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="/assets/icons/atlas-mark-black-60.png" alt="Atlas" style={{ width: 30, height: 30 }} />
          ATLAS
          <span className="dim" style={{ letterSpacing: '0.15em', fontSize: 11 }}>/ IST</span>
        </div>
        <div className="nav-links" style={{ display: window.innerWidth < 780 ? 'none' : 'flex' }}>
          <a href="#kesif">{t('Keşif', 'Discover')}</a>
          <a href="#pasaport">{t('Atlas', 'Atlas')}</a>
          <a href="#ilceler">{t('İlçeler', 'Districts')}</a>
          <a href="#sss">{t('SSS', 'FAQ')}</a>
          <a href={`/privacy-policy${legalSuffix}`}>{t('Gizlilik', 'Privacy')}</a>
          <a href={`/terms${legalSuffix}`}>{t('Şartlar', 'Terms')}</a>
          <a href={`/support${legalSuffix}`}>{t('Destek', 'Support')}</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href={otherLocaleHref} className="lang-toggle" onClick={() => { try { sessionStorage.setItem('atlas-lang-chosen', isTR ? 'en' : 'tr'); } catch (e) {} }} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--text-mute)', textDecoration: 'none', padding: '6px 10px', border: '1px solid var(--stroke)', borderRadius: 3 }}>
            {isTR ? 'EN' : 'TR'}
          </a>
          <a className="btn btn-primary" href="https://apps.apple.com/tr/app/atlas-şehirleri-keşfet/id6760196976?l=tr" target="_blank" rel="noopener" style={{ padding: '10px 18px', fontSize: 13 }}>
            {t('İndir', 'Download')} <IconArrow size={12} />
          </a>
        </div>
      </div>
    </nav>
  );
}
Object.assign(window, { Nav });
