function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["Як працює", "#how"],
    ["Можливості", "#features"],
    ["Гра", "#gami"],
    ["Спробувати", "#quiz"],
    ["Військові", "#military"],
    ["FAQ", "#faq"],
  ];
  return (
    <React.Fragment>
      <div className={"nav " + (scrolled ? "scrolled" : "")}>
        <div className="container nav-row">
          <a href="#top" className="brand">
            <span className="mark">Н</span>
            <span>НМТ<span style={{ color: "var(--o-500)" }}>+</span></span>
          </a>
          <nav className="nav-links">
            {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
          </nav>
          <a href="#download" className="btn btn-primary" style={{ padding: "12px 18px", fontSize: 14 }}>
            Завантажити
            <Icon name="arrow" size={16}/>
          </a>
          <button className="menu-btn" onClick={() => setOpen(!open)} aria-label="Menu">
            <Icon name={open ? "x" : "menu"} size={20}/>
          </button>
        </div>
      </div>
      <div className={"mobile-menu " + (open ? "open" : "")} onClick={() => setOpen(false)}>
        {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        <a href="#download" className="btn btn-orange" style={{ marginTop: 16, justifyContent: "center" }}>Завантажити безкоштовно</a>
      </div>
    </React.Fragment>
  );
}
window.Navbar = Navbar;