const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const close = () => setMenuOpen(false);
  return (
    <nav className={'nav ' + (scrolled ? 'nav-scrolled' : '')}>
      <div className="nav-inner">
        <a href="#" className="nav-brand" aria-label="Growth DNA AI">
          <img src="/assets/growth-dna-ai-logo.svg" alt="Growth DNA AI" height="32"/>
        </a>
        <div className="nav-links">
          <a href="#product">Product</a>
          <a href="#oversight">Oversight</a>
          <a href="#pricing">Pricing</a>
          <a href="#team">Humans</a>
        </div>
        <div className="nav-cta">
          <a href="https://app.growth-dna.ai" className="btn-quiet nav-signin">Sign in</a>
          <a href="https://app.growth-dna.ai/signup" className="btn-pulse">Start now <span>→</span></a>
          <button
            className={'nav-burger' + (menuOpen ? ' open' : '')}
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
          >
            <span/><span/><span/>
          </button>
        </div>
      </div>
      <div className={'nav-mobile-menu' + (menuOpen ? ' open' : '')}>
        <a href="#product" onClick={close}>Product</a>
        <a href="#oversight" onClick={close}>Oversight</a>
        <a href="#pricing" onClick={close}>Pricing</a>
        <a href="#team" onClick={close}>Humans</a>
        <a href="https://app.growth-dna.ai" className="btn-ghost" style={{marginTop:'12px',alignSelf:'flex-start'}}>Sign in</a>
      </div>
    </nav>
  );
}

window.Nav = Nav;