// ciclo. — site header
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`site-header${scrolled ? ' scrolled' : ''}`}>
      <a href="#top" className="brand" aria-label="ciclo. home">
        <span className="word">ciclo<span className="p">.</span></span>
        <span className="pill" aria-label="próxima entrega no domingo">
          <span className="pulse"/>próx · domingo 12.05
        </span>
      </a>
      <nav className="nav" aria-label="primary">
        <a href="#como">como funciona</a>
        <a href="#kit">o kit</a>
        <a href="#planos">planos</a>
        <a href="#faq">dúvidas</a>
      </nav>
      <div className="cta-row">
        <a href="#login" className="btn btn-ghost">entrar</a>
        <a href="#quiz" className="btn btn-primary">
          começar o quiz
          <span className="arr"><Icon name="arrow-up-right" size={12}/></span>
        </a>
      </div>
    </header>
  );
};
window.Header = Header;