document.addEventListener('DOMContentLoaded', function () {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    const carousel = document.querySelector('.carousel-container');
    const videos = document.querySelectorAll('.carousel-item');

    let currentIndex = 0; // Start with the first video

    function centerVideo(index) {
        const videoWidth = videos[index].offsetWidth; // Width of the video
        const containerWidth = carousel.offsetWidth; // Width of the visible container
        const offset = videos[index].offsetLeft - (containerWidth / 2 - videoWidth / 2);
        carousel.scrollTo({ left: offset, behavior: 'smooth' });
    }

    // Add event listeners for buttons
    prevBtn.addEventListener('click', () => {
        if (currentIndex > 0) {
            currentIndex--;
            centerVideo(currentIndex);
        }
    });

    nextBtn.addEventListener('click', () => {
        if (currentIndex < videos.length - 1) {
            currentIndex++;
            centerVideo(currentIndex);
        }
    });

    // Center the first video on load
    centerVideo(currentIndex);
});