<?php
// ------------------------------------------
// 1) Funções de codificação/decodificação
// ------------------------------------------
function codificarURL($url)
{
    return base64_encode($url);
}

function decodificarURL($urlCodificado)
{
    return base64_decode($urlCodificado);
}

// Redirecionamento caso acesse ?img=...
if (isset($_GET['img'])) {
    $url = decodificarURL($_GET['img']);
    header("Location: $url");
    exit;
}

$imagens = [];
$contadorImg = 0;

function ocultarLinksDeImagensNoHTML($html)
{
    global $imagens, $contadorImg;
    return preg_replace_callback(
        '/src=["\'](https:\/\/.*?)["\']/i',
        function ($matches) use (&$imagens, &$contadorImg) {
            $urlCodificado = codificarURL($matches[1]);
            $idImagem = 'img' . $contadorImg++;
            $imagens[$idImagem] = $urlCodificado;
            return 'id="' . $idImagem . '" src="#"';
        },
        $html
    );
}

// ------------------------------------------
// 2) Iniciar Buffer e Config. Timezone
// ------------------------------------------
ob_start();
date_default_timezone_set('America/Sao_Paulo');

// ------------------------------------------
// 3) Mapeamento de Dias e Meses
// ------------------------------------------
$diaSemanaMap = array(
    'Sunday'    => 'Domingo',
    'Monday'    => 'Segunda',
    'Tuesday'   => 'Terça',
    'Wednesday' => 'Quarta',
    'Thursday'  => 'Quinta',
    'Friday'    => 'Sexta',
    'Saturday'  => 'Sábado'
);

$meses = array(
    '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'
);

// ------------------------------------------
// 4) Obter Data Atual em Português
// ------------------------------------------
$dataAtual = $diaSemanaMap[date('l')] . ', ' . date('d') . ' de ' . $meses[date('F')] . ' de ' . date('Y');

// ------------------------------------------
// 5) URL do JSON com os Jogos
// ------------------------------------------
$api_url = 'https://meusjogos.shop/dados_api.json';

// Tenta obter o conteúdo do JSON
$api_json_content = @file_get_contents($api_url);

if ($api_json_content === false) {
    $jogos = []; 
} else {
    // Tenta decodificar o JSON
    $jogos = json_decode($api_json_content, true);

    // Verifica se houve erro na decodificação
    if (json_last_error() !== JSON_ERROR_NONE) {
        $jogos = [];
    }
}

// ------------------------------------------
// 6) Configurações (cores)
// ------------------------------------------
session_start();

// Cores atualizadas: Azul Neon e Branco Gelo
$color1 = '#00f2fe'; // Azul Neon mais claro
$color2 = '#0af';    // Azul Neon médio
$color3 = '#e0f2fe'; // Branco Gelo
$bgCard = '#1a1a2e'; // Fundo escuro para os cards
$bgBody = '#0a0a0f'; // Fundo ainda mais escuro para o body

