function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    { href: '#newbaseline',  label: 'Результат' },
    { href: '#how-works',    label: 'Как работает' },
    { href: '#coach',        label: 'AI' },
    { href: '#features',     label: 'Ещё' },
    { href: '#specialists',  label: 'Нутрициолог' },
    { href: '#pricing',      label: 'Тарифы' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      padding: '14px 0',
      background: scrolled ? 'rgba(10,7,22,0.65)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--line)' : 'transparent'}`,
      transition: 'all .3s ease',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#" style={{ textDecoration: 'none' }}><Wordmark size={24}/></a>
        <nav className="navlinks" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {items.map(i => (
            <a key={i.href} href={i.href} style={{
              padding: '8px 14px', borderRadius: 999,
              color: 'var(--ink-2)', textDecoration: 'none',
              fontSize: 14, fontWeight: 500,
              transition: 'background .15s, color .15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.color = 'var(--ink)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-2)'; }}>
              {i.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="#cta" className="btn" style={{ height: 44, minHeight: 44, padding: '0 16px', fontSize: 13 }}>
            Предзапись <Arrow size={12}/>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){ .navlinks{ display: none !important; } }
      `}</style>
    </header>
  );
}
window.Nav = Nav;