// Sticky top nav
const Nav = ({ onBookDemo, theme }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav__inner">
        <a href="#" className="nav__logo" aria-label="Stoodio.ai">
          <img src="/logo.png" alt="Stoodio.ai" className="nav__logo-img nav__logo-img--dark" />
          <img src="/logo-white.png" alt="" aria-hidden="true" className="nav__logo-img nav__logo-img--light" />
        </a>
        <div className="nav__cta">
          <a href="https://app.stoodio.ai/login" className="btn btn--white btn--sm">Log in</a>
          <button className="btn btn--primary btn--sm" onClick={()=>window.location.href='https://www.stoodio.ai/contact'}>Book Demo</button>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;