document.addEventListener('DOMContentLoaded', () => {
    // Generic function to handle the carousel logic
    function initializeCarousel(currentImgEl, nextImgEl, imageArray) {
        if (!currentImgEl || !nextImgEl) {
            return; // If the elements aren't on this page, do nothing
        }

        currentImgEl.classList.add('opacity-0');
        currentImgEl.style.animation = "fadeInRight 1s ease-out 0.3s forwards";

        let currentIndex = 0;
        let isTransitioning = false;
        const slideDirections = ["left", "right"];
        let slideIndex = 0;

        function performSlideZoomTransition() {
            if (isTransitioning) return;
            isTransitioning = true;
            const nextIndex = (currentIndex + 1) % imageArray.length;
            const slideDirection = slideDirections[slideIndex % slideDirections.length];
            slideIndex++;

            nextImgEl.src = imageArray[nextIndex];
            nextImgEl.style.opacity = "1";

            if (slideDirection === "left") {
                currentImgEl.style.animation = "slideOutLeft 1s ease-in-out forwards";
                nextImgEl.style.animation = "zoomInFromRight 1s ease-in-out forwards";
            } else {
                currentImgEl.style.animation = "slideOutRight 1s ease-in-out forwards";
                nextImgEl.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
            }

            setTimeout(() => {
                // The animation has finished. The 'nextImg' is now fully visible on top.
                // The 'currentImg' is now hidden behind it, having completed its slide-out.

                // 1. Reset the OLD current image. It will become the 'next' image container for the next cycle.
                //    Clear its animation and explicitly hide it.
                currentImgEl.style.animation = "";
                currentImgEl.style.opacity = "0"; // Force it to be hidden

                // 2. The 'next' image now becomes the 'current' image.
                //    We need to update its properties to be the new baseline.
                nextImgEl.style.animation = ""; // Clear its 'zoomIn' animation
                nextImgEl.style.opacity = "1";  // Ensure it is and stays visible

                // 3. Swap their IDs in the DOM. This is the key to the new logic.
                //    The element that was 'nextImg' is now officially 'currentImg'.
                let tempId = currentImgEl.id;
                currentImgEl.id = nextImgEl.id;
                nextImgEl.id = tempId;

                // 4. Re-assign our script's variables to point to the newly ID'd elements.
                currentImgEl = document.getElementById('currentImg');
                nextImgEl = document.getElementById('nextImg');

                // 5. Update the index and state.
                currentIndex = nextIndex;
                isTransitioning = false;
            }, 1000);
        }

        // Start the transition cycle after initial page animations
        setTimeout(() => {
            setInterval(performSlideZoomTransition, 5000);
        }, 2000);
    }

    // --- Carousel Definitions ---
    // IDs for the index page carousel
    const indexCurrentImg = document.getElementById("currentImg");
    const indexNextImg = document.getElementById("nextImg");
    const indexImgs = ["assets/images/room.webp", "assets/images/chair.webp", "assets/images/google.webp"];

    // IDs for the services page carousel
    const servicesCurrentImg = document.getElementById("servicesCurrentImg");
    const servicesNextImg = document.getElementById("servicesNextImg");
    const servicesImgs = ["assets/images/room.webp", "assets/images/chair.webp", "assets/images/google.webp"];

    // Initialize the carousels for any page that has the correct elements
    initializeCarousel(indexCurrentImg, indexNextImg, indexImgs);
    initializeCarousel(servicesCurrentImg, servicesNextImg, servicesImgs);
});