document.addEventListener('DOMContentLoaded', function() {
    const funkyButton = document.getElementById('funky-button');
    const surpriseContainer = document.getElementById('surprise-container');
    const surpriseImage = document.getElementById('surprise-image');
    const surpriseText = document.getElementById('surprise-text');
    const buttonText = document.getElementById('button-text');
    const confettiContainer = document.getElementById('confetti-container');
    const counter = document.getElementById('counter');
    const countDisplay = document.getElementById('count');
    
    let count = 0;
    const surprises = [
        {
            image: 'http://static.photos/nature/640x360/1',
            text: 'Nature calls! 🌿',
            color: 'bg-green-100'
        },
        {
            image: 'http://static.photos/food/640x360/2',
            text: 'Hungry yet? 🍕',
            color: 'bg-yellow-100'
        },
        {
            image: 'http://static.photos/travel/640x360/3',
            text: 'Let\'s go on an adventure! ✈️',
            color: 'bg-blue-100'
        },
        {
            image: 'http://static.photos/technology/640x360/4',
            text: 'Beep boop! 🤖',
            color: 'bg-purple-100'
        },
        {
            image: 'http://static.photos/abstract/640x360/5',
            text: 'Trippy visuals! 🌈',
            color: 'bg-pink-100'
        }
    ];

    function createConfetti() {
        const colors = ['bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-blue-500', 'bg-purple-500'];
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.classList.add('confetti', colors[Math.floor(Math.random() * colors.length)]);
            confetti.style.left = `${Math.random() * 100}%`;
            confetti.style.animationDelay = `${Math.random() * 0.5}s`;
            confetti.style.width = `${Math.random() * 10 + 5}px`;
            confetti.style.height = `${Math.random() * 10 + 5}px`;
            confettiContainer.appendChild(confetti);
            
            setTimeout(() => {
                confetti.remove();
            }, 3000);
        }
    }

    function triggerSurprise() {
        count++;
        countDisplay.textContent = count;
        counter.classList.remove('hidden');
        
        // Random surprise
        const randomSurprise = surprises[Math.floor(Math.random() * surprises.length)];
        
        // Button animation
        funkyButton.classList.add('animate-spin');
        buttonText.textContent = 'Woohoo!';
        
        // Show surprise after a delay
        setTimeout(() => {
            surpriseContainer.classList.remove('hidden');
            surpriseImage.src = randomSurprise.image;
            surpriseText.textContent = randomSurprise.text;
            surpriseText.classList.remove('hidden');
            surpriseContainer.classList.add(randomSurprise.color);
            
            // Reset button
            setTimeout(() => {
                funkyButton.classList.remove('animate-spin');
                buttonText.textContent = 'Again?';
                funkyButton.classList.remove('bg-green-500', 'bg-green-600');
                funkyButton.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
            }, 1000);
        }, 500);
        
        createConfetti();
    }

    funkyButton.addEventListener('click', triggerSurprise);
    
    // Easter egg for multiple clicks
    let clickCount = 0;
    const easterEggThreshold = 5;
    funkyButton.addEventListener('click', () => {
        clickCount++;
        if (clickCount === easterEggThreshold) {
            document.body.classList.add('bg-green-100');
            setTimeout(() => {
                document.body.classList.remove('bg-green-100');
            }, 1000);
        }
    });
});