const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on(); window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="#top" className="logo">
          Анна <em>Ковалёва</em><span className="dot"/>
        </a>
        <div className="nav-links">
          <a href="#about">обо мне</a>
          <a href="#services">услуги</a>
          <a href="#gallery">работы</a>
          <a href="#reviews">отзывы</a>
          <a href="#faq">вопросы</a>
          <a href="#contacts">контакты</a>
        </div>
        <div className="nav-cta">
          <a href="#booking" className="btn btn-ink btn-sm">
            Записаться <Icon name="arrowUpRight" size={14}/>
          </a>
        </div>
      </div>
    </nav>
  );
};
Object.assign(window, { Nav });