document.addEventListener('DOMContentLoaded', function() {
    const uploadContainer = document.getElementById('upload-container');
    const photoUpload = document.getElementById('photo-upload');
    const previewContainer = document.getElementById('preview-container');
    const originalPreview = document.getElementById('original-preview');
    const heroPreview = document.getElementById('hero-preview');
    const controls = document.getElementById('controls');
    const generateBtn = document.getElementById('generate-btn');
    
    // Handle drag and drop
    uploadContainer.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadContainer.classList.add('border-primary', 'bg-gray-700');
    });
    
    uploadContainer.addEventListener('dragleave', () => {
        uploadContainer.classList.remove('border-primary', 'bg-gray-700');
    });
    
    uploadContainer.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadContainer.classList.remove('border-primary', 'bg-gray-700');
        handleFiles(e.dataTransfer.files);
    });
    
    // Handle click to upload
    uploadContainer.addEventListener('click', () => {
        photoUpload.click();
    });
    
    // Handle file selection
    photoUpload.addEventListener('change', (e) => {
        if (e.target.files.length) {
            handleFiles(e.target.files);
        }
    });
    
    // Process selected files
    function handleFiles(files) {
        const file = files[0];
        if (file.type.match('image.*')) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                originalPreview.src = e.target.result;
                // Generate mock hero preview (in a real app, this would call an API)
                heroPreview.src = e.target.result;
                previewContainer.classList.remove('hidden');
                controls.classList.remove('hidden');
                
                // Simulate processing delay
                setTimeout(() => {
                    heroPreview.parentElement.querySelector('.absolute').classList.add('hidden');
                }, 3000);
            };
            
            reader.readAsDataURL(file);
        } else {
            alert('Please upload an image file.');
        }
    }
    
    // Generate button click
    generateBtn.addEventListener('click', () => {
        // In a real app, this would call an API to generate the transformation video
        alert('Generating your superhero transformation video...');
    });
});