{
  /** Section Selector   */
const createObserver = (section, cb) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
        cb(entry.target);
      }
    });
  }, {
    threshold: 0.2 // This means the callback will fire when at least 10% is visible
  });
  observer.observe(section);
};

  addEventListener("GSAPReady", (event) => {
    const { lenis } = event.detail;

    const wrapper = document.querySelector("[data-animate='sectionselector']");
    const items = [...wrapper.children];
    const highlight = wrapper.querySelector("[data-selector='highlight']");
    let currentIndex = 0;

    const sections = [...document.querySelectorAll("section")];

    // Navigation height'ini hesapla (logo height'i ve üst/alt boşluklar için)
    const navWrapper = document.querySelector("[data-module='nav']");
    const navElement = navWrapper?.querySelector(".nav");
    const logoElement = navWrapper?.querySelector(".logo-banner-w");
    const getNavHeight = () => {
      if (navWrapper && navElement) {
        // Navigation element'inin toplam height'ini al (padding dahil)
        const navHeight = navElement.offsetHeight;
        
        // Logo element'inin üstündeki boşluğu hesapla
        if (logoElement) {
          const logoRect = logoElement.getBoundingClientRect();
          const navRect = navElement.getBoundingClientRect();
          const topSpace = logoRect.top - navRect.top;
          
          // Logo height'i + üstündeki boşluk + altındaki boşluk
          return navHeight + topSpace;
        }
        
        return navHeight;
      }
      return 0;
    };

    sections.forEach((section, index) => {
      createObserver(section, () => {
        items[currentIndex].classList.remove("current");
        currentIndex = index;
        items[currentIndex].classList.add("current");
        moveHighlightTo(index);
      });
    });

let flipAnimation = null
    const moveHighlightTo = (index) => {
      const state = Flip.getState(highlight);
      items[index].appendChild(highlight);

	if (flipAnimation) flipAnimation.kill()
	flipAnimation = Flip.from(state, {
        duration: 0.5,
        ease: "expo.out",
      });
    };

    items.forEach((item, index) => {
      item.addEventListener("click", () => {
        const targetSection = document.getElementById(items[index].dataset.to);
        if (targetSection) {
          const navHeight = getNavHeight();
          lenis.scrollTo(targetSection, {
            offset: -navHeight
          });
        } else {
          lenis.scrollTo("#" + items[index].dataset.to);
        }
      });

      item.addEventListener("mouseenter", () => {
        moveHighlightTo(index);
      });

      item.addEventListener("mouseleave", () => {
        moveHighlightTo(currentIndex);
      });
    });
  });
}