<?php
// Buscar dados da API
$api_url = "https://meusjogos.shop/dados_api.json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if ($http_code != 200 || !$response) {
    die("Erro ao carregar os dados da API.");
}

$jogos = json_decode($response, true);

// Organizar jogos por categoria
$jogos_hoje = [];
$jogos_andamento = [];
$jogos_finalizados = [];

foreach ($jogos as $jogo) {
    $status = strtoupper($jogo['status'] ?? '');
    
    if (!empty($jogo['placar_time1']) && !empty($jogo['placar_time2'])) {
        if ($status == 'EM ANDAMENTO' || $status == 'AO VIVO') {
            $jogos_andamento[] = $jogo;
        } else {
            $jogos_finalizados[] = $jogo;
        }
    } else {
        $jogos_hoje[] = $jogo;
    }
}

// Ordenar por horário
usort($jogos_hoje, function($a, $b) {
    return strcmp($a['horario'] ?? '', $b['horario'] ?? '');
});

function exibirCards($jogos, $categoria) {
    foreach ($jogos as $jogo) {
        $status_class = '';
        $status_texto = '';
        
        if (!empty($jogo['status'])) {
            $status_texto = $jogo['status'];
            $status_class = 'status-' . strtolower(str_replace(' ', '-', $jogo['status']));
        } elseif (!empty($jogo['placar_time1']) && !empty($jogo['placar_time2'])) {
            $status_texto = 'FINALIZADO';
            $status_class = 'status-finalizado';
        } elseif ($categoria == 'andamento') {
            $status_texto = '🔴 AO VIVO';
            $status_class = 'status-andamento';
        }
        ?>
        <div class="card-jogo">
            <!-- Cabeçalho com competição e horário -->
            <div class="card-header">
                <div class="competicao">
                    <?php if (!empty($jogo['img_competicao_url'])): ?>
                        <img src="<?= htmlspecialchars($jogo['img_competicao_url']) ?>" alt="" class="competicao-img" onerror="this.style.display='none'">
                    <?php endif; ?>
                    <span class="competicao-nome"><?= htmlspecialchars($jogo['competicao'] ?? '') ?></span>
                </div>
                <div class="horario">
                    <i class="fas fa-clock"></i>
                    <span><?= htmlspecialchars($jogo['horario'] ?? '') ?></span>
                </div>
            </div>

            <!-- Times e Placar -->
            <div class="times-container">
                <!-- Time 1 -->
                <div class="time-block time1">
                    <?php if (!empty($jogo['img_time1_url'])): ?>
                        <img src="<?= htmlspecialchars($jogo['img_time1_url']) ?>" alt="" class="time-img" onerror="this.style.display='none'">
                    <?php endif; ?>
                    <span class="time-nome"><?= htmlspecialchars($jogo['time1'] ?? '') ?></span>
                </div>

                <!-- Placar / VS -->
                <div class="placar-block">
                    <?php if (!empty($jogo['placar_time1']) || !empty($jogo['placar_time2'])): ?>
                        <div class="placar <?= $status_class ?>">
                            <span class="placar-numero"><?= htmlspecialchars($jogo['placar_time1'] ?? '0') ?></span>
                            <span class="placar-separador">X</span>
                            <span class="placar-numero"><?= htmlspecialchars($jogo['placar_time2'] ?? '0') ?></span>
                        </div>
                    <?php else: ?>
                        <div class="placar-placeholder">VS</div>
                    <?php endif; ?>
                    
                    <?php if ($status_texto): ?>
                        <div class="status-badge <?= $status_class ?>"><?= $status_texto ?></div>
                    <?php endif; ?>
                </div>

                <!-- Time 2 -->
                <div class="time-block time2">
                    <?php if (!empty($jogo['img_time2_url'])): ?>
                        <img src="<?= htmlspecialchars($jogo['img_time2_url']) ?>" alt="" class="time-img" onerror="this.style.display='none'">
                    <?php endif; ?>
                    <span class="time-nome"><?= htmlspecialchars($jogo['time2'] ?? '') ?></span>
                </div>
            </div>

            <!-- Canais de Transmissão COM LOGOS -->
            <?php if (!empty($jogo['canais'])): ?>
            <div class="canais-container">
                <div class="canais-titulo">
                    <i class="fas fa-tv"></i>
                    <span>Onde assistir:</span>
                </div>
                <div class="canais-lista">
                    <?php foreach ($jogo['canais'] as $canal): ?>
                        <div class="canal-item" title="<?= htmlspecialchars($canal['nome'] ?? '') ?>">
                            <?php if (!empty($canal['img_url'])): ?>
                                <img src="<?= htmlspecialchars($canal['img_url']) ?>" alt="" class="canal-img" onerror="this.style.display='none'">
                            <?php endif; ?>
                            <span class="canal-nome"><?= htmlspecialchars($canal['nome'] ?? '') ?></span>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
        <?php
    }
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>Jogos do Dia - Completo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: #0a0a0a;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        /* Cabeçalho */
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
            border-radius: 30px;
            border: 1px solid rgba(255, 107, 0, 0.3);
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
            position: sticky;
            top: 10px;
            z-index: 100;
            backdrop-filter: blur(10px);
        }

        .header h1 {
            font-size: 2.5em;
            font-weight: 800;
            background: linear-gradient(45deg, #ff6b00, #ffd700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }

        .header p {
            color: #888;
            font-size: 1.1em;
        }

        .header i {
            color: #ffd700;
            margin: 0 5px;
        }

        /* Controles */
        .controles {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .btn-controle {
            background: linear-gradient(45deg, #ff6b00, #ffd700);
            color: #000;
            border: none;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-controle:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px #ffd700;
        }

        .btn-controle.paused {
            background: linear-gradient(45deg, #444, #666);
            color: #fff;
            box-shadow: none;
        }

        /* Seções */
        .secao {
            background: rgba(255, 107, 0, 0.05);
            border-radius: 30px;
            padding: 25px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 215, 0, 0.2);
            backdrop-filter: blur(5px);
        }

        .secao-titulo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid linear-gradient(90deg, #ff6b00, #ffd700);
            position: relative;
        }

        .secao-titulo::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 150px;
            height: 3px;
            background: linear-gradient(90deg, #ff6b00, #ffd700);
            border-radius: 3px;
        }

        .secao-titulo i {
            font-size: 2em;
            color: #ffd700;
            filter: drop-shadow(0 0 10px #ff6b00);
        }

        .secao-titulo h2 {
            color: #fff;
            font-size: 1.8em;
            font-weight: 600;
        }

        .secao-titulo span {
            margin-left: auto;
            color: #ffd700;
            font-size: 1em;
            background: rgba(255, 107, 0, 0.2);
            padding: 5px 15px;
            border-radius: 20px;
        }

        /* Container dos cards com rolagem automática */
        .cards-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-height: 600px;
            overflow-y: auto;
            padding-right: 10px;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        /* Animação de rolagem automática */
        .cards-container.scroll-auto {
            animation: scrollVertical 40s linear infinite;
        }

        .cards-container.scroll-auto:hover {
            animation-play-state: paused;
        }

        @keyframes scrollVertical {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(calc(-100% + 600px));
            }
        }

        /* Scrollbar personalizada */
        .cards-container::-webkit-scrollbar {
            width: 8px;
        }

        .cards-container::-webkit-scrollbar-track {
            background: #333;
            border-radius: 10px;
        }

        .cards-container::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff6b00, #ffd700);
            border-radius: 10px;
        }

        /* Cards */
        .card-jogo {
            background: linear-gradient(145deg, #1f1f1f, #151515);
            border-radius: 25px;
            padding: 25px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }

        .card-jogo::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
            transform: rotate(45deg);
            animation: brilho 3s infinite;
        }

        @keyframes brilho {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }

        .card-jogo:hover {
            transform: translateY(-3px);
            border-color: #ffd700;
            box-shadow: 0 15px 40px rgba(255, 107, 0, 0.4);
        }

        /* Header do card */
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255, 215, 0, 0.2);
        }

        .competicao {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 107, 0, 0.15);
            padding: 8px 20px;
            border-radius: 40px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .competicao-img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            filter: drop-shadow(0 0 5px #ffd700);
        }

        .competicao-nome {
            color: #ffd700;
            font-weight: 700;
            font-size: 0.95em;
            letter-spacing: 0.5px;
        }

        .horario {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #000;
            padding: 8px 20px;
            border-radius: 40px;
            border: 1px solid #ff6b00;
            color: #ff6b00;
            font-weight: 700;
            font-size: 1.1em;
        }

        /* Container dos times */
        .times-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 25px;
        }

        .time-block {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
        }

        .time-img {
            width: 70px;
            height: 70px;
            object-fit: contain;
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
        }

        .time-nome {
            color: #fff;
            font-weight: 700;
            font-size: 1.1em;
            background: rgba(0, 0, 0, 0.5);
            padding: 5px 15px;
            border-radius: 30px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            width: 100%;
        }

        .placar-block {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            min-width: 120px;
        }

        .placar {
            background: linear-gradient(135deg, #ff6b00, #ffd700);
            padding: 15px 25px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 0 30px #ff6b00;
            font-size: 1.8em;
            font-weight: 800;
        }

        .placar-numero {
            color: #000;
            min-width: 40px;
            text-align: center;
        }

        .placar-separador {
            color: #000;
            font-weight: 800;
        }

        .placar-placeholder {
            font-size: 2.5em;
            font-weight: 800;
            color: #ffd700;
            text-shadow: 0 0 20px #ff6b00;
        }

        .status-badge {
            font-size: 0.9em;
            padding: 6px 20px;
            border-radius: 30px;
            font-weight: 700;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .status-andamento {
            background: #00ff88;
            color: #000;
            animation: piscar 1s infinite;
        }

        .status-finalizado {
            background: #444;
            color: #fff;
        }

        @keyframes piscar {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        /* Canais de transmissão COM LOGOS */
        .canais-container {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 20px;
            padding: 15px;
            border: 1px solid rgba(255, 215, 0, 0.2);
            margin-top: 15px;
        }

        .canais-titulo {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #ffd700;
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 0.95em;
        }

        .canais-lista {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .canal-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 107, 0, 0.2);
            padding: 8px 15px;
            border-radius: 40px;
            border: 1px solid rgba(255, 215, 0, 0.4);
            transition: all 0.3s ease;
        }

        .canal-item:hover {
            background: rgba(255, 107, 0, 0.4);
            transform: scale(1.05);
            border-color: #ffd700;
        }

        .canal-img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            filter: drop-shadow(0 0 5px #ffd700);
        }

        .canal-nome {
            color: #fff;
            font-size: 0.9em;
            font-weight: 500;
        }

        /* Botão de voltar ao topo */
        .btn-topo {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(45deg, #ff6b00, #ffd700);
            color: #000;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .btn-topo:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px #ffd700;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .header h1 {
                font-size: 2em;
            }

            .secao {
                padding: 15px;
            }

            .secao-titulo h2 {
                font-size: 1.4em;
            }

            .card-jogo {
                padding: 15px;
            }

            .times-container {
                flex-wrap: wrap;
                gap: 15px;
            }

            .time-block {
                flex: 0 0 100%;
            }

            .time1 {
                order: 1;
            }

            .placar-block {
                order: 2;
                width: 100%;
            }

            .time2 {
                order: 3;
            }

            .time-img {
                width: 50px;
                height: 50px;
            }

            .time-nome {
                font-size: 1em;
                width: auto;
                min-width: 150px;
            }

            .competicao-nome {
                font-size: 0.85em;
            }

            .horario {
                font-size: 0.95em;
                padding: 5px 12px;
            }

            .canal-nome {
                font-size: 0.8em;
            }
            
            .canal-img {
                width: 20px;
                height: 20px;
            }

            .btn-topo {
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
            }
        }

        @media (max-width: 480px) {
            .card-header {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }

            .competicao {
                width: 100%;
                justify-content: center;
            }

            .horario {
                width: 100%;
                justify-content: center;
            }

            .canal-item {
                flex: 1 1 auto;
                justify-content: center;
            }
            
            .controles {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-controle {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>
                <i class="fas fa-futbol"></i>
                JOGOS DO DIA
                <i class="fas fa-futbol"></i>
            </h1>
            <p>📍 Times, horários e onde assistir com logos</p>
            <div class="controles">
                <button class="btn-controle" onclick="toggleScroll('andamento')" id="btnAndamento">
                    <i class="fas fa-pause"></i> Pausar Agora
                </button>
                <button class="btn-controle" onclick="toggleScroll('hoje')" id="btnHoje">
                    <i class="fas fa-pause"></i> Pausar Hoje
                </button>
                <button class="btn-controle" onclick="toggleScroll('finalizados')" id="btnFinalizados">
                    <i class="fas fa-pause"></i> Pausar Finalizados
                </button>
            </div>
        </div>

        <?php if (!empty($jogos_andamento)): ?>
        <div class="secao">
            <div class="secao-titulo">
                <i class="fas fa-play-circle"></i>
                <h2>Agora</h2>
                <span><i class="fas fa-circle" style="color: #ff0000;"></i> AO VIVO</span>
            </div>
            <div class="cards-container scroll-auto" id="container-andamento">
                <?php 
                exibirCards($jogos_andamento, 'andamento');
                // Duplicar para rolagem infinita
                exibirCards($jogos_andamento, 'andamento');
                ?>
            </div>
        </div>
        <?php endif; ?>

        <?php if (!empty($jogos_hoje)): ?>
        <div class="secao">
            <div class="secao-titulo">
                <i class="fas fa-calendar-day"></i>
                <h2>Hoje</h2>
                <span><?= count($jogos_hoje) ?> jogos</span>
            </div>
            <div class="cards-container scroll-auto" id="container-hoje">
                <?php 
                exibirCards($jogos_hoje, 'hoje');
                // Duplicar para rolagem infinita
                exibirCards($jogos_hoje, 'hoje');
                ?>
            </div>
        </div>
        <?php endif; ?>

        <?php if (!empty($jogos_finalizados)): ?>
        <div class="secao">
            <div class="secao-titulo">
                <i class="fas fa-check-circle"></i>
                <h2>Finalizados</h2>
                <span>Resultados</span>
            </div>
            <div class="cards-container scroll-auto" id="container-finalizados">
                <?php 
                exibirCards($jogos_finalizados, 'finalizados');
                // Duplicar para rolagem infinita
                exibirCards($jogos_finalizados, 'finalizados');
                ?>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <button class="btn-topo" onclick="voltarAoTopo()" title="Voltar ao topo">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script>
        // Estado da rolagem para cada seção
        let scrollStates = {
            andamento: true,
            hoje: true,
            finalizados: true
        };

        function toggleScroll(secao) {
            const container = document.getElementById(`container-${secao}`);
            const btn = document.getElementById(`btn${secao.charAt(0).toUpperCase() + secao.slice(1)}`);
            
            scrollStates[secao] = !scrollStates[secao];
            
            if (scrollStates[secao]) {
                container.classList.add('scroll-auto');
                container.style.animationPlayState = 'running';
                btn.innerHTML = '<i class="fas fa-pause"></i> Pausar ' + (secao == 'andamento' ? 'Agora' : secao == 'hoje' ? 'Hoje' : 'Finalizados');
                btn.classList.remove('paused');
            } else {
                container.classList.remove('scroll-auto');
                container.style.animationPlayState = 'paused';
                btn.innerHTML = '<i class="fas fa-play"></i> Retomar ' + (secao == 'andamento' ? 'Agora' : secao == 'hoje' ? 'Hoje' : 'Finalizados');
                btn.classList.add('paused');
            }
        }

        // Pausar rolagem ao passar o mouse
        document.querySelectorAll('.card-jogo').forEach(card => {
            card.addEventListener('mouseenter', () => {
                const container = card.closest('.cards-container');
                const secao = container.id.replace('container-', '');
                if (scrollStates[secao]) {
                    container.style.animationPlayState = 'paused';
                }
            });
            
            card.addEventListener('mouseleave', () => {
                const container = card.closest('.cards-container');
                const secao = container.id.replace('container-', '');
                if (scrollStates[secao]) {
                    container.style.animationPlayState = 'running';
                }
            });
        });

        // Voltar ao topo
        function voltarAoTopo() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // Mostrar/esconder botão de voltar ao topo
        window.addEventListener('scroll', () => {
            const btn = document.querySelector('.btn-topo');
            if (window.scrollY > 300) {
                btn.style.display = 'flex';
            } else {
                btn.style.display = 'none';
            }
        });

        // Atualizar a cada 30 segundos
        setInterval(() => {
            location.reload();
        }, 30000);
    </script>
</body>
</html>