if (!isset($_SERVER['HTTP_USER_AGENT'])) {
    die("Acesso negado. O código-fonte desta página está protegido.");
}
?>
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JOGOS DE HOJE</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Inter', sans-serif;
        background: url(https://i.postimg.cc/c1TYkK32/360-F-660656824-l2i6mmjh5Ik-Ed-Bxhs4anyqaxy2ojhzhp.jpg);
        color: <?php echo $color3; ?>;
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* Container principal estilo TV */
    .tv-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Alinha tudo à direita */
    }
    
    /* Header com data - alinhado à direita */
    .data-header {
        text-align: right;
        font-size: 2rem;
        font-weight: 800;
        color: <?php echo $color1; ?>;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 15px 30px;
        background: <?php echo $bgCard; ?>;
        border-left: 6px solid <?php echo $color1; ?>;
        margin-bottom: 20px;
        text-shadow: 0 0 10px <?php echo $color1; ?>;
        width: fit-content;
        align-self: flex-end;
        border-radius: 12px 0 0 12px;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: -5px 5px 15px rgba(0, 242, 254, 0.2);
    }
    
    /* Grid de cards */
    .cards-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 900px; /* Largura máxima para os cards */
        margin-left: auto; /* Alinha à direita */
    }
    
    /* Card individual - estilo da imagem */
    .jogo-card {
        background: <?php echo $bgCard; ?>;
        border-left: 6px solid <?php echo $color1; ?>;
        padding: 20px 25px;
        display: flex;
        align-items: center;
        gap: 25px;
        box-shadow: -5px 5px 20px rgba(0, 242, 254, 0.15);
        position: relative;
        min-height: 150px;
        border-radius: 16px 0 0 16px;
        transition: all 0.3s ease;
    }
    
    .jogo-card:hover {
        box-shadow: -5px 5px 25px rgba(0, 242, 254, 0.3);
        transform: translateX(-5px);
    }
    
    /* Horário */
    .horario-box {
        background: <?php echo $color1; ?>;
        color: <?php echo $bgBody; ?>;
        font-weight: 800;
        font-size: 2rem;
        padding: 12px 25px;
        min-width: 140px;
        text-align: center;
        letter-spacing: 1px;
        font-family: 'Inter', sans-serif;
        border-radius: 40px 8px 8px 40px;
        text-shadow: none;
        box-shadow: 0 0 20px <?php echo $color1; ?>;
    }
    
    /* Informações do jogo */
    .jogo-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    /* Competição */
    .competicao {
        font-size: 1.1rem;
        font-weight: 600;
        color: <?php echo $color1; ?>;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        background: rgba(0, 242, 254, 0.1);
        padding: 5px 15px;
        display: inline-block;
        width: fit-content;
        border-radius: 20px;
        border: 1px solid <?php echo $color1; ?>;
    }
    
    /* Times */
    .times-row {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .time-item {
        display: flex;
        align-items: center;
        gap: 15px;
        background: rgba(255, 255, 255, 0.03);
        padding: 8px 20px;
        min-width: 280px;
        border-radius: 40px;
    }
    
    .time-escudo {
        width: 45px;
        height: 45px;
        background: <?php echo $color3; ?>;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid <?php echo $color1; ?>;
        box-shadow: 0 0 15px <?php echo $color1; ?>;
    }
    
    .time-escudo img {
        width: 35px;
        height: 35px;
        object-fit: contain;
    }
    
    .time-nome {
        font-size: 1.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: <?php echo $color3; ?>;
    }
    
    .placar {
        font-size: 2rem;
        font-weight: 800;
        color: <?php echo $color1; ?>;
        margin-left: auto;
        padding: 0 20px;
        background: rgba(0, 242, 254, 0.1);
        border-radius: 30px;
        min-width: 70px;
        text-align: center;
        text-shadow: 0 0 10px <?php echo $color1; ?>;
    }
    
    /* VS separador */
    .vs-separator {
        font-size: 2rem;
        font-weight: 700;
        color: <?php echo $color1; ?>;
        margin: 0 10px;
        text-shadow: 0 0 10px <?php echo $color1; ?>;
    }
    
    /* Canais */
    .canais-box {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }
    
    .canal-item {
        background: <?php echo $color1; ?>;
        color: <?php echo $bgBody; ?>;
        padding: 6px 20px;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 30px;
        box-shadow: 0 0 15px <?php echo $color1; ?>;
    }
    
    .canal-item img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        background: #fff;
        border-radius: 4px;
    }
    
    /* Status */
    .status-indicator {
        position: absolute;
        top: -10px;
        right: 20px;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 6px 20px;
        background: <?php echo $color1; ?>;
        color: <?php echo $bgBody; ?>;
        letter-spacing: 1.5px;
        border-radius: 30px;
        box-shadow: 0 0 20px <?php echo $color1; ?>;
    }
    
    .status-indicator.ao-vivo {
        background: #ff3366;
        color: #fff;
        animation: piscar 1s infinite;
        box-shadow: 0 0 20px #ff3366;
    }
    
    .status-indicator.finalizado {
        background: #666;
        color: <?php echo $color3; ?>;
        box-shadow: none;
    }
    
    @keyframes piscar {
        0% { opacity: 1; }
        50% { opacity: 0.7; }
        100% { opacity: 1; }
    }
    
    /* Card finalizado */
    .jogo-card.finalizado {
        opacity: 0.9;
        border-left-color: #666;
    }
    
    .jogo-card.finalizado .placar {
        color: #999;
    }
    
    /* Scroll indicator */
    .scroll-indicator {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: <?php echo $color1; ?>;
        color: <?php echo $bgBody; ?>;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        font-weight: bold;
        z-index: 1000;
        cursor: pointer;
        border: 3px solid <?php echo $color3; ?>;
        box-shadow: 0 0 30px <?php echo $color1; ?>;
        transition: all 0.3s ease;
    }
    
    .scroll-indicator:hover {
        transform: scale(1.1);
    }
    
    /* Pause indicator */
    .pause-indicator {
        position: fixed;
        bottom: 20px;
        left: 20px;
        background: <?php echo $color1; ?>;
        color: <?php echo $bgBody; ?>;
        padding: 12px 30px;
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 1000;
        display: none;
        border: 3px solid <?php echo $color3; ?>;
        letter-spacing: 2px;
        border-radius: 40px;
        box-shadow: 0 0 30px <?php echo $color1; ?>;
    }
    
    /* No games */
    .no-games {
        text-align: center;
        font-size: 3rem;
        font-weight: 800;
        color: <?php echo $color1; ?>;
        padding: 60px;
        text-transform: uppercase;
        letter-spacing: 5px;
        border: 3px solid <?php echo $color1; ?>;
        background: <?php echo $bgCard; ?>;
        border-radius: 20px;
        box-shadow: 0 0 30px <?php echo $color1; ?>;
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
        .tv-container {
            align-items: center;
        }
        
        .data-header {
            align-self: center;
            text-align: center;
            border-left: none;
            border-bottom: 6px solid <?php echo $color1; ?>;
            border-radius: 12px 12px 0 0;
        }
        
        .cards-grid {
            margin-left: 0;
            max-width: 100%;
        }
        
        .jogo-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
            border-radius: 16px;
            border-left: none;
            border-top: 6px solid <?php echo $color1; ?>;
        }
        
        .horario-box {
            width: 100%;
            font-size: 1.8rem;
            border-radius: 40px;
        }
        
        .times-row {
            flex-direction: column;
            width: 100%;
        }
        
        .time-item {
            width: 100%;
        }
        
        .vs-separator {
            display: none;
        }
        
        .data-header {
            font-size: 1.8rem;
        }
        
        .status-indicator {
            top: 20px;
            right: 20px;
        }
    }
