/* Top nav */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="top" style={{ background: scrolled ? 'rgba(10,14,26,0.78)' : 'rgba(10,14,26,0.4)' }}>
      <div className="container inner">
        <a href="#top" className="logo">
          <span className="logo-mark"><LogoMark size={32} /></span>
          <span>Hub2</span>
        </a>
        <ul className="nav-links">
          <li><a href="#features">機能</a></li>
          <li><a href="#platforms">対応モール</a></li>
          <li><a href="#dashboard">ダッシュボード</a></li>
          <li><a href="#pricing">料金</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="badge-pill" style={{ display: 'inline-flex' }}>
            <span className="dot" />
            CLOSED β
          </span>
          <a href="#cta-final" className="btn btn-gold" style={{ padding: '10px 18px', fontSize: 13 }}>
            登録する
            <Glyph.Arrow width="14" height="14" />
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;