<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<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>
document.addEventListener("DOMContentLoaded", () => {
	gsap.registerPlugin(SplitText);
	document.querySelectorAll(".slider-4_component").forEach((component) => {
		if (component.hasAttribute("data-slider-4")) return;
		component.setAttribute("data-slider-4", "");

		const sliderElement = component.querySelector(".slider-4_wrap");
		if (!sliderElement) return;
    
		const quotes = component.querySelectorAll(".slider-4_blockquote");
		SplitText.create(quotes, { type: "words", wordsClass: "word" });
    
		function makeActive(slide) {
			gsap.context(() => {
				let tl = gsap.timeline();
				tl.fromTo(slide.querySelectorAll(".word"), { y: "0.3em", opacity: 0 }, { y: "0rem", opacity: 1, stagger: {amount: 0.3} });
				tl.fromTo(".slider-4_name", { y: "0.5rem", opacity: 0 }, { y: "0rem", opacity: 1 }, "<50%");
				tl.fromTo(".slider-4_title", { y: "0.5rem", opacity: 0 }, { y: "0rem", opacity: 1 }, "<10%");
			}, slide);
		}

		const swiper = new Swiper(sliderElement, {
			slidesPerView: 1,
			effect: "fade",
			fadeEffect: { crossFade: true },
			speed: 0,
			loop: true,
			allowTouchMove: true,
			followFinger: false,
			keyboard: {
				enabled: true,
				onlyInViewport: true,
			},
			pagination: {
				el: component.querySelector(".slider-4_bullet_wrap"),
				bulletActiveClass: "is-active",
				bulletClass: "slider-4_bullet_item",
				bulletElement: "button",
				clickable: true,
			},
			slideActiveClass: "is-active",
			slideDuplicateActiveClass: "is-active",
		});
		swiper.on('slideChange', function () {
			makeActive(swiper.slides[swiper.activeIndex]);
		});
	});
});
</script>