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

window.Nav = function Nav({ onCta }) {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState("services");
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["services", "Services"],
    ["case-studies", "Case Studies"],
    ["insights", "Insights"],
    ["about", "About"],
  ];
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="nav-brand">
          <img src="../assets/mimren-lockup-horizontal.png" alt="Mimren" />
        </a>
        <div className="nav-links">
          {links.map(([id, label]) => (
            <a
              key={id}
              href={`#${id}`}
              className={active === id ? "active" : ""}
              onClick={() => setActive(id)}
            >
              {label}
            </a>
          ))}
        </div>
        <Button onClick={onCta}>Book a briefing</Button>
      </div>
    </nav>
  );
};