<?php
// =============================================
// NOVO SISTEMA COMPLETO - VERSÃO RETRO FUTURISTA
// =============================================

// Configurações iniciais
date_default_timezone_set('America/Sao_Paulo');
session_start();

// Array de cores estilo retrowave/synthwave
$cores = [
    'primary' => $_SESSION['primary'] ?? '#ff00c1',  // Rosa neon
    'secondary' => $_SESSION['secondary'] ?? '#00fff9', // Ciano neon
    'tertiary' => $_SESSION['tertiary'] ?? '#8000ff', // Roxo neon
    'bg' => $_SESSION['bg'] ?? '#0a0b1a', // Azul escuro espacial
    'text' => $_SESSION['text'] ?? '#ffffff', // Branco
    'grid' => $_SESSION['grid'] ?? '#ffb347' // Laranja
];

// Salvar cores
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    foreach ($cores as $key => $value) {
        if (isset($_POST[$key])) {
            $_SESSION[$key] = $cores[$key] = $_POST[$key];
        }
    }
}

// Função para buscar dados
function buscarJogos() {
    $url = 'https://meusjogos.shop/dados_api.json';
    $cacheFile = 'cache_jogos.json';
    $tempoCache = 300; // 5 minutos
    
    if (file_exists($cacheFile) && (time() - filemtime($cacheFile)) < $tempoCache) {
        return json_decode(file_get_contents($cacheFile), true) ?: [];
    }
    
    $dados = @file_get_contents($url);
    if ($dados) {
        file_put_contents($cacheFile, $dados);
        return json_decode($dados, true) ?: [];
    }
    
    return file_exists($cacheFile) ? json_decode(file_get_contents($cacheFile), true) : [];
}

$jogos = buscarJogos();

