document.addEventListener('DOMContentLoaded', function() {
    // Initialize form validation for contribute page
    const contributionForm = document.querySelector('form');
    if (contributionForm) {
        contributionForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real app, this would submit to a backend
            alert('Thank you for your contribution! Our team will review it shortly.');
            this.reset();
        });
    }

    // Search functionality
const searchBtn = document.getElementById('searchBtn');
    const searchInput = document.getElementById('searchInput');
    const resultsSection = document.getElementById('resultsSection');
    const resultsContainer = document.getElementById('resultsContainer');
    const popularSection = document.getElementById('popularSection');

    searchBtn.addEventListener('click', performSearch);
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            performSearch();
        }
    });

    function performSearch() {
        const query = searchInput.value.trim();
        if (query) {
            // In a real app, this would fetch from an API
            simulateSearch(query);
        }
    }

    function simulateSearch(query) {
        // Show loading state
        resultsContainer.innerHTML = '<div class="col-span-full py-8 text-center text-gray-400">Searching...</div>';
        resultsSection.classList.remove('hidden');
        popularSection.classList.add('hidden');

        // Simulate API delay
        setTimeout(() => {
            if (query.toLowerCase() === 'no results') {
                resultsContainer.innerHTML = `
                    <div class="col-span-full py-12 text-center">
                        <i data-feather="alert-circle" class="w-12 h-12 mx-auto text-gray-500 mb-4"></i>
                        <h3 class="text-xl font-medium text-gray-300">No movies found</h3>
                        <p class="text-gray-500 mt-2">Try a different search term</p>
                    </div>
                `;
            } else {
                // Mock results
                resultsContainer.innerHTML = '';
                
                const mockResults = [
                    {
                        title: 'Pulp Fiction',
                        status: 'warning',
                        description: 'Brief v*mit scene (non-graphic)',
                        image: 'http://static.photos/movie/640x360/5'
                    },
                    {
                        title: 'The Matrix',
                        status: 'safe',
                        description: 'No reported triggers',
                        image: 'http://static.photos/movie/640x360/6'
                    },
                    {
                        title: 'Forrest Gump',
                        status: 'caution',
                        description: 'Multiple v*mit references',
                        image: 'http://static.photos/movie/640x360/7'
                    }
                ];

                mockResults.forEach((movie, index) => {
                    const statusColor = movie.status === 'safe' ? 'green' : 
                                      movie.status === 'warning' ? 'red' : 'yellow';
                    const statusText = movie.status === 'safe' ? 'Safe' : 
                                     movie.status === 'warning' ? 'Warning' : 'Caution';

                    const card = document.createElement('div');
                    card.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg';
                    card.style.animationDelay = `${index * 0.1}s`;
                    card.innerHTML = `
                        <div class="h-48 bg-gray-700 relative">
                            <img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover">
                            <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full px-2 py-1 text-xs">
                                <span class="text-${statusColor}-400">${statusText}</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg">${movie.title}</h3>
                            <p class="text-gray-400 text-sm mt-1">${movie.description}</p>
                            <button class="mt-3 text-primary-500 text-sm font-medium hover:underline flex items-center gap-1">
                                <span>View Details</span>
                                <i data-feather="chevron-right" class="w-4 h-4"></i>
                            </button>
                        </div>
                    `;
                    resultsContainer.appendChild(card);
                });
            }
            
            feather.replace();
        }, 800);
    }
});