/* global Header */
function Header({ scrolled }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const close = () => setMenuOpen(false);

  return (
    <>
      <header className={`site-header ${scrolled ? 'scrolled' : ''}`}>
        <button
          className={`burger${menuOpen ? ' open' : ''}`}
          onClick={() => setMenuOpen(o => !o)}
          aria-label="Menu"
        >
          <span></span><span></span><span></span>
        </button>
        <a href="index.html" className="brand" aria-label="One For All">
          <img src="assets/logo-parent.png" alt="One For All" />
        </a>
        <nav>
          <a href="index.html" className="active">Home</a>
          <a href="films.html">Films</a>
          <a href="solutions.html">Solutions</a>
          <a href="about.html">About</a>
          <a href="work.html">Work</a>
        </nav>
        <div className="header-cta">
          <a href="contact.html" className="cta-pill">Book a call <span className="arr"></span></a>
        </div>
      </header>

      <div className={`mobile-nav-drawer${menuOpen ? ' open' : ''}`}>
        <a href="index.html" className="active" onClick={close}>Home</a>
        <a href="films.html" onClick={close}>Films</a>
        <a href="solutions.html" onClick={close}>Solutions</a>
        <a href="about.html" onClick={close}>About</a>
        <a href="work.html" onClick={close}>Work</a>
      </div>
    </>
  );
}
window.Header = Header;