function Nav({ route, go }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const items = [['how', 'How it works'], ['plans', 'Plans'], ['business', 'For business'], ['about', 'About'], ['faq', 'FAQs'], ['contact', 'Contact']];
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { setOpen(false); }, [route]);
  React.useEffect(() => {
    if (!open) return;
    const onKey = e => { if (e.key === 'Escape') setOpen(false); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [open]);
  return <>
  <header className={'nv' + (scrolled || open ? ' is-scrolled' : '')}>
    <div className="s-wrap nv-in">
      <a className="nv-logo" {...routeLink(go, 'home')} aria-label="Aqualoop home"><img src="assets/logo-wordmark.png" alt="Aqualoop" /></a>
      <nav className="nv-links" aria-label="Main">{items.map(([id, label]) => <a key={id} {...routeLink(go, id)} className={'nv-link' + (route === id ? ' on' : '')} aria-current={route === id ? 'page' : undefined}>{label}</a>)}</nav>
      <div className="nv-right" style={{ marginLeft: 'auto' }}>
        <Cta size="sm" icon="plus" {...routeLink(go, 'plans')}>Order now</Cta>
        <button className="s-icon-btn s-icon-btn--md nv-burger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} onClick={() => setOpen(o => !o)}><Icon name={open ? 'x' : 'menu'} size={20} /></button>
      </div>
    </div>
  </header>
  {open && <nav className="nv-sheet" aria-label="Menu">
    {[['home', 'Home'], ...items].map(([id, label]) => <a key={id} {...routeLink(go, id)} className={route === id ? 'on' : ''}>{label}</a>)}
    <div style={{ marginTop: 24 }}><Cta full icon="plus" {...routeLink(go, 'plans')}>Order now</Cta></div>
  </nav>}
  </>;
}
Object.assign(window, { Nav });