document.addEventListener('DOMContentLoaded', function () {
    const generateBtn = document.getElementById('generateBtn');
    const videoForm = document.getElementById('videoForm');
    const videoOutput = document.getElementById('video-output');
    const spinner = document.getElementById('spinner');
    const placeholderText = document.getElementById('placeholder-text');
    const videoPlayer = document.getElementById('videoPlayer');
    const toastEl = document.getElementById('notificationToast');
    const toast = new bootstrap.Toast(toastEl);

    videoForm.addEventListener('submit', function (event) {
        event.preventDefault();
        
        // Hide previous video and show spinner
        videoPlayer.style.display = 'none';
        videoPlayer.pause();
        videoPlayer.currentTime = 0;
        videoOutput.style.display = 'block';
        spinner.style.display = 'block';
        placeholderText.textContent = 'Generating your masterpiece...';
        generateBtn.disabled = true;
        generateBtn.textContent = 'RENDERING...';

        // Simulate AI generation delay
        setTimeout(() => {
            spinner.style.display = 'none';
            placeholderText.textContent = 'Video ready!';

            // Show a placeholder video (e.g., from Pexels)
            // In a real app, this URL would come from the AI service
            videoPlayer.src = 'https://videos.pexels.com/video-files/3209828/3209828-hd_1280_720_25fps.mp4'; 
            videoPlayer.style.display = 'block';

            generateBtn.disabled = false;
            generateBtn.textContent = 'Generate Video';

            toastEl.querySelector('.toast-body').textContent = 'Your video has been successfully generated!';
            toast.show();

        }, 4000); // 4-second delay
    });
});