document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.grid');
    const numbers = Array.from({length: 10}, (_, i) => i + 1);
    
    // Create number elements
    numbers.forEach(num => {
        const numberEl = document.createElement('div');
        numberEl.className = 'number-container';
        
        const innerEl = document.createElement('div');
        innerEl.className = 'netflix-number w-32 h-32 md:w-40 md:h-40 text-6xl md:text-7xl lg:text-8xl';
        innerEl.textContent = num;
        innerEl.dataset.number = num;
        
        // Default animation
        innerEl.classList.add('animate-pop-in');
        
        numberEl.appendChild(innerEl);
        container.appendChild(numberEl);
    });
    
    // Animation control buttons
    document.getElementById('zoom-btn').addEventListener('click', function() {
        resetAnimations();
        document.querySelectorAll('.netflix-number').forEach(el => {
            el.classList.remove('animate-pop-in', 'animate-glow');
            el.classList.add('animate-zoom-in');
        });
    });
    
    document.getElementById('pop-btn').addEventListener('click', function() {
        resetAnimations();
        document.querySelectorAll('.netflix-number').forEach(el => {
            el.classList.remove('animate-zoom-in', 'animate-glow');
            el.classList.add('animate-pop-in');
        });
    });
    
    document.getElementById('glow-btn').addEventListener('click', function() {
        resetAnimations();
        document.querySelectorAll('.netflix-number').forEach(el => {
            el.classList.remove('animate-zoom-in', 'animate-pop-in');
            el.classList.add('animate-glow');
        });
    });
    
    function resetAnimations() {
        document.querySelectorAll('.netflix-number').forEach(el => {
            el.style.animation = 'none';
            void el.offsetWidth; // Trigger reflow
            el.style.animation = null;
        });
    }
    
    // Add hover effects
    document.querySelectorAll('.netflix-number').forEach(el => {
        el.addEventListener('mouseenter', function() {
            const num = this.dataset.number;
            this.style.background = `linear-gradient(145deg, #1a1a1a, #0a0a0a), 
                                   url('http://static.photos/black/320x240/${num}00') center/cover`;
        });
        
        el.addEventListener('mouseleave', function() {
            this.style.background = 'linear-gradient(145deg, #1a1a1a, #0a0a0a)';
        });
    });
});