window.Kit.Nav = function Nav({ route, theme, setTheme }) {
  const { Button, IconButton, Tooltip } = window.DS;
  const { Icon, Brand } = window.Kit;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  const links = [['services', 'Services'], ['pricing', 'Pricing'], ['audit', 'Free audit']];
  return (
    <header className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="container nav__inner">
        <a className="wordmark" href="#/" aria-label="L3V3L"><Brand /></a>
        <nav className="nav__links" aria-label="Primary">
          {links.map(([r, l]) => <a key={r} href={'#/' + r} className="nav__link" aria-current={route === r ? 'page' : undefined}>{l}</a>)}
        </nav>
        <div className="row" style={{ gap: 8 }}>
          <Tooltip content={theme === 'dark' ? 'Light theme' : 'Dark theme'} shortcut="T" placement="bottom">
            <IconButton label="Toggle theme" variant="ghost" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
              <Icon name={theme === 'dark' ? 'Sun' : 'Moon'} size={18} />
            </IconButton>
          </Tooltip>
          <Button variant="inverse" size="sm" href="#/audit">Start a project</Button>
        </div>
      </div>
    </header>
  );
};