</style>
</head>
<body>
    <div class="scroll-indicator" id="scrollIndicator" onclick="toggleScroll()">⬇️</div>
    <div class="pause-indicator" id="pauseIndicator">⏸️ PAUSE</div>

    <div class="tv-container">
        <div class="data-header">
            <?php echo $dataAtual; ?>
        </div>

        <div class="cards-grid" id="cardsGrid">
            <?php if (empty($jogos)) : ?>
                <div class="no-games">
                    ⚽ NENHUM JOGO HOJE ⚽
                </div>
            <?php else : ?>
                <?php 
                // Ordenar jogos por horário
                usort($jogos, function($a, $b) {
                    return strcmp($a['horario'] ?? '00:00', $b['horario'] ?? '00:00');
                });
                
                foreach ($jogos as $jogo) : 
                    $status = strtoupper(trim($jogo['status'] ?? ''));
                    $isAoVivo = strpos($status, 'AO VIVO') !== false || strpos($status, '1º TEMPO') !== false || strpos($status, '2º TEMPO') !== false;
                    $isFinalizado = strpos($status, 'FIM DE JOGO') !== false || strpos($status, 'ENCERRADO') !== false;
                    
                    // Formatar horário
                    $horario = $jogo['horario'] ?? '--:--';
                    
                    // Determinar classe do card
                    $cardClass = 'jogo-card';
                    $statusClass = '';
                    $statusText = '';
                    
                    if ($isAoVivo) {
                        $cardClass .= ' ao-vivo';
                        $statusClass = 'ao-vivo';
                        $statusText = '🔴 EM ANDAMENTO';
                    } elseif ($isFinalizado) {
                        $cardClass .= ' finalizado';
                        $statusClass = 'finalizado';
                        $statusText = '✅ FINALIZADO';
                    }
                ?>
                <div class="<?php echo $cardClass; ?>">
                    
                    <div class="horario-box">
                        <?= $horario ?>
                    </div>
                    
                    <div class="jogo-info">
                        <div class="competicao">
                            <?= strtoupper($jogo['competicao'] ?? 'SEM COMPETIÇÃO'); ?>
                        </div>
                        
                        <div class="times-row">
                            <!-- Time 1 -->
                            <div class="time-item">
                                <div class="time-escudo">
                                    <img src="<?= $jogo['img_time1_url'] ?? '#'; ?>" alt="<?= $jogo['time1'] ?? ''; ?>">
                                </div>
                                <span class="time-nome"><?= strtoupper($jogo['time1'] ?? 'TIME 1'); ?></span>
                                <span class="placar"><?= $jogo['placar_time1'] ?? '0'; ?></span>
                            </div>
                            
                            <span class="vs-separator">VS</span>
                            
                            <!-- Time 2 -->
                            <div class="time-item">
                                <div class="time-escudo">
                                    <img src="<?= $jogo['img_time2_url'] ?? '#'; ?>" alt="<?= $jogo['time2'] ?? ''; ?>">
                                </div>
                                <span class="time-nome"><?= strtoupper($jogo['time2'] ?? 'TIME 2'); ?></span>
                                <span class="placar"><?= $jogo['placar_time2'] ?? '0'; ?></span>
                            </div>
                        </div>
                        
                        <!-- Canais -->
                        <div class="canais-box">
                            <?php if (!empty($jogo['canais'])) : ?>
                                <?php foreach (array_slice($jogo['canais'], 0, 3) as $canal) : ?>
                                <div class="canal-item">
                                    <?php if (!empty($canal['img_url'])) : ?>
                                    <img src="<?= $canal['img_url']; ?>" alt="<?= $canal['nome']; ?>">
                                    <?php endif; ?>
                                    <span><?= strtoupper($canal['nome']); ?></span>
                                </div>
                                <?php endforeach; ?>
                            <?php else : ?>
                                <div class="canal-item">
                                    <span>SEM TRANSMISSÃO</span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <?php if (!empty($statusText)) : ?>
                        <div class="status-indicator <?php echo $statusClass; ?>"><?php echo $statusText; ?></div>
                    <?php endif; ?>
                    
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <script>
        // ==================== ROLAGEM AUTOMÁTICA ====================
        class AutoScroll {
            constructor() {
                this.container = document.documentElement;
                this.direction = 1;
                this.animationFrame = null;
                this.scrollSpeed = 0.8;
                this.isPaused = false;
                this.setupEvents();
                this.start();
                this.updateScrollIndicator();
            }
            
            setupEvents() {
                document.addEventListener('mousedown', () => this.togglePause(true));
                document.addEventListener('mouseup', () => this.togglePause(false));
                document.addEventListener('touchstart', () => this.togglePause(true));
                document.addEventListener('touchend', () => this.togglePause(false));
                
                let wheelTimeout;
                document.addEventListener('wheel', () => {
                    this.stop();
                    clearTimeout(wheelTimeout);
                    wheelTimeout = setTimeout(() => {
                        if (!this.isPaused) {
                            this.start();
                        }
                    }, 2000);
                }, { passive: true });
                
                document.addEventListener('keydown', (e) => {
                    if (e.code === 'Space') {
                        e.preventDefault();
                        this.togglePause(!this.isPaused);
                    }
                });
            }
            
            togglePause(state) {
                this.isPaused = state;
                if (state) {
                    this.stop();
                    document.getElementById('pauseIndicator').style.display = 'block';
                } else {
                    this.start();
                    document.getElementById('pauseIndicator').style.display = 'none';
                }
                this.updateScrollIndicator();
            }
            
            animate() {
                if (this.isPaused) return;
                
                const maxScroll = this.container.scrollHeight - this.container.clientHeight;
                
                if (this.container.scrollTop >= maxScroll - 10 && this.direction === 1) {
                    this.direction = -1;
                    this.updateScrollIndicator();
                } else if (this.container.scrollTop <= 10 && this.direction === -1) {
                    this.direction = 1;
                    this.updateScrollIndicator();
                }
                
                this.container.scrollBy({
                    top: this.scrollSpeed * this.direction,
                    behavior: 'auto'
                });
                
                this.animationFrame = requestAnimationFrame(() => this.animate());
            }
            
            start() {
                if (!this.animationFrame && !this.isPaused) {
                    this.animationFrame = requestAnimationFrame(() => this.animate());
                }
            }
            
            stop() {
                if (this.animationFrame) {
                    cancelAnimationFrame(this.animationFrame);
                    this.animationFrame = null;
                }
            }
            
            updateScrollIndicator() {
                const indicator = document.getElementById('scrollIndicator');
                if (this.isPaused) {
                    indicator.innerHTML = '▶️';
                    indicator.style.background = '#ff3366';
                } else {
                    indicator.innerHTML = this.direction === 1 ? '⬇️' : '⬆️';
                    indicator.style.background = '<?php echo $color1; ?>';
                }
            }
            
            toggle() {
                this.togglePause(!this.isPaused);
            }
        }

        function toggleScroll() {
            if (window.autoScrollInstance) {
                window.autoScrollInstance.toggle();
            }
        }
        
        // Bloquear clique direito
        document.addEventListener("contextmenu", (e => e.preventDefault()));
        
        // ==================== INICIALIZAÇÃO ====================
        document.addEventListener('DOMContentLoaded', () => {
            window.autoScrollInstance = new AutoScroll();
            
            // Atualizar indicador de rolagem quando o usuário scrollar manualmente
            window.addEventListener('scroll', () => {
                if (window.autoScrollInstance && !window.autoScrollInstance.isPaused) {
                    const maxScroll = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                    const currentScroll = window.scrollY;
                    
                    if (currentScroll >= maxScroll - 50) {
                        window.autoScrollInstance.direction = -1;
                    } else if (currentScroll <= 50) {
                        window.autoScrollInstance.direction = 1;
                    }
                    
                    window.autoScrollInstance.updateScrollIndicator();
                }
            });
        });
    </script>
</body>
</html>
<?php ob_end_flush(); ?>