<section class="mb-0 md:mb-40" id="section-6">
    <div class="container">
        <div class="flex items-center gap-10 px-4 py-6 md:py-12 relative">
            <!-- Colonne gauche : navigation -->
            <div class="flex flex-col w-full gap-2 md:gap-6 st-list">
                <!-- Bloc actif -->
                <div data-aos="fade-right" data-aos-delay="100" data-number="1" class="st-list-item active flex items-center gap-4 border-b-3 border-primary pb-2 md:pb-6">
                    <span class="text-xl font-bold number">01</span>
                    <div class="text-2xl lg:text-5xl text-black"><a href="{{ route('contact') }}" class="text-black">Nous contacter</a></div>
                </div>

                <!-- Bloc inactif -->
                <div data-aos="fade-right" data-aos-delay="200" data-number="2" class="st-list-item flex items-center gap-4 border-b-3 border-primary pb-2 md:pb-6">
                    <span class="text-xl font-bold number">02</span>
                    <div><a class="text-2xl lg:text-5xl text-black" href="{{ route('cabinet') }}">Notre cabinet</a></div>
                </div>

                <div data-aos="fade-right" data-aos-delay="300" data-number="3" class="st-list-item flex items-center gap-4 border-b-3 border-primary pb-2 md:pb-6">
                    <span class="text-xl font-bold number">03</span>
                    <div class="text-2xl lg:text-5xl text-black/60"><a href="{{ route('solutions.formation') }}" class="text-black">Nos formations</a></div>
                </div>

                <div data-aos="fade-right" data-aos-delay="400" data-number="4" class="st-list-item flex items-center gap-4 border-b-3 border-primary pb-2 md:pb-6">
                    <span class="text-xl font-bold number">04</span>
                    <div class="text-2xl lg:text-5xl text-black/60"><a href="{{ route('news.index') }}" class="text-black">Nos articles/actualités</a></div>
                </div>
            </div>

            <!-- Colonne droite : image -->
            <div data-aos="zoom-in" data-aos-delay="250" class="hidden md:block absolute bg-white rounded-3xl" style="right: 0; top: 0; width: 560px; height: 560px;">
                <img data-number="1" src="{{ asset('images/home/section6-1.jpg') }}" alt="Équipe" class="opacity-0 transition duration-500 absolute w-full rounded-3xl object-cover shadow-md r1-1" />
                <img data-number="2" src="{{ asset('images/home/section6-2.jpg') }}" alt="Équipe" class="opacity-0 transition duration-500 absolute w-full rounded-3xl object-cover shadow-md r1-1" />
                <img data-number="3" src="{{ asset('images/home/section6-3.jpg') }}" alt="Équipe" class="opacity-0 transition duration-500 absolute w-full rounded-3xl object-cover shadow-md r1-1" />
                <img data-number="4" src="{{ asset('images/home/section6-4.jpg') }}" alt="Équipe" class="opacity-0 transition duration-500 absolute w-full rounded-3xl object-cover shadow-md r1-1" />
            </div>
        </div>
    </div>

    <script>
        function setListItemActive(number) {
            currentIndex = number; // Met à jour l'index courant
            const item = document.querySelector(`.st-list-item[data-number="${number}"]`);

            document.querySelectorAll('.st-list-item').forEach(it => {
                it.classList.remove('active');
            });
            item.classList.add('active');

            document.querySelectorAll('#section-6 img').forEach(img => {
                img.classList.add('opacity-0');
            });
            document.querySelector(`#section-6 img[data-number="${number}"]`).classList.remove('opacity-0');
        }

        document.querySelectorAll('.st-list-item').forEach(item => {
            item.addEventListener('mouseenter', (event) => {
                setListItemActive(event.currentTarget.dataset.number);
            })
        })

        // Initialisation pour le premier élément
        document.addEventListener('DOMContentLoaded', () => {
            setListItemActive('1');
        });

        // defilement automatique de l'élément actif si aucune interaction
        let currentIndex = 1;
        setInterval(() => {
            // si pas de hover
            if (!document.querySelector('#section-6:hover')) {
                currentIndex = (currentIndex % 4) + 1; // Passe de 1 à 4
                setListItemActive(currentIndex.toString());
            }
        }, 2000); // Change toutes les 5 secondes
    </script>
</section>
