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

function smoothTo(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.offsetTop - 76, behavior: "smooth" });
}

function LpNav({ onBook }) {
  const [scrolled, setScrolled] = useNavState(false);
  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"mk-nav" + (scrolled ? " mk-nav--scrolled" : "")}>
      <div className="mk-nav__inner">
        <a className="mk-nav__brand" href="#"
           onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <img src="assets/MO-logo.png" alt="Scale My Offer" />
        </a>
        <button className="smo-btn smo-btn--primary mk-nav__cta" onClick={onBook}>Book a call</button>
      </div>
    </header>
  );
}

Object.assign(window, { LpNav, smoothTo });