// Top navigation
const Nav = ({ route, setRoute, lang, setLang, accent }) => {
  const [scrolled, setScrolled] = React.useState(false);

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

  const go = (r) => (e) => {
    e.preventDefault();
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  };

  const t = lang === 'zh'
    ? { pricing: '價格', privacy: '隱私權', signin: '登入', download: '下載' }
    : lang === 'ja'
    ? { pricing: '料金', privacy: 'プライバシーポリシー', signin: 'ログイン', download: 'ダウンロード' }
    : { pricing: 'Pricing', privacy: 'Privacy', signin: 'Sign in', download: 'Download' };

  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#/" onClick={go('/')} className="logo" aria-label="Parleur home">
          <span className="logo-mark">P</span>
          <span>Parleur</span>
        </a>
        <div className="nav-links">
          <a href="#/pricing" onClick={go('/pricing')} className={route === '/pricing' ? 'active' : ''}>{t.pricing}</a>
          <a href="#/privacy" onClick={go('/privacy')} className={route === '/privacy' ? 'active' : ''}>{t.privacy}</a>
          <a href="#" className="nav-mobile-hidden">{t.signin} ↗</a>
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
            <button className={lang === 'zh' ? 'on' : ''} onClick={() => setLang('zh')}>繁中</button>
            <button className={lang === 'ja' ? 'on' : ''} onClick={() => setLang('ja')}>日本語</button>
          </div>
          <a href={DOWNLOAD_URL} className="btn btn-primary"><Icon.Download size={14}/>{t.download}</a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;