<?php
// Configuração de timezone
date_default_timezone_set('America/Sao_Paulo');

// Mapeamento de dias e meses em português
$diasSemana = [
    'Sunday' => 'DOMINGO', 'Monday' => 'SEGUNDA', 'Tuesday' => 'TERÇA',
    'Wednesday' => 'QUARTA', 'Thursday' => 'QUINTA', 'Friday' => 'SEXTA',
    'Saturday' => 'SÁBADO'
];

$meses = [
    'January' => 'JANEIRO', 'February' => 'FEVEREIRO', 'March' => 'MARÇO',
    'April' => 'ABRIL', 'May' => 'MAIO', 'June' => 'JUNHO',
    'July' => 'JULHO', 'August' => 'AGOSTO', 'September' => 'SETEMBRO',
    'October' => 'OUTUBRO', 'November' => 'NOVEMBRO', 'December' => 'DEZEMBRO'
];

$dataAtual = $diasSemana[date('l')] . ', ' . date('d') . ' DE ' . $meses[date('F')] . ' DE ' . date('Y');

// Buscar dados dos jogos
$api_url = 'https://meusjogos.shop/dados_api.json';
$jogos = [];

$api_content = @file_get_contents($api_url);
if ($api_content !== false) {
    $jogos = json_decode($api_content, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        $jogos = [];
    }
}

