function Nav({ active, onNavigate }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const links = [
    { id: "about",   label: "教室について" },
    { id: "classes", label: "講座" },
    { id: "shop",    label: "物販" },
    { id: "teacher", label: "講師紹介" },
    { id: "contact", label: "お問い合わせ" },
  ];

  function handleNav(id) {
    setMenuOpen(false);
    onNavigate(id);
  }

  return (
    <nav className="site-nav">
      <a className="brand" href="#top" onClick={(e) => { e.preventDefault(); handleNav("top"); }}>
        <LogoMark size={40}/>
        <div className="brand-text">
          筆処 和灯
          <small>fudedokoro&nbsp;&nbsp;watou</small>
        </div>
      </a>

      <div className={"nav-links" + (menuOpen ? " is-open" : "")}>
        {links.map(l => (
          <a
            key={l.id}
            href={"#" + l.id}
            className={"nav-link" + (active === l.id ? " is-active" : "")}
            onClick={(e) => { e.preventDefault(); handleNav(l.id); }}
          >
            {l.label}
          </a>
        ))}
        <button className="btn btn-primary btn-sm nav-cta-mobile" onClick={() => handleNav("contact")}>
          体験を予約 <span aria-hidden="true">→</span>
        </button>
      </div>

      <button className="btn btn-primary btn-sm nav-cta-desktop" onClick={() => handleNav("contact")}>
        体験を予約 <span aria-hidden="true">→</span>
      </button>

      <button
        className={"nav-hamburger" + (menuOpen ? " is-open" : "")}
        aria-label="メニューを開く"
        onClick={() => setMenuOpen(o => !o)}
      >
        <span/><span/><span/>
      </button>
    </nav>
  );
}

Object.assign(window, { Nav });