<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".scroll-2_component").forEach((component) => {
		if (component.hasAttribute("data-scroll-2")) return;
		component.setAttribute("data-scroll-2", "");
    
		const swiperEl = component.querySelector(".scroll-2_nav_wrap");
		const slides = component.querySelectorAll(".scroll-2_nav_item");
		const sections = component.querySelectorAll(".scroll-2_section");
		if (!swiperEl || slides.length === 0) return;

		const speed = 600;
		const swiper = new Swiper(swiperEl, {
			slidesPerView: "auto",
			speed,
			navigation: {
				nextEl: component.querySelector(".scroll-2_button_element.is-next"),
				prevEl: component.querySelector(".scroll-2_button_element.is-prev"),
			},
		});

		function makeActive(index) {
			slides.forEach((s, i) => s.classList.toggle("is-active", i === index));
			swiper.slideTo(index, speed);
		}
		makeActive(0);

		sections.forEach((section, i) =>
			ScrollTrigger.create({
				trigger: section,
				start: "top center",
				end: "bottom center",
				onToggle: ({ isActive }) => isActive && makeActive(i),
			})
		);
	});
});
</script>