/* global React */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <div className="mark">A</div>
          <div>
            <div className="name-jp">AIS塾</div>
            <div className="name-en">All Inclusive Salon</div>
          </div>
        </a>
        <div className="nav-links">
          <a href="#problem">悩み</a>
          <a href="#about">AIS塾とは</a>
          <a href="#curriculum">カリキュラム</a>
          <a href="#results">実績</a>
          <a href="#instructor">講師</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="https://www.youtube.com/watch?v=ix1-JqAXvCE" target="_blank" rel="noopener" className="cta">無料説明を見る</a>
        <button className="menu-btn" aria-label="menu"><span></span></button>
      </div>
    </nav>
  );
}
window.Nav = Nav;