/* global React, CAL_LINK */
const { useEffect: useEffectNav, useState: useStateNav } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="brand" aria-label="FutureReady AI home">
          <img src="futurereadyailogo.png" alt="FutureReady AI" style={{ height: '72px', objectFit: 'contain' }} />
        </a>
        <a href={CAL_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
          Book a Call <Arrow />
        </a>
      </div>
    </nav>
  );
}

window.Nav = Nav;