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

function Header() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`fw-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="fw-container fw-header__inner">
        <a href="#top" className="fw-header__logo" aria-label="FrisseWand home">
          <img src="assets/logo-frissewand.svg" alt="FrisseWand" />
        </a>
        <nav className="fw-header__nav" aria-label="Hoofdnavigatie">
          <a href="#abonnementen">Pakketten</a>
          <a href="#werkwijze">Werkwijze</a>
          <a href="#collectie">Collectie</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
        </nav>
        <a href="#contact" className="fw-btn fw-btn--primary fw-header__cta">Vraag offerte aan</a>
      </div>
    </header>
  );
}

window.Header = Header;