const cards = gsap.utils.toArray(".scroll-story-block .narrative-card");

// Ajouter des classes alternées pour le styling
cards.forEach((card, index) => {
	if (index % 2 === 0) {
		card.classList.add("narrative-card--even");
	} else {
		card.classList.add("narrative-card--odd");
	}
});

// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
const MOBILE_BREAKPOINT = 768;

let scrollTriggers = [];
let stickDistance = 0;

// Fonction pour initialiser les ScrollTriggers (desktop)
function initScrollTriggers() {
	// Nettoyer d'abord les ScrollTriggers existants
	killScrollTriggers();

	if (cards.length === 0) return;

	let firstCardST = ScrollTrigger.create({
		trigger: cards[0],
		start: "top 10%",
	});
	scrollTriggers.push(firstCardST);

	let lastCardST = ScrollTrigger.create({
		trigger: cards[cards.length - 1],
		start: "top 10%",
	});
	scrollTriggers.push(lastCardST);

	cards.forEach((card, index) => {
		var scale = 1 - (cards.length - index) * 0.025;
		let scaleDown = gsap.to(card, {
			scale: scale,
			"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"',
		});

		let cardST = ScrollTrigger.create({
			trigger: card,
			start: "top 10%",
			end: () => lastCardST.start + stickDistance,
			pin: true,
			// markers: true,
			pinSpacing: false,
			ease: "none",
			animation: scaleDown,
			toggleActions: "restart none none reverse",
		});

		scrollTriggers.push(cardST);
	});
}

// Fonction pour détruire tous les ScrollTriggers
function killScrollTriggers() {
	scrollTriggers.forEach((st) => st.kill());
	scrollTriggers = [];

	// Réinitialiser les styles inline des cartes
	cards.forEach((card) => {
		gsap.set(card, { clearProps: "all" });
	});
}

// Fonction pour gérer le responsive
function handleResize() {
	const isMobile = window.innerWidth < MOBILE_BREAKPOINT;

	if (isMobile) {
		// Sur mobile : détruire les ScrollTriggers
		killScrollTriggers();
	} else {
		// Sur desktop : créer les ScrollTriggers s'ils n'existent pas
		if (scrollTriggers.length === 0) {
			initScrollTriggers();
		}
	}
}

// Initialisation au chargement
handleResize();

// Écouter les événements de resize avec debounce pour optimiser les performances
let resizeTimer;
window.addEventListener("resize", () => {
	clearTimeout(resizeTimer);
	resizeTimer = setTimeout(() => {
		handleResize();
	}, 250);
});
