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

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="logo">
        <span className="mark" aria-hidden="true">
          <svg viewBox="0 0 28 28" width="28" height="28">
            <circle cx="14" cy="14" r="13" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
            <circle cx="14" cy="14" r="5" fill="var(--shu)"/>
          </svg>
        </span>
        <span className="logo-ja">チムワークス</span>
        <span className="logo-sep">|</span>
        <span className="logo-en">CHIMWORKS</span>
      </a>
      <ul className="nav-links">
        <li><a href="#services">サービス</a></li>
        <li><a href="#products">プロダクト</a></li>
        <li><a href="#cases">実績</a></li>
        <li><a href="#process">プロセス</a></li>
        <li><a href="#about">会社</a></li>
        <li><a href="#careers">採用</a></li>
        <li><a href="#news">ニュース</a></li>
      </ul>
      <a href="#contact" className="nav-cta">
        <span className="dot" />
        お問い合わせ
      </a>
    </nav>
  );
}

Object.assign(window, { Nav });