// Data estilizada
$dias = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
$meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
$dataEstilizada = $dias[date('w')] . ' ' . date('d') . ' ' . $meses[date('n')-1] . ' ' . date('Y');
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEO FUTEBOL ⚡ 2088</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --neon-pink: <?= $cores['primary'] ?>;
            --neon-cyan: <?= $cores['secondary'] ?>;
            --neon-purple: <?= $cores['tertiary'] ?>;
            --space-blue: <?= $cores['bg'] ?>;
            --pure-white: <?= $cores['text'] ?>;
            --grid-orange: <?= $cores['grid'] ?>;
        }

        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');

        body {
            font-family: 'Rajdhani', sans-serif;
            background: var(--space-blue);
            color: var(--pure-white);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* Efeito de grade digital */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(var(--neon-cyan) 1px, transparent 1px),
                linear-gradient(90deg, var(--neon-pink) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.1;
            pointer-events: none;
            z-index: 0;
        }

        /* Partículas flutuantes */
        .particle {
            position: fixed;
            width: 2px;
            height: 2px;
            background: var(--neon-cyan);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--neon-cyan);
            opacity: 0.5;
            animation: floatParticle 20s linear infinite;
            z-index: 0;
        }

        @keyframes floatParticle {
            0% { transform: translateY(100vh) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        /* Header neon */
        .neon-header {
            text-align: center;
            margin: 40px 0;
            position: relative;
        }

        .neon-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 4rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 8px;
            position: relative;
            animation: flicker 3s infinite;
            margin-bottom: 10px;
        }

        .neon-title span {
            display: inline-block;
            animation: glitch 1s infinite;
        }

        .neon-title span:nth-child(1) { color: var(--neon-pink); animation-delay: 0.1s; }
        .neon-title span:nth-child(2) { color: var(--neon-cyan); animation-delay: 0.2s; }
        .neon-title span:nth-child(3) { color: var(--neon-purple); animation-delay: 0.3s; }
        .neon-title span:nth-child(4) { color: var(--neon-pink); animation-delay: 0.4s; }
        .neon-title span:nth-child(5) { color: var(--neon-cyan); animation-delay: 0.5s; }
        .neon-title span:nth-child(6) { color: var(--neon-purple); animation-delay: 0.6s; }

        @keyframes flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 
                0 0 5px var(--pure-white),
                0 0 10px var(--pure-white),
                0 0 20px var(--neon-pink),
                0 0 30px var(--neon-pink),
                0 0 40px var(--neon-pink),
                0 0 50px var(--neon-pink);
            }
            20%, 24%, 55% { text-shadow: none; }
        }

        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }

        .neon-date {
            font-size: 1.5rem;
            color: var(--pure-white);
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
            padding: 10px 30px;
            display: inline-block;
            border-radius: 50px;
            border: 2px solid var(--neon-cyan);
            box-shadow: 0 0 20px var(--neon-cyan);
            letter-spacing: 2px;
        }

        /* Botão config */
        .config-btn {
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            border: 2px solid var(--neon-pink);
            color: var(--pure-white);
            padding: 15px 40px;
            font-size: 1.2rem;
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 0 20px var(--neon-pink);
            letter-spacing: 2px;
            margin-bottom: 30px;
        }

        .config-btn:hover {
            background: var(--neon-pink);
            color: var(--space-blue);
            box-shadow: 0 0 40px var(--neon-pink);
            transform: scale(1.05);
        }

        /* Grid de jogos */
        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 30px;
            padding: 20px 0;
        }

        /* Card holográfico */
        .holo-card {
            background: rgba(10, 20, 30, 0.7);
            backdrop-filter: blur(15px);
            border: 2px solid transparent;
            border-radius: 30px;
            padding: 25px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s;
            animation: cardAppear 0.6s ease-out;
        }

        @keyframes cardAppear {
            from { opacity: 0; transform: translateY(50px) scale(0.9); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .holo-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan), var(--neon-purple), var(--neon-pink));
            background-size: 300% 300%;
            border-radius: 32px;
            z-index: -1;
            animation: borderGlow 6s linear infinite;
        }

        @keyframes borderGlow {
            0% { background-position: 0% 50%; opacity: 0.7; }
            50% { background-position: 100% 50%; opacity: 1; }
            100% { background-position: 0% 50%; opacity: 0.7; }
        }

        .holo-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 30px 50px rgba(0,0,0,0.6);
        }

        .holo-card:hover .team-logo {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { filter: drop-shadow(0 0 20px var(--neon-pink)); }
            50% { filter: drop-shadow(0 0 40px var(--neon-cyan)); }
        }

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

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

        .team-logo {
            width: 90px;
            height: 90px;
            object-fit: contain;
            filter: drop-shadow(0 0 15px var(--neon-purple));
            transition: all 0.3s;
        }

        .team-name {
            font-size: 1rem;
            font-weight: 700;
            margin: 10px 0;
            color: var(--pure-white);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .score {
            font-size: 2.5rem;
            font-weight: 900;
            font-family: 'Orbitron', sans-serif;
            background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px var(--neon-pink);
        }

        .vs-badge {
            font-size: 1.8rem;
            font-weight: 900;
            padding: 0 20px;
            color: var(--neon-cyan);
            text-shadow: 0 0 20px var(--neon-cyan);
        }

        /* Informações */
        .tournament {
            text-align: center;
            font-size: 1.1rem;
            padding: 12px;
            background: rgba(255,255,255,0.1);
            border-radius: 30px;
            margin: 20px 0;
            border: 1px solid rgba(255,255,255,0.2);
            color: var(--grid-orange);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .match-time {
            font-size: 2.2rem;
            font-weight: 900;
            font-family: 'Orbitron', sans-serif;
            text-align: center;
            color: var(--neon-pink);
            text-shadow: 0 0 20px var(--neon-pink);
            margin: 20px 0;
            background: rgba(0,0,0,0.3);
            padding: 10px;
            border-radius: 20px;
        }

        /* Canais cyber */
        .channels {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .channel-badge {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
            padding: 12px 25px;
            border-radius: 50px;
            border: 2px solid var(--neon-cyan);
            transition: all 0.3s;
        }

        .channel-badge:hover {
            border-color: var(--neon-pink);
            box-shadow: 0 0 30px var(--neon-pink);
            transform: scale(1.05);
        }

        .channel-badge img {
            width: 30px;
            height: 30px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        .channel-badge span {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Status */
        .match-status {
            text-align: center;
            padding: 12px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 20px;
            animation: statusPulse 2s infinite;
        }

        @keyframes statusPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        .status-final {
            background: linear-gradient(135deg, #ff0040, #b00030);
            box-shadow: 0 0 30px #ff0040;
        }

        .status-ao-vivo {
            background: linear-gradient(135deg, #00ff80, #00b050);
            box-shadow: 0 0 30px #00ff80;
        }

        .status-programado {
            background: linear-gradient(135deg, #ff8000, #b05a00);
            box-shadow: 0 0 30px #ff8000;
        }

        /* Modal cyber */
        .cyber-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            backdrop-filter: blur(10px);
        }

        .modal-content {
            background: rgba(10, 20, 30, 0.95);
            margin: 5% auto;
            padding: 40px;
            border-radius: 30px;
            width: 90%;
            max-width: 500px;
            border: 2px solid var(--neon-pink);
            box-shadow: 0 0 50px var(--neon-pink);
            position: relative;
        }

        .close-btn {
            position: absolute;
            right: 25px;
            top: 15px;
            font-size: 35px;
            cursor: pointer;
            color: var(--neon-cyan);
            transition: all 0.3s;
        }

        .close-btn:hover {
            color: var(--neon-pink);
            transform: rotate(90deg);
        }

        .modal-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            text-align: center;
            margin-bottom: 30px;
            background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .color-panel {
            background: rgba(0,0,0,0.5);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .color-label {
            display: block;
            margin: 15px 0 5px;
            color: var(--pure-white);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        input[type="color"] {
            width: 100%;
            height: 50px;
            border: 2px solid var(--neon-pink);
            border-radius: 10px;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s;
        }

        input[type="color"]:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 20px var(--neon-cyan);
        }

        .save-btn {
            background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
            color: white;
            border: none;
            padding: 18px;
            font-size: 1.3rem;
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .save-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 40px var(--neon-pink);
        }

        /* Mensagem sem jogos */
        .no-games {
            grid-column: 1 / -1;
            text-align: center;
            padding: 80px;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            border: 2px solid var(--neon-pink);
            font-size: 2rem;
            font-family: 'Orbitron', sans-serif;
            color: var(--neon-cyan);
            text-shadow: 0 0 20px var(--neon-cyan);
        }

        /* Responsivo */
        @media (max-width: 768px) {
            .neon-title { font-size: 2.5rem; }
            .games-grid { grid-template-columns: 1fr; }
            .team-logo { width: 60px; height: 60px; }
        }
    </style>
</head>
<body>
    <!-- Partículas aleatórias -->
    <?php for($i = 0; $i < 20; $i++): ?>
        <div class="particle" style="left: <?= rand(0, 100) ?>%; animation-delay: <?= rand(0, 20) ?>s;"></div>
    <?php endfor; ?>

    <div class="container">
        <!-- Header neon -->
        <div class="neon-header">
            <div class="neon-title">
                <span>N</span><span>E</span><span>O</span>
                <span>⚡</span>
                <span>F</span><span>U</span><span>T</span>
            </div>
            <div class="neon-date">⚡ <?= $dataEstilizada ?> ⚡</div>
        </div>

        <!-- Botão config -->
        <div style="text-align: center;">
            <button class="config-btn" onclick="openModal()">⚡ CONFIGURAR NUCLEO ⚡</button>
        </div>

        <!-- Modal -->
        <div id="cyberModal" class="cyber-modal">
            <div class="modal-content">
                <span class="close-btn" onclick="closeModal()">×</span>
                <h2 class="modal-title">⚡ MATRIX CORES ⚡</h2>
                <form method="POST">
                    <div class="color-panel">
                        <label class="color-label">PINK NEON</label>
                        <input type="color" name="primary" value="<?= $cores['primary'] ?>">
                        
                        <label class="color-label">CYAN NEON</label>
                        <input type="color" name="secondary" value="<?= $cores['secondary'] ?>">
                        
                        <label class="color-label">PURPLE NEON</label>
                        <input type="color" name="tertiary" value="<?= $cores['tertiary'] ?>">
                    </div>
                    
                    <div class="color-panel">
                        <label class="color-label">ESPACO AZUL</label>
                        <input type="color" name="bg" value="<?= $cores['bg'] ?>">
                        
                        <label class="color-label">GRID LARANJA</label>
                        <input type="color" name="grid" value="<?= $cores['grid'] ?>">
                    </div>
                    
                    <button type="submit" class="save-btn">💾 SALVAR</button>
                </form>
            </div>
        </div>

        <!-- Grid de jogos -->
        <div class="games-grid">
            <?php if (empty($jogos)): ?>
                <div class="no-games">
                    ⚡ SINAL NÃO ENCONTRADO ⚡<br>
                    <span style="font-size: 1rem;">NENHUM JOGO NA MATRIX</span>
                </div>
            <?php else: ?>
                <?php foreach ($jogos as $jogo): 
                    $statusClass = 'status-programado';
                    $statusTexto = strtoupper($jogo['status'] ?? 'PROGRAMADO');
                    
                    if (strpos($statusTexto, 'FIM') !== false) {
                        $statusClass = 'status-final';
                    } elseif (strpos($statusTexto, 'AO VIVO') !== false || strpos($statusTexto, 'ANDAMENTO') !== false) {
                        $statusClass = 'status-ao-vivo';
                    }
                ?>
                    <div class="holo-card">
                        <div class="match-teams">
                            <div class="team">
                                <img class="team-logo" src="<?= $jogo['img_time1_url'] ?>" alt="<?= $jogo['time1'] ?>" loading="lazy">
                                <div class="team-name"><?= $jogo['time1'] ?></div>
                                <div class="score"><?= $jogo['placar_time1'] ?></div>
                            </div>
                            
                            <div class="vs-badge">VS</div>
                            
                            <div class="team">
                                <img class="team-logo" src="<?= $jogo['img_time2_url'] ?>" alt="<?= $jogo['time2'] ?>" loading="lazy">
                                <div class="team-name"><?= $jogo['time2'] ?></div>
                                <div class="score"><?= $jogo['placar_time2'] ?></div>
                            </div>
                        </div>
                        
                        <div class="tournament">🏆 <?= $jogo['competicao'] ?></div>
                        
                        <div class="match-time">⏰ <?= $jogo['horario'] ?></div>
                        
                        <?php if (!empty($jogo['canais'])): ?>
                            <div class="channels">
                                <div class="channel-badge" data-channels='<?= json_encode($jogo['canais']) ?>'>
                                    <img src="<?= $jogo['canais'][0]['img_url'] ?>" alt="channel">
                                    <span><?= $jogo['canais'][0]['nome'] ?></span>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (!empty($jogo['status'])): ?>
                            <div class="match-status <?= $statusClass ?>">
                                <?= $jogo['status'] ?>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <script>
        // Modal functions
        function openModal() {
            document.getElementById('cyberModal').style.display = 'block';
            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            document.getElementById('cyberModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        window.onclick = function(e) {
            if (e.target == document.getElementById('cyberModal')) {
                closeModal();
            }
        }

        // Rotação de canais
        function initChannels() {
            document.querySelectorAll('.channel-badge').forEach(badge => {
                const channelsData = badge.getAttribute('data-channels');
                if (!channelsData) return;
                
                try {
                    const channels = JSON.parse(channelsData);
                    if (channels.length > 1) {
                        let currentIndex = 0;
                        
                        setInterval(() => {
                            currentIndex = (currentIndex + 1) % channels.length;
                            const channel = channels[currentIndex];
                            
                            badge.style.opacity = '0.5';
                            setTimeout(() => {
                                badge.querySelector('img').src = channel.img_url;
                                badge.querySelector('span').textContent = channel.nome;
                                badge.style.opacity = '1';
                            }, 150);
                        }, 3000);
                    }
                } catch (e) {}
            });
        }

        // Efeito de digitação no título
        function typeEffect() {
            const title = document.querySelector('.neon-title');
            if (title) {
                setInterval(() => {
                    title.style.transform = 'scale(1.01)';
                    setTimeout(() => {
                        title.style.transform = 'scale(1)';
                    }, 100);
                }, 2000);
            }
        }

        // Inicializar tudo
        document.addEventListener('DOMContentLoaded', () => {
            initChannels();
            typeEffect();
        });
    </script>
</body>
</html>