/* global React */
const { useState, useEffect } = React;

function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`rn-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <a className="rn-nav__brand" href="#top">
        <img src="assets/logo-transparent.png" alt="" />
        <span>Rogue North</span>
      </a>
      <nav className="rn-nav__links">
        <a href="#work">Work</a>
        <a href="#contact">Contact</a>
      </nav>
      <button className="rn-btn rn-btn--primary rn-nav__cta" onClick={onBook}>
        Book a Call
      </button>
    </header>
  );
}
window.Nav = Nav;