document.addEventListener("DOMContentLoaded", function () {
  const nav = document.querySelector(".w-nav");
  const menu = document.querySelector(".desktop-menu");
  const searchAcc = document.querySelector(".search-accessibility");
  const dockedWrapper = document.querySelector(".desktop-menu-wrapper");
  const flippedWrapper = document.querySelector(".header-search-wrapper");
  if (!nav) return;

  let isCollapsed = false;

  function expandNav(immediate = false) {
    gsap.killTweensOf(nav);
    gsap.killTweensOf(".search-accessibility");

    let state = Flip.getState(".desktop-menu");

    gsap.to(searchAcc, { width: "auto", duration: 0.2, ease: "power1.out" });
    gsap.to(searchAcc, { opacity: 1, duration: 0.2 }, ">");

    gsap.to(
      ".docked-nav",
      {
        height: 60,
        ease: "poser1.out",
        duration: 0.2,
      },
      "<"
    );
    dockedWrapper.appendChild(menu);
    Flip.from(state, {
      duration: 0.2,
      ease: "power1.out",
      absolute: true,
    });
  }

  function collapseNav(immediate = false) {
    gsap.killTweensOf(nav);
    gsap.killTweensOf(".search-accessibility");

    let state = Flip.getState(".desktop-menu");

    gsap.to(searchAcc, { opacity: 0, duration: 0.2 });
    gsap.to(
      searchAcc,
      {
        width: 0,
        duration: 0.2,
        ease: "power1.out",
      },
      ">"
    );

    gsap.to(
      ".docked-nav",
      {
        height: 0,
        ease: "poser1.out",
        duration: 0.2,
      },
      "<"
    );
    searchAcc.before(menu);
    Flip.from(
      state,
      {
        duration: 0.2,
        ease: "power1.out",
        absolute: true,
      },
      ">"
    );
  }

  ScrollTrigger.matchMedia({
    // Desktop only
    "(min-width: 992px)": function () {
      // Hover listeners
      nav.addEventListener("mouseenter", () => {
        //expandNav();
      });

      nav.addEventListener("mouseleave", () => {
        if (isCollapsed) {
          //collapseNav();
        } else {
          //expandNav();
        }
      });

      // Scroll behavior
      const st = ScrollTrigger.create({
        trigger: ".page-wrapper",
        start: "top+=100 top",
        markers: false,
        pingSpacing: false,
        onEnter: () => {
          isCollapsed = true;
          collapseNav();
        },
        onLeaveBack: () => {
          isCollapsed = false;
          expandNav();
        },
      });

      if (st.progress > 0) {
        isCollapsed = true;
        collapseNav(true); // snap immediately
      } else {
        isCollapsed = false;
        expandNav(true);
      }
    },

    // For <992px (tablet & mobile), reset nav
    "(max-width: 991px)": function () {
      gsap.set(nav, { clearProps: "all" }); // remove GSAP inline transforms
    },
  });
});