window.addEventListener("load", function () {
  const MOBILE_BREAKPOINT = 992;
  const isMobile = () => window.innerWidth < MOBILE_BREAKPOINT;

  const navBg = document.querySelector(".navbar_bg-blur");
  const allNavLinks = document.querySelectorAll(".nav_links");
  const dropdownToggles = document.querySelectorAll(".w-dropdown");
  const pill = document.querySelector(".nav-pill");
  const navContainer = document.querySelector(".nav-menu-inner");

  if (!navBg) return;

  gsap.set(navBg, { display: "none", opacity: 0 });
  if (pill) gsap.set(pill, { display: "none", opacity: 0 });

  let pillVisible = false;

  function hasNoBlur(el) {
    return el.classList.contains("no_bg-blurr") || !!el.closest(".no_bg-blurr");
  }

  function showOverlay() {
    gsap.killTweensOf(navBg);
    gsap.set(navBg, { display: "block" });
    gsap.to(navBg, { opacity: 1, duration: 0.15, ease: "power2.out" });
  }

  function hideOverlay() {
    gsap.killTweensOf(navBg);
    gsap.to(navBg, {
      opacity: 0, duration: 0.15, ease: "power2.in",
      onComplete: () => gsap.set(navBg, { display: "none" })
    });
  }

  function updateTextColors(activeEl) {
    allNavLinks.forEach(el => {
      el.style.setProperty("color", "#f6f3ec", "important");
      el.querySelectorAll("*").forEach(child => child.style.setProperty("color", "#f6f3ec", "important"));
    });
    activeEl.style.setProperty("color", "#171717", "important");
    activeEl.querySelectorAll("*").forEach(child => child.style.setProperty("color", "#171717", "important"));
  }

  function resetAll() {
    allNavLinks.forEach(el => {
      el.style.setProperty("color", "#f6f3ec", "important");
      el.querySelectorAll("*").forEach(child => child.style.setProperty("color", "#f6f3ec", "important"));
    });
    hideOverlay();
    if (!pill) return;
    pillVisible = false;
    gsap.killTweensOf(pill);
    gsap.to(pill, {
      opacity: 0, duration: 0.15, ease: "power2.in",
      onComplete: () => gsap.set(pill, { display: "none" })
    });
  }

  function movePillTo(targetEl) {
    if (!pill) return;
    const parentRect = pill.parentElement.getBoundingClientRect();
    const targetRect = targetEl.getBoundingClientRect();
    const props = {
      left: targetRect.left - parentRect.left,
      top: targetRect.top - parentRect.top,
      width: targetRect.width,
      height: targetRect.height,
    };
    if (!pillVisible) {
      gsap.killTweensOf(pill);
      gsap.set(pill, { display: "block", ...props, opacity: 0 });
      gsap.to(pill, { opacity: 1, duration: 0.15, ease: "power2.out" });
      pillVisible = true;
    } else {
      gsap.killTweensOf(pill);
      gsap.to(pill, { ...props, duration: 0.22, ease: "power3.out" });
    }
  }

  function handleEnter(navLinkEl, dropdown) {
    if (isMobile()) return;
    movePillTo(navLinkEl);
    updateTextColors(navLinkEl);
    if (hasNoBlur(dropdown) || hasNoBlur(navLinkEl)) {
      hideOverlay();
    } else {
      showOverlay();
    }
  }

  dropdownToggles.forEach(function (dropdown) {
    const thisNavLink = dropdown.querySelector(".nav_links");
    if (!thisNavLink) return;
    dropdown.addEventListener("mouseenter", () => handleEnter(thisNavLink, dropdown));
  });

  if (navContainer) {
    navContainer.addEventListener("mouseleave", function () {
      if (isMobile()) return;
      resetAll();
    });
  }
});