document.addEventListener('DOMContentLoaded', () => {
    feather.replace();
    
    const spinBtn = document.querySelector('.spin-btn');
    const reels = document.querySelectorAll('.reel');
    const symbols = ['🍒', '🍋', '🍊', '🍇', '🍉', '7️⃣', '🔔', '💎'];
    
    spinBtn.addEventListener('click', () => {
        spinBtn.disabled = true;
        spinBtn.textContent = 'SPINNING...';
        
        // Spin each reel with different timing
        reels.forEach((reel, index) => {
            const duration = 1000 + (index * 500);
            spinReel(reel, duration);
        });
        
        // Enable button after all reels stop
        setTimeout(() => {
            spinBtn.disabled = false;
            spinBtn.textContent = 'SPIN';
            checkWin();
        }, 2500);
    });
    
    function spinReel(reel, duration) {
        const startTime = Date.now();
        const spinInterval = setInterval(() => {
            const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];
            reel.textContent = randomSymbol;
            
            if (Date.now() - startTime >= duration) {
                clearInterval(spinInterval);
                const finalSymbol = symbols[Math.floor(Math.random() * symbols.length)];
                reel.textContent = finalSymbol;
            }
        }, 100);
    }
    
    function checkWin() {
        const reelValues = Array.from(reels).map(reel => reel.textContent);
        
        // Check if all symbols are the same
        if (new Set(reelValues).size === 1) {
            showWinEffect('JACKPOT!');
        } 
        // Check if at least two symbols match
        else if (reelValues[0] === reelValues[1] || 
                 reelValues[1] === reelValues[2] || 
                 reelValues[0] === reelValues[2]) {
            showWinEffect('WINNER!');
        }
    }
    
    function showWinEffect(message) {
        const effect = document.createElement('div');
        effect.className = 'win-effect';
        effect.textContent = message;
        effect.style.position = 'fixed';
        effect.style.top = '50%';
        effect.style.left = '50%';
        effect.style.transform = 'translate(-50%, -50%)';
        effect.style.fontSize = '5rem';
        effect.style.color = '#ff7a00';
        effect.style.textShadow = '0 0 20px rgba(255,122,0,0.8)';
        effect.style.zIndex = '1000';
        effect.style.animation = 'fadeOut 2s forwards';
        
        document.body.appendChild(effect);
        
        setTimeout(() => {
            effect.remove();
        }, 2000);
    }
});