document.addEventListener("DOMContentLoaded", function () {
    const carouselContainers = document.querySelectorAll(".carousel-container");

    carouselContainers.forEach(container => {
        const carousel = container.querySelector(".carousel");
        const images = Array.from(container.querySelectorAll(".carousel img"));
        const leftButton = container.querySelector(".carousel-nav.left");
        const rightButton = container.querySelector(".carousel-nav.right");

        let currentIndex = 0; // Start at the first image
        let isTransitioning = false; // Prevent multiple clicks during transition

        function updateCarousel() {
            let totalOffset = 0;

            images.forEach((img, index) => {
                if (index === currentIndex) {
                    img.classList.remove("not-focused");
                } else {
                    img.classList.add("not-focused");
                }

                if (index < currentIndex) {
                    totalOffset += img.clientWidth;
                    totalOffset += parseInt(getComputedStyle(carousel).gap);
                }
            });

            const currentImageWidth = images[currentIndex].clientWidth;
            const containerWidth = carousel.parentElement.clientWidth;
            const centerOffset = (containerWidth - currentImageWidth) / 2;

            carousel.style.transform = `translateX(${-totalOffset + centerOffset}px)`;

            // Update arrow visibility
            leftButton.style.visibility = currentIndex === 0 ? "hidden" : "visible";
            rightButton.style.visibility = currentIndex === images.length - 1 ? "hidden" : "visible";
        }
		
        // Handle navigation
        leftButton.addEventListener("click", () => {
            if (isTransitioning || currentIndex === 0) return;
            isTransitioning = true;

            currentIndex--;
            carousel.style.transition = "transform 0.5s ease";
            updateCarousel();

            carousel.addEventListener("transitionend", () => {
                isTransitioning = false;
            }, { once: true });
        });

        rightButton.addEventListener("click", () => {
            if (isTransitioning || currentIndex === images.length - 1) return;
            isTransitioning = true;

            currentIndex++;
            carousel.style.transition = "transform 0.5s ease";
            updateCarousel();

            carousel.addEventListener("transitionend", () => {
                isTransitioning = false;
            }, { once: true });
        });

        // Initialize carousel on load and resize
        window.addEventListener("load", () => {
            carousel.style.transition = "none";
            updateCarousel();
        });

        window.addEventListener("resize", () => {
            carousel.style.transition = "none"; // Disable animation during resize
            updateCarousel();
        });
    });
});






document.addEventListener("DOMContentLoaded", function () {
    const lightbox = document.getElementById("lightbox");
    const lightboxImg = document.getElementById("lightbox-img");
    const closeBtn = document.querySelector(".close-btn");

    // Collect all carousel images into an array
    const carouselImages = Array.from(document.querySelectorAll(".carousel img"));
    let currentImageIndex = -1; // Track the currently displayed image index

    // Function to show the lightbox with a specific image
    function showLightbox(index) {
        const image = carouselImages[index];
        if (!image) return; // Exit if the image doesn't exist

        const highResSrc = image.getAttribute("data-high-res"); // Get the high-res URL
        lightboxImg.src = highResSrc || image.src; // Use high-res image, fallback to current image
        lightbox.style.display = "flex"; // Show lightbox
        currentImageIndex = index; // Update the current index
    }

    // Add click event to all carousel images
    carouselImages.forEach((image, index) => {
        image.addEventListener("click", () => {
            showLightbox(index);
        });
    });

    // Close lightbox when clicking anywhere in the lightbox
    lightbox.addEventListener("click", () => {
        lightbox.style.display = "none"; // Hide lightbox
        lightboxImg.src = ""; // Clear image source
        currentImageIndex = -1; // Reset index
    });

    // Add keyboard navigation for left and right arrow keys
    document.addEventListener("keydown", (event) => {
        if (lightbox.style.display !== "flex") return; // Do nothing if lightbox is hidden

        if (event.key === "ArrowRight") {
            // Move to the next image
            const nextIndex = (currentImageIndex + 1) % carouselImages.length;
            showLightbox(nextIndex);
        } else if (event.key === "ArrowLeft") {
            // Move to the previous image
            const prevIndex =
                (currentImageIndex - 1 + carouselImages.length) % carouselImages.length;
            showLightbox(prevIndex);
        } else if (event.key === "Escape") {
            // Close the lightbox with Escape key
            lightbox.style.display = "none";
            lightboxImg.src = ""; // Clear image source
            currentImageIndex = -1; // Reset index
        }
    });
});




document.addEventListener("scroll", () => {
    const arrowContainer = document.getElementById("arrow-container");
    const maxScroll = window.innerHeight / 30; // Adjust this value as needed
    const currentScroll = window.scrollY;

    // Calculate the new opacity based on scroll
    const newOpacity = Math.max(0, 1 - currentScroll / maxScroll);
    arrowContainer.style.opacity = newOpacity;

    // Optional: Hide the arrow completely when opacity is 0
    if (newOpacity === 0) {
        arrowContainer.style.pointerEvents = "none";
    } else {
        arrowContainer.style.pointerEvents = "auto";
    }
});