// Navbar — floating pill, gradient logo ring, nav links, "Say hi" button.
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Navbar({ active, onNav, email, initials }) {
  const [scrolled, setScrolled] = useStateNav(false);
  const [hidden, setHidden] = useStateNav(false);
  const links = ["Home", "Work", "About"];

  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 100 || (document.body && document.body.scrollTop > 100));
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    document.body.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      document.body.removeEventListener("scroll", onScroll);
    };
  }, []);

  // Hide the nav once the full-screen footer dominates the viewport. An
  // IntersectionObserver works no matter which element is the scroll container.
  useEffectNav(() => {
    let io;
    const attach = () => {
      const footer = document.getElementById("Contact");
      if (!footer) { requestAnimationFrame(attach); return; }
      io = new IntersectionObserver(
        (entries) => {
          const e = entries[0];
          setHidden(e.isIntersecting && e.intersectionRatio >= 0.6);
        },
        { threshold: [0, 0.3, 0.5, 0.6, 0.8, 1] }
      );
      io.observe(footer);
    };
    attach();
    return () => io && io.disconnect();
  }, []);

  return (
    <nav
      className={
        "fixed top-0 left-0 right-0 z-50 flex justify-center pt-4 md:pt-6 px-4 transition-all duration-500 " +
        (hidden ? "-translate-y-24 opacity-0 pointer-events-none" : "translate-y-0 opacity-100")
      }
    >
      <div className="nav-glass inline-flex items-center rounded-full px-2 py-2">

        {/* Nav links */}
        <div className="flex items-center">
          {links.map((l) => {
            const isActive = active === l;
            return (
              <button
                key={l}
                onClick={() => onNav(l)}
                className={
                "text-xs sm:text-sm rounded-full px-3 sm:px-4 py-1.5 sm:py-2 transition-colors duration-200 " + (
                isActive ?
                "text-text-primary bg-white/10" :
                "text-muted hover:text-text-primary hover:bg-white/10")
                } style={{ fontFamily: "Poppins" }}>
                
                {l}
              </button>);

          })}
        </div>

        {/* Nav links end */}
      </div>
    </nav>);

}

Object.assign(window, { Navbar });