function Nav({ onWhatsApp }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", h);
    return () => window.removeEventListener("scroll", h);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#" className="logo">
          <span className="logo-dot"></span>
          hey <em style={{fontStyle:"italic", marginLeft:2}}>bots</em>
        </a>
        <div className="nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#proceso">Proceso</a>
          <a href="#casos">Escenarios</a>
          <a href="#faq">FAQ</a>
        </div>
        <button className="btn btn-secondary" onClick={onWhatsApp} style={{padding:"10px 18px", fontSize:"0.88rem"}}>
          <IconWhatsApp size={14} /> Escribinos
        </button>
      </div>
    </nav>
  );
}
Object.assign(window, { Nav });