document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('hero-video');
    const playPauseBtn = document.getElementById('playPauseBtn');

    // Only run this script if the video and button exist on the page
    if (video && playPauseBtn) {
        const playIcon = playPauseBtn.querySelector('.play-icon');
        const pauseIcon = playPauseBtn.querySelector('.pause-icon');

        // Function to update button state
        function updateButtonState(isPlaying) {
            if (isPlaying) {
                if (playIcon) playIcon.classList.add('d-none');
                if (pauseIcon) pauseIcon.classList.remove('d-none');
                playPauseBtn.setAttribute('aria-label', 'Pause video');
            } else {
                if (playIcon) playIcon.classList.remove('d-none');
                if (pauseIcon) pauseIcon.classList.add('d-none');
                playPauseBtn.setAttribute('aria-label', 'Play video');
            }
        }

        // Handle video end - loop
        video.addEventListener('ended', function() {
            video.currentTime = 0;
            video.play();
        });

        // Handle play/pause button click
        playPauseBtn.addEventListener('click', function() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });

        // Update button state when video state changes
        video.addEventListener('play', function() {
            updateButtonState(true);
        });

        video.addEventListener('pause', function() {
            updateButtonState(false);
        });

        // Attempt to play the video initially
        video.play().catch(function(error) {
            console.log("Video autoplay failed, user interaction may be required:", error);
            updateButtonState(false);
        });

        // Initial state update
        updateButtonState(!video.paused);
    }
});