$totalJogos = count($jogos);
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>SPORTS ARENA • Jogos Ao Vivo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            color: #fff;
            overflow-x: hidden;
        }

        /* Header com gradiente moderno */
        .hero {
            background: linear-gradient(135deg, rgba(255,0,150,0.8), rgba(0,255,255,0.8));
            padding: 60px 20px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 800;
            position: relative;
            z-index: 1;
            text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
            letter-spacing: -1px;
        }

        .hero p {
            font-size: 1.1rem;
            margin-top: 15px;
            opacity: 0.95;
            position: relative;
            z-index: 1;
        }

        .games-badge {
            display: inline-block;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
            padding: 8px 20px;
            border-radius: 50px;
            margin-top: 20px;
            font-weight: bold;
            font-size: 1rem;
            border: 1px solid rgba(255,255,255,0.3);
            position: relative;
            z-index: 1;
        }

        .games-badge span {
            font-size: 1.4rem;
            font-weight: 800;
            color: #ffd700;
        }

        /* Controles de rolagem */
        .scroll-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }

        .scroll-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid rgba(255,255,255,0.5);
            color: white;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            backdrop-filter: blur(5px);
        }

        .scroll-btn:active {
            transform: scale(0.95);
        }

        .scroll-btn.stop {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* Indicador de rolagem */
        .scroll-indicator {
            position: fixed;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            padding: 10px 5px;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            z-index: 999;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .indicator-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            transition: all 0.3s ease;
        }

        .indicator-dot.active {
            background: #ffd700;
            transform: scale(1.5);
            box-shadow: 0 0 10px #ffd700;
        }

        /* Container dos cards */
        .cards-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
        }

        /* Card moderno com efeito glassmorphism */
        .game-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 20px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .game-card:hover::before {
            left: 100%;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: rgba(255,215,0,0.5);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

        /* Times */
        .teams {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .team {
            flex: 1;
            text-align: center;
        }

        .team-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            transition: transform 0.3s;
        }

        .team-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
        }

        .game-card:hover .team-logo {
            transform: scale(1.05);
        }

        .team-name {
            font-weight: 600;
            font-size: 0.9rem;
            margin-top: 8px;
            color: #fff;
        }

        .score {
            font-size: 1.8rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffd700, #ff6b6b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-top: 5px;
        }

        .vs-divider {
            font-size: 1.5rem;
            font-weight: 800;
            color: rgba(255,255,255,0.6);
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        /* Competição */
        .competition {
            text-align: center;
            font-size: 0.75rem;
            padding: 8px;
            background: rgba(0,0,0,0.5);
            border-radius: 20px;
            margin: 15px 0;
            letter-spacing: 1px;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* Horário */
        .datetime {
            text-align: center;
            font-size: 2rem;
            font-weight: 800;
            font-family: 'Courier New', monospace;
            margin: 15px 0;
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 10px;
            border-radius: 16px;
            letter-spacing: 2px;
        }

        /* Canais */
        .channels {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin: 15px 0;
        }

        .channel {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(0,0,0,0.5);
            padding: 8px 15px;
            border-radius: 30px;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .channel:hover {
            background: rgba(255,215,0,0.3);
            transform: scale(1.05);
        }

        .channel img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .channel span {
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* Status */
        .status {
            text-align: center;
            padding: 8px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 10px;
        }

        .status-live {
            background: linear-gradient(90deg, #ff416c, #ff4b2b);
            animation: blink 1s infinite;
        }

        .status-finished {
            background: linear-gradient(90deg, #434343, #000000);
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Mensagem sem jogos */
        .no-games {
            text-align: center;
            padding: 80px 20px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            font-size: 1.5rem;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .team-logo {
                width: 60px;
                height: 60px;
            }
            
            .score {
                font-size: 1.4rem;
            }
            
            .datetime {
                font-size: 1.5rem;
            }
            
            .scroll-controls {
                bottom: 80px;
                right: 15px;
            }
            
            .scroll-btn {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .team-name {
                font-size: 0.75rem;
            }
            
            .vs-divider {
                font-size: 1rem;
            }
            
            .channels {
                gap: 8px;
            }
            
            .channel {
                padding: 5px 10px;
            }
            
            .channel span {
                font-size: 0.7rem;
            }
        }

        /* Animação de entrada */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .game-card {
            animation: fadeInUp 0.6s ease-out forwards;
        }
    </style>
</head>
<body>
    <div class="hero">
        <h1>⚡ SPORTS ARENA ⚡</h1>
        <p><?php echo $dataAtual; ?></p>
        <div class="games-badge">
            🎯 <span><?php echo $totalJogos; ?></span> JOGOS HOJE
        </div>
    </div>

    <div class="cards-wrapper">
        <div class="cards-grid" id="cardsGrid">
            <?php if (empty($jogos)) : ?>
                <div class="no-games">
                    🏆 NENHUM JOGO DISPONÍVEL 🏆
                </div>
            <?php else : ?>
                <?php foreach ($jogos as $index => $jogo) : ?>
                    <div class="game-card" data-index="<?php echo $index; ?>">
                        <div class="teams">
                            <div class="team">
                                <div class="team-logo">
                                    <img src="<?php echo htmlspecialchars($jogo['img_time1_url']); ?>" alt="<?php echo htmlspecialchars($jogo['time1']); ?>" loading="lazy">
                                </div>
                                <div class="team-name"><?php echo htmlspecialchars($jogo['time1']); ?></div>
                                <div class="score"><?php echo $jogo['placar_time1'] ?: '0'; ?></div>
                            </div>
                            
                            <div class="vs-divider">VS</div>
                            
                            <div class="team">
                                <div class="team-logo">
                                    <img src="<?php echo htmlspecialchars($jogo['img_time2_url']); ?>" alt="<?php echo htmlspecialchars($jogo['time2']); ?>" loading="lazy">
                                </div>
                                <div class="team-name"><?php echo htmlspecialchars($jogo['time2']); ?></div>
                                <div class="score"><?php echo $jogo['placar_time2'] ?: '0'; ?></div>
                            </div>
                        </div>
                        
                        <div class="competition">
                            🏆 <?php echo htmlspecialchars($jogo['competicao']); ?> 🏆
                        </div>
                        
                        <div class="datetime">
                            ⏰ <?php echo htmlspecialchars($jogo['horario']); ?>
                        </div>
                        
                        <?php if (!empty($jogo['canais'])) : ?>
                            <div class="channels">
                                <?php foreach ($jogo['canais'] as $canal) : ?>
                                    <div class="channel">
                                        <img src="<?php echo htmlspecialchars($canal['img_url']); ?>" alt="<?php echo htmlspecialchars($canal['nome']); ?>">
                                        <span><?php echo htmlspecialchars($canal['nome']); ?></span>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (!empty($jogo['status'])) : 
                            $status = strtoupper(trim($jogo['status']));
                            $isLive = (strpos($status, 'FIM') === false && strpos($status, 'ENCERRADO') === false);
                        ?>
                            <div class="status <?php echo $isLive ? 'status-live' : 'status-finished'; ?>">
                                <?php echo $isLive ? '🔴 AO VIVO' : '✅ FINALIZADO'; ?>
                                <small style="display: block; font-size: 0.7rem;"><?php echo htmlspecialchars($jogo['status']); ?></small>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <div class="scroll-controls">
        <button class="scroll-btn" id="scrollUpBtn" title="Rolar para cima">▲</button>
        <button class="scroll-btn stop" id="scrollToggleBtn" title="Pausar/Iniciar rolagem">⏸️</button>
        <button class="scroll-btn" id="scrollDownBtn" title="Rolar para baixo">▼</button>
    </div>

    <div class="scroll-indicator" id="scrollIndicator">
        <!-- Indicadores serão gerados via JavaScript -->
    </div>

    <script>
        // Elementos
        const cardsGrid = document.getElementById('cardsGrid');
        const cards = document.querySelectorAll('.game-card');
        const scrollUpBtn = document.getElementById('scrollUpBtn');
        const scrollDownBtn = document.getElementById('scrollDownBtn');
        const scrollToggleBtn = document.getElementById('scrollToggleBtn');
        const scrollIndicator = document.getElementById('scrollIndicator');
        
        // Estado da rolagem automática
        let autoScrollActive = true;
        let scrollInterval = null;
        let scrollSpeed = 1.5;
        let currentDirection = 1; // 1 = down, -1 = up
        
        // Criar indicadores
        function createIndicators() {
            scrollIndicator.innerHTML = '';
            cards.forEach((_, index) => {
                const dot = document.createElement('div');
                dot.className = 'indicator-dot';
                dot.setAttribute('data-index', index);
                scrollIndicator.appendChild(dot);
            });
        }
        
        // Atualizar indicador ativo
        function updateActiveIndicator() {
            const scrollPosition = window.scrollY;
            const windowHeight = window.innerHeight;
            
            cards.forEach((card, index) => {
                const cardRect = card.getBoundingClientRect();
                const cardTop = cardRect.top + window.scrollY;
                const cardBottom = cardTop + cardRect.height;
                
                const isVisible = (cardTop < scrollPosition + windowHeight / 2 && 
                                   cardBottom > scrollPosition + windowHeight / 3);
                
                const dots = document.querySelectorAll('.indicator-dot');
                if (dots[index]) {
                    if (isVisible) {
                        dots[index].classList.add('active');
                    } else {
                        dots[index].classList.remove('active');
                    }
                }
            });
        }
        
        // Função de rolagem automática
        function startAutoScroll() {
            if (scrollInterval) clearInterval(scrollInterval);
            
            scrollInterval = setInterval(() => {
                if (!autoScrollActive) return;
                
                const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
                let currentScroll = window.scrollY;
                let newScroll = currentScroll + (scrollSpeed * currentDirection);
                
                // Inverter direção nas bordas
                if (newScroll >= maxScroll - 50) {
                    newScroll = maxScroll - 50;
                    currentDirection = -1;
                } else if (newScroll <= 50) {
                    newScroll = 50;
                    currentDirection = 1;
                }
                
                window.scrollTo({
                    top: newScroll,
                    behavior: 'smooth'
                });
                
                updateActiveIndicator();
            }, 50);
        }
        
        // Parar rolagem automática
        function stopAutoScroll() {
            if (scrollInterval) {
                clearInterval(scrollInterval);
                scrollInterval = null;
            }
        }
        
        // Reiniciar rolagem automática
        function restartAutoScroll() {
            stopAutoScroll();
            if (autoScrollActive) {
                startAutoScroll();
            }
        }
        
        // Toggle auto scroll
        function toggleAutoScroll() {
            autoScrollActive = !autoScrollActive;
            
            if (autoScrollActive) {
                scrollToggleBtn.innerHTML = '⏸️';
                scrollToggleBtn.classList.remove('stop');
                scrollToggleBtn.classList.add('stop');
                restartAutoScroll();
            } else {
                scrollToggleBtn.innerHTML = '▶️';
                scrollToggleBtn.classList.remove('stop');
                scrollToggleBtn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
                stopAutoScroll();
            }
        }
        
        // Scroll manual suave
        function smoothScrollTo(element, direction) {
            autoScrollActive = false;
            scrollToggleBtn.innerHTML = '▶️';
            scrollToggleBtn.classList.remove('stop');
            stopAutoScroll();
            
            const cardHeight = element.offsetHeight;
            const scrollAmount = direction === 'up' ? -cardHeight : cardHeight;
            
            window.scrollBy({
                top: scrollAmount,
                behavior: 'smooth'
            });
            
            setTimeout(() => {
                updateActiveIndicator();
            }, 500);
        }
        
        // Scroll manual contínuo (enquanto pressionado)
        let manualScrollInterval = null;
        
        function startManualScroll(direction) {
            if (manualScrollInterval) clearInterval(manualScrollInterval);
            
            manualScrollInterval = setInterval(() => {
                window.scrollBy({
                    top: direction === 'up' ? -20 : 20,
                    behavior: 'smooth'
                });
                updateActiveIndicator();
            }, 16);
        }
        
        function stopManualScroll() {
            if (manualScrollInterval) {
                clearInterval(manualScrollInterval);
                manualScrollInterval = null;
            }
        }
        
        // Eventos para rolagem manual com toque/clique
        scrollUpBtn.addEventListener('mousedown', () => startManualScroll('up'));
        scrollUpBtn.addEventListener('mouseup', stopManualScroll);
        scrollUpBtn.addEventListener('mouseleave', stopManualScroll);
        
        scrollDownBtn.addEventListener('mousedown', () => startManualScroll('down'));
        scrollDownBtn.addEventListener('mouseup', stopManualScroll);
        scrollDownBtn.addEventListener('mouseleave', stopManualScroll);
        
        // Eventos touch para mobile
        scrollUpBtn.addEventListener('touchstart', (e) => {
            e.preventDefault();
            startManualScroll('up');
        });
        scrollUpBtn.addEventListener('touchend', stopManualScroll);
        
        scrollDownBtn.addEventListener('touchstart', (e) => {
            e.preventDefault();
            startManualScroll('down');
        });
        scrollDownBtn.addEventListener('touchend', stopManualScroll);
        
        scrollToggleBtn.addEventListener('click', toggleAutoScroll);
        
        // Scroll manual com mouse/touch direto na tela
        let isDragging = false;
        let startY = 0;
        let startScroll = 0;
        
        document.addEventListener('touchstart', (e) => {
            if (e.touches.length === 1 && !e.target.closest('.scroll-controls')) {
                isDragging = true;
                startY = e.touches[0].clientY;
                startScroll = window.scrollY;
                autoScrollActive = false;
                scrollToggleBtn.innerHTML = '▶️';
                scrollToggleBtn.classList.remove('stop');
                stopAutoScroll();
            }
        });
        
        document.addEventListener('touchmove', (e) => {
            if (isDragging) {
                const deltaY = startY - e.touches[0].clientY;
                window.scrollTo({
                    top: startScroll + deltaY,
                    behavior: 'auto'
                });
                updateActiveIndicator();
            }
        });
        
        document.addEventListener('touchend', () => {
            isDragging = false;
        });
        
        // Scroll com mouse (arrastar)
        let mouseDown = false;
        let mouseStartY = 0;
        let mouseStartScroll = 0;
        
        document.addEventListener('mousedown', (e) => {
            if (!e.target.closest('.scroll-controls') && !e.target.closest('.scroll-btn')) {
                mouseDown = true;
                mouseStartY = e.clientY;
                mouseStartScroll = window.scrollY;
                autoScrollActive = false;
                scrollToggleBtn.innerHTML = '▶️';
                scrollToggleBtn.classList.remove('stop');
                stopAutoScroll();
            }
        });
        
        document.addEventListener('mousemove', (e) => {
            if (mouseDown) {
                const deltaY = mouseStartY - e.clientY;
                window.scrollTo({
                    top: mouseStartScroll + deltaY,
                    behavior: 'auto'
                });
                updateActiveIndicator();
            }
        });
        
        document.addEventListener('mouseup', () => {
            mouseDown = false;
        });
        
        // Atualizar indicadores ao rolar
        window.addEventListener('scroll', updateActiveIndicator);
        window.addEventListener('resize', updateActiveIndicator);
        
        // Clicar no indicador rola até o card
        scrollIndicator.addEventListener('click', (e) => {
            const dot = e.target.closest('.indicator-dot');
            if (dot) {
                const index = parseInt(dot.getAttribute('data-index'));
                if (cards[index]) {
                    autoScrollActive = false;
                    scrollToggleBtn.innerHTML = '▶️';
                    scrollToggleBtn.classList.remove('stop');
                    stopAutoScroll();
                    
                    cards[index].scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                    
                    setTimeout(() => updateActiveIndicator(), 500);
                }
            }
        });
        
        // Inicializar
        createIndicators();
        startAutoScroll();
        updateActiveIndicator();
        
        // Prevenir clique com botão direito
        document.addEventListener('contextmenu', (e) => e.preventDefault());
        
        // Efeito de hover nos cards (feedback tátil)
        cards.forEach(card => {
            card.addEventListener('click', () => {
                card.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    card.style.transform = '';
                }, 200);
            });
        });
        
        // Log para debug
        console.log('🚀 Sports Arena carregada!');
        console.log(`📺 Total de jogos: ${cards.length}`);
    </script>
</body>
</html>