document.addEventListener('DOMContentLoaded', function() {
    const searchForm = document.getElementById('searchForm');
    const searchInput = document.getElementById('searchInput');
    const luckyBtn = document.getElementById('luckyBtn');
    const searchResults = document.getElementById('searchResults');
    const resultsList = document.getElementById('resultsList');

    searchForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const query = searchInput.value.trim();
        if (query) {
            performSearch(query);
        }
    });

    luckyBtn.addEventListener('click', function() {
        const queries = [
            "funny cat videos",
            "how to train your dragon",
            "best chocolate chip cookie recipe",
            "interesting facts about sloths",
            "world's largest rubber duck",
            "how to speak pirate",
            "underwater basket weaving",
            "history of the high five"
        ];
        const randomQuery = queries[Math.floor(Math.random() * queries.length)];
        searchInput.value = randomQuery;
        performSearch(randomQuery);
    });

    function performSearch(query) {
        // In a real app, this would connect to a search API
        // For demo purposes, we'll simulate results
        searchResults.classList.remove('hidden');
        resultsList.innerHTML = '';

        // Simulate API delay
        setTimeout(() => {
            const mockResults = [
                {
                    title: `${query} - The Official Moogly Guide`,
                    url: `https://moogly.com/${query.replace(/\s+/g, '-')}`,
                    description: `Everything you need to know about ${query} according to our team of moogly experts.`
                },
                {
                    title: `Wikipedia: ${query}`,
                    url: `https://en.wikipedia.org/wiki/${query.replace(/\s+/g, '_')}`,
                    description: `Learn about the history and significance of ${query} in this comprehensive article.`
                },
                {
                    title: `10 Amazing Facts About ${query} You Didn't Know`,
                    url: `https://facts.moogly.com/${query.replace(/\s+/g, '-')}`,
                    description: `Prepare to be amazed by these little-known facts about ${query}. Number 7 will shock you!`
                },
                {
                    title: `${query} Videos - MooglyTube`,
                    url: `https://mooglytube.com/search?q=${encodeURIComponent(query)}`,
                    description: `Watch the latest and greatest videos about ${query} from creators worldwide.`
                },
                {
                    title: `How to ${query} in 5 Easy Steps`,
                    url: `https://howto.moogly.com/${query.replace(/\s+/g, '-')}`,
                    description: `Our step-by-step guide makes learning ${query} easy and fun for everyone!`
                }
            ];

            mockResults.forEach(result => {
                const resultElement = document.createElement('div');
                resultElement.className = 'search-result p-4 rounded-lg hover:bg-gray-50 transition-colors';
                resultElement.innerHTML = `
                    <a href="${result.url}" class="block">
                        <h4 class="text-sm text-blue-700">${result.url}</h4>
                        <h3 class="text-xl text-blue-600 hover:underline mb-1">${result.title}</h3>
                        <p class="text-gray-600">${result.description}</p>
                    </a>
                `;
                resultsList.appendChild(resultElement);
            });
        }, 500);
    }
});