document.addEventListener('DOMContentLoaded', function() {
    const fileUpload = document.getElementById('file-upload');
    const uploadArea = document.querySelector('.border-dashed');
    
    // Handle file upload click
    uploadArea.addEventListener('click', () => {
        fileUpload.click();
    });
    
    // Handle file selection
    fileUpload.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            const file = this.files[0];
            if (file.type.match('image.*')) {
                // In a real app, this would upload the file
                showUploadSuccess(file.name);
            } else {
                alert('Please select an image file');
            }
        }
    });
    
    // Drag and drop functionality
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('border-purple-400');
    });
    
    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('border-purple-400');
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('border-purple-400');
        
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            const file = e.dataTransfer.files[0];
            if (file.type.match('image.*')) {
                fileUpload.files = e.dataTransfer.files;
                showUploadSuccess(file.name);
            } else {
                alert('Please drop an image file');
            }
        }
    });
    
    function showUploadSuccess(filename) {
        // In a real app, this would show a preview
        alert(`File "${filename}" selected successfully! In a real app, this would upload and process your image.`);
    }
});

// Add some interactive elements
document.addEventListener('DOMContentLoaded', function() {
    // Add hover effects to cards
    const cards = document.querySelectorAll('.bg-gray-800/50');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});