function Nav(){
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="wrap nav-inner">
        <Logo/>
        <nav className="nav-links only-md" aria-label="primary">
          <a href="#process">Как это работает</a>
          <a href="#results">Результаты</a>
          <a href="#pricing">Тарифы</a>
          <a href="#founder">О нас</a>
          <a href="#faq">Вопросы</a>
        </nav>
        <div className="nav-cta">
          <a className="phone hide-md" href="tel:+78001000000" aria-label="Позвонить">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 4.2c0 6 5 11 11 11 .6 0 1-.4 1-1v-1.7a1 1 0 0 0-.8-1l-2.4-.5a1 1 0 0 0-1 .4l-.8 1.1A8.6 8.6 0 0 1 4 7l1-.8a1 1 0 0 0 .4-1l-.5-2.4a1 1 0 0 0-1-.8H2.1c-.6 0-1 .4-1 1Z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#cta" className="btn primary only-md">Получить аудит <Arrow/></a>
          <button className="burger hide-md" onClick={() => setOpen(o => !o)} aria-label="меню">
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {open && (
        <div className="m-menu hide-md">
          <a href="#process" onClick={() => setOpen(false)}>Как это работает</a>
          <a href="#results" onClick={() => setOpen(false)}>Результаты</a>
          <a href="#pricing" onClick={() => setOpen(false)}>Тарифы</a>
          <a href="#founder" onClick={() => setOpen(false)}>О нас</a>
          <a href="#faq" onClick={() => setOpen(false)}>Вопросы</a>
          <a href="#cta" className="btn primary" onClick={() => setOpen(false)}>Получить аудит <Arrow/></a>
        </div>
      )}
      <style>{`
        .nav{position:sticky;top:0;z-index:50;
          background:color-mix(in oklab, var(--bg) 70%, transparent);
          -webkit-backdrop-filter:blur(12px) saturate(160%);
          backdrop-filter:blur(12px) saturate(160%);
          border-bottom:1px solid transparent;
          transition:border-color .2s ease, background .2s ease;
        }
        .nav.is-scrolled{border-bottom-color:var(--line)}
        .nav-inner{display:flex;align-items:center;justify-content:space-between;
          height:64px;}
        .nav-links{display:flex;gap:28px;font-size:14px;color:var(--fg-2)}
        .nav-links a{transition:color .15s ease}
        .nav-links a:hover{color:var(--fg)}
        .nav-cta{display:flex;align-items:center;gap:12px}
        .phone{display:inline-grid;place-items:center;width:38px;height:38px;
          border-radius:50%;border:1px solid var(--line-2);color:var(--fg-2)}
        .burger{
          width:38px;height:38px;border-radius:10px;background:transparent;
          border:1px solid var(--line-2);display:grid;gap:4px;padding:11px 9px;cursor:pointer;
        }
        .burger span{display:block;height:1.5px;background:var(--fg);border-radius:2px}
        @media (min-width:880px){.burger.hide-md{display:none}.phone.hide-md{display:none}}
        .m-menu{display:flex;flex-direction:column;gap:14px;padding:18px 24px 28px;border-top:1px solid var(--line)}
        .m-menu a{font-size:18px;color:var(--fg)}
        .m-menu .btn{align-self:flex-start;margin-top:6px}
      `}</style>
    </header>
  );
}

window.Nav = Nav;