document.addEventListener('DOMContentLoaded', () => {
    const videos = document.querySelectorAll('.video-slide video');

    // Toggle play/pause on click
    videos.forEach(video => {
        video.addEventListener('click', () => {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });
    });

    // Observer to play/pause videos when they enter/leave the viewport
    const observerOptions = {
        root: document.querySelector('.video-feed'),
        rootMargin: '0px',
        threshold: 0.8 // Trigger when 80% of the video is visible
    };

    const videoObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            const video = entry.target;
            if (entry.isIntersecting) {
                // Use a promise to avoid errors if play() is interrupted
                const playPromise = video.play();
                if (playPromise !== undefined) {
                    playPromise.catch(error => {
                        // Auto-play was prevented, which is common in some browsers.
                        // The user can still click to play.
                    });
                }
            } else {
                video.pause();
            }
        });
    }, observerOptions);

    videos.forEach(video => {
        videoObserver.observe(video);
    });
});