document.addEventListener('DOMContentLoaded', () => {
    // Sample game data
    const trendingGames = [
        { title: "Cyber Nexus", genre: "RPG", players: "2.4M" },
        { title: "Quantum Drift", genre: "Racing", players: "1.8M" },
        { title: "Neon Wasteland", genre: "FPS", players: "1.5M" },
        { title: "Stellar Command", genre: "Strategy", players: "1.3M" },
        { title: "Phantom Protocol", genre: "Stealth", players: "1.1M" },
        { title: "Eclipse Warriors", genre: "Action", players: "950K" },
        { title: "Digital Horizon", genre: "Adventure", players: "870K" },
        { title: "Void Runners", genre: "Platformer", players: "790K" },
        { title: "Synthwave Arena", genre: "Battle Royale", players: "720K" },
        { title: "Arcane Legends", genre: "MMO", players: "680K" }
    ];

    // Color gradient for ranks
    const rankColors = [
        'from-yellow-400 to-orange-500', // 1st
        'from-purple-400 to-pink-500',   // 2nd
        'from-blue-400 to-cyan-500',     // 3rd
        'from-green-400 to-teal-500',    // 4th
        'from-red-400 to-orange-500',    // 5th
        'from-indigo-400 to-purple-500', // 6th
        'from-pink-400 to-red-500',      // 7th
        'from-teal-400 to-blue-500',     // 8th
        'from-orange-400 to-yellow-500', // 9th
        'from-gray-400 to-gray-500'      // 10th
    ];

    // Create leaderboard items
    function createLeaderboardItem(game, rank, animationClass) {
        const item = document.createElement('div');
        item.className = 'game-card';
        
        const rankElement = document.createElement('div');
        rankElement.className = `rank-number bg-gradient-to-r ${rankColors[rank-1]} ${animationClass} text-glow`;
        rankElement.textContent = rank;
        
        const gameInfo = document.createElement('div');
        gameInfo.className = 'flex-1';
        
        const title = document.createElement('h3');
        title.className = 'game-title';
        title.textContent = game.title;
        
        const info = document.createElement('p');
        info.className = 'game-info';
        info.textContent = `${game.genre} • ${game.players} players`;
        
        gameInfo.appendChild(title);
        gameInfo.appendChild(info);
        
        item.appendChild(rankElement);
        item.appendChild(gameInfo);
        
        return item;
    }

    // Render all leaderboards
    function renderLeaderboards() {
        const glowPulseBoard = document.getElementById('glow-pulse-board');
        const slideInBoard = document.getElementById('slide-in-board');
        const countdownBoard = document.getElementById('countdown-board');
        const flickerBoard = document.getElementById('flicker-board');
        
        trendingGames.forEach((game, index) => {
            const rank = index + 1;
            
            // Glow Pulse
            glowPulseBoard.appendChild(
                createLeaderboardItem(game, rank, 'glow-pulse')
            );
            
            // Slide In
            const slideItem = createLeaderboardItem(game, rank, 'slide-in-left');
            slideItem.style.animationDelay = `${index * 0.1}s`;
            slideInBoard.appendChild(slideItem);
            
            // Countdown Snap
            const countItem = createLeaderboardItem(game, rank, 'count-up');
            countItem.style.animationDelay = `${index * 0.15}s`;
            countdownBoard.appendChild(countItem);
            
            // Flicker Reveal
            const flickerItem = createLeaderboardItem(game, rank, 'flicker');
            flickerItem.style.animationDelay = `${index * 0.1}s`;
            flickerBoard.appendChild(flickerItem);
        });
    }

    renderLeaderboards();
});