<?php
// URL da API
$api_url = 'https://meusjogos.shop/dados_api.json';

// Busca os dados da API
$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);

$jogos = [];

if ($http_code == 200 && $response) {
    $jogos = json_decode($response, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        $jogos = [];
    }
}

// Conta quantidade de jogos
$quantidade_jogos = count($jogos);

// Fundo
$fundo_url = "https://i.postimg.cc/MTC0mHJv/fut.jpg";
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meus Cards · Estilo Neon</title>
    <style>
        /* Reset absoluto */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0a0c0e;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }

        /* Wrapper principal com fundo */
        .cards-wrapper {
            width: 100%;
            max-width: 1400px;
            background-image: url('<?php echo $fundo_url; ?>');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            border-radius: 40px;
            padding: 30px 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 255, 255, 0.3);
            border: 2px solid rgba(0, 255, 255, 0.2);
        }

        /* TÍTULO NO TOPO com contador de jogos */
        .titulo-topo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .titulo-principal {
            font-size: 2.5rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: transparent;
            -webkit-text-stroke: 2px #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.7), 0 0 40px rgba(51, 255, 153, 0.5);
            background: linear-gradient(45deg, #00ffff, #33ff99);
            -webkit-background-clip: text;
            background-clip: text;
            filter: drop-shadow(0 0 15px #00ffc3);
        }
        
        .contador-jogos {
            font-size: 1.2rem;
            color: #00ffff;
            background: rgba(0, 0, 0, 0.6);
            display: inline-block;
            padding: 8px 20px;
            border-radius: 40px;
            margin-top: 10px;
            border: 1px solid #33ff99;
            backdrop-filter: blur(5px);
        }

        /* Carrossel com rolagem automática suave */
        .cards-carousel {
            max-height: 700px;
            overflow-y: auto;
            padding: 10px;
            border-radius: 30px;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE */
        }
        
        /* Esconde a scrollbar mas mantém a funcionalidade */
        .cards-carousel::-webkit-scrollbar {
            display: none;
        }

        /* Grid responsivo */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            animation: autoScroll 40s linear infinite;
        }

        /* Animação suave contínua para baixo */
        @keyframes autoScroll {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(calc(-100% + 700px));
            }
        }
        
        /* Pausa a animação quando o mouse passar por cima */
        .cards-carousel:hover .cards-grid {
            animation-play-state: paused;
        }

        /* Estilo do card transparente */
        .card-jogo {
            background: rgba(10, 20, 15, 0.25);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 2px solid rgba(0, 255, 255, 0.6);
            border-radius: 28px;
            padding: 20px 15px;
            color: white;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 255, 200, 0.4), inset 0 0 15px rgba(0, 255, 200, 0.3);
            display: flex;
            flex-direction: column;
            gap: 12px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.6);
            border-left: 6px solid #00ffc3;
            border-right: 2px solid #33ff99;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-jogo:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 255, 200, 0.6);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
            border-bottom: 1px dashed rgba(0, 255, 255, 0.5);
            padding-bottom: 8px;
            color: #aaffdd;
        }

        .competicao {
            background: rgba(0, 255, 200, 0.15);
            padding: 4px 12px;
            border-radius: 30px;
            border: 1px solid #00ffaa;
        }

        .horario {
            background: rgba(0, 0, 0, 0.6);
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid #33ff99;
            font-family: monospace;
            font-size: 1.1rem;
        }

        .status {
            align-self: flex-start;
            background: rgba(255, 70, 70, 0.2);
            border: 1px solid #ff5555;
            border-radius: 20px;
            padding: 3px 15px;
            font-size: 0.7rem;
            font-weight: bold;
            text-transform: uppercase;
        }

        .times-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .time {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 40%;
            text-align: center;
        }

        .time img {
            width: 65px;
            height: 65px;
            object-fit: contain;
            filter: drop-shadow(0 0 10px cyan);
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            padding: 5px;
            border: 2px solid #33ff99;
        }

        .time span {
            font-weight: 600;
            font-size: 0.95rem;
            background: rgba(0,0,0,0.4);
            padding: 4px 8px;
            border-radius: 30px;
            width: 100%;
            border: 1px solid #00ffff;
        }

        .vs {
            font-size: 2rem;
            font-weight: 800;
            color: #00ffff;
            text-shadow: 0 0 20px #33ff99;
            background: rgba(0, 0, 0, 0.3);
            padding: 5px 12px;
            border-radius: 60px;
            border: 2px solid #33ff99;
        }

        .canais {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            justify-content: center;
            border-top: 1px solid rgba(0, 255, 255, 0.3);
            padding-top: 12px;
        }

        .canal-item {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(0, 20, 20, 0.7);
            border-radius: 40px;
            padding: 4px 12px 4px 6px;
            border: 1px solid #00ffff;
            font-size: 0.8rem;
        }

        .canal-item img {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            object-fit: contain;
        }
        
        @media (max-width: 768px) {
            .cards-grid {
                grid-template-columns: 1fr;
            }
            
            .titulo-principal {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="cards-wrapper">
        <!-- TÍTULO COM CONTADOR DE JOGOS -->
        <div class="titulo-topo">
            <h1 class="titulo-principal">MEUS CARDS DE HOJE</h1>
            <div class="contador-jogos">
                📊 <?php echo $quantidade_jogos; ?> JOGO<?php echo $quantidade_jogos != 1 ? 'S' : ''; ?> NO TOTAL
            </div>
        </div>

        <!-- Área de rolagem automática contínua (só pra baixo) -->
        <div class="cards-carousel">
            <div class="cards-grid">
                <?php if (empty($jogos)): ?>
                    <div style="grid-column:1/-1; text-align:center; padding:60px; background:rgba(0,0,0,0.6); border-radius:50px; color:#bbffbb;">
                        ⚽ Nenhum jogo encontrado ⚽
                    </div>
                <?php else: ?>
                    <?php foreach ($jogos as $jogo): 
                        $time1 = $jogo['time1'] ?? 'Time A';
                        $time2 = $jogo['time2'] ?? 'Time B';
                        $img1 = $jogo['img_time1_url'] ?? '';
                        $img2 = $jogo['img_time2_url'] ?? '';
                        $competicao = $jogo['competicao'] ?? 'Competição';
                        $horario = $jogo['horario'] ?? '--:--';
                        $status = $jogo['status'] ?? '';
                        $canais = $jogo['canais'] ?? [];
                    ?>
                    <div class="card-jogo">
                        <div class="card-header">
                            <span class="competicao"><?php echo htmlspecialchars($competicao); ?></span>
                            <span class="horario"><?php echo htmlspecialchars($horario); ?></span>
                        </div>

                        <?php if (!empty($status)): ?>
                            <div class="status"><?php echo htmlspecialchars($status); ?></div>
                        <?php endif; ?>

                        <div class="times-container">
                            <div class="time">
                                <img src="<?php echo htmlspecialchars($img1); ?>" alt="<?php echo htmlspecialchars($time1); ?>" onerror="this.src='https://via.placeholder.com/65?text=Time'">
                                <span><?php echo htmlspecialchars($time1); ?></span>
                            </div>
                            <div class="vs">VS</div>
                            <div class="time">
                                <img src="<?php echo htmlspecialchars($img2); ?>" alt="<?php echo htmlspecialchars($time2); ?>" onerror="this.src='https://via.placeholder.com/65?text=Time'">
                                <span><?php echo htmlspecialchars($time2); ?></span>
                            </div>
                        </div>

                        <?php if (!empty($canais)): ?>
                        <div class="canais">
                            <?php foreach ($canais as $canal): 
                                $nome_canal = $canal['nome'] ?? 'Canal';
                                $img_canal = $canal['img_url'] ?? '';
                            ?>
                            <div class="canal-item">
                                <img src="<?php echo htmlspecialchars($img_canal); ?>" alt="<?php echo htmlspecialchars($nome_canal); ?>" onerror="this.src='https://via.placeholder.com/24?text=TV'">
                                <span><?php echo htmlspecialchars($nome_canal); ?></span>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</body>
</html>