Magic

<div x-data="gsapAnimation()" x-ref="containerGsap" class="px-0 flex flex-col gap-14 md:gap-28 py-20 md:py-48">
    <div x-ref="container" class="container w-4/5">
        <div class="inline-flex flex-col gap-6">
            {% render "@logos-brand--magic" with {logoClass:"h-6 md:h-8"} %}
            <h2 class="font-medium text-6xl">{{ text.title }}</h2>
        </div>
    </div>

    <div x-ref="containerVideo" class="image-container">
        {% render "@image" with {
            src: '/placeholder-image.jpg',
            alt: 'Description de l\'image',
            width: 'full', // full, 1/2, 1/4, etc.
            height: 'auto',
            objectFit: 'cover', // cover, contain, fill
            loading: 'lazy',
            enableGsap: true,
        } %}
    </div>

    <div class="container w-4/5 px-0 flex flex-col gap-14 md:gap-28">
        <div class="flex flex-col items-center gap-10"
             x-ref="buttonMagic"
        >
            <p class="font-medium text-2xl">{{ text.description }}</p>
            {% render "@template-button" with {
                href:"https://www.afflelou.com/",
                external:true,
                color: "dark-subtle",
                label:"En savoir plus",
                class:"mx-auto",
                button_attribute:(":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'})
            } %}
        </div>
    </div>

    <div class="container" x-ref="sliderMagic">
        {% render "@carousel" with {
            swiper_pagination_attribute:(":class=\"isMagicDark ? 'swiper-dark' : 'swiper-light'\"")|replace({'\"': '"'}),
            cta_button_attribute:(":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'}),
            swiper_navigation_attribute:(":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'}),
        } %}
    </div>
</div>

<script>
	function gsapAnimation() {
		return {
			isMagicDark: false,
			init() {
				this.setupGsapAnimation();
			},
			setupGsapAnimation() {
				gsap.registerPlugin(ScrollTrigger);

				const containerVideo = this.$refs.containerVideo;
				const containerGsap = this.$refs.containerGsap;

				gsap.timeline({
					scrollTrigger: {
						trigger: containerVideo,
						start: "top-=100 bottom",
						end: "bottom top",
						markers: true, // À retirer en production
						onEnter: () => {
							this.applyDarkTheme();
						}
					}
				});

				gsap.timeline({
					scrollTrigger: {
						trigger: containerGsap,
						start: "top-=100 top",
						end: "bottom+=200 bottom",
						markers: true, // À retirer en production
						onLeave: () => {
							this.resetToWhite();
						}
					}
				});
			},
			resetToWhite() {
				this.isMagicDark = false;
				gsap.to(this.$refs.containerGsap, {
					backgroundColor: 'white',
					color: 'black',
					duration: 0.5
				});
			},
			applyDarkTheme() {
				this.isMagicDark = true;
				gsap.to(this.$refs.containerGsap, {
					backgroundColor: '#262626',
					color: '#FFFFFF',
					duration: 0.5
				});
			},
		};
	}
</script>