// Bricklet — Navbar
function Navbar({ onSignIn, onCTA }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a className="brand" href="#top" aria-label="Brikéalo — inicio">
          <img src="assets/bricklet-mark.svg" width="30" height="30" alt="" />
          <img src="assets/bricklet-wordmark.svg" height="22" alt="Brikéalo" />
        </a>
        <div className="nav-links">
          <a href="#how" className="nav-link-only">Cómo funciona</a>
          <a href="#showcase" className="nav-link-only">Ejemplos</a>
          <a href="#pricing" className="nav-link-only">Precios</a>
          <a href="#faq" className="nav-link-only">FAQ</a>
          <div className="nav-cluster">
            <button className="btn btn-ghost" onClick={onSignIn}>Iniciar sesión</button>
            <button className="btn btn-primary" onClick={onCTA}>
              Abrir la app
              <IconArrow size={16}/>
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}
window.Navbar = Navbar;