<?php 
// PROTECCIÓN DE ACCESO DIRECTO AL INDEX
if ( !isset($_SERVER['HTTP_REFERER']) || empty($_SERVER['HTTP_REFERER'])) {
    header("HTTP/1.1 403 Forbidden");
    exit("Acceso denegado.");
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title id="title-tag"><?=htmlspecialchars($data['nombre_radio']) ?></title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="<?= $data['color_primario'] ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="https://tipicord.net/nuevo/style.php">
    
    <style> 
    :root {
        --color-principal: <?=$data['color_primario'] ?>;
        --color-texto: <?=$data['color_secundario'] ?>;
        --color-pie: <?=$data['color_fondo'] ?>;
    }

    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
        background-color: #0a0a0a;
        color: var(--color-texto) !important;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Colores generales de texto */
    h1, h2, p, span, i, .radio-name, .radio-slogan {
        color: var(--color-texto) !important;
    }

    .separator {
        background: var(--color-principal) !important;
        box-shadow: 0 0 15px var(--color-principal);
        height: 2px;
        width: 80%;
        margin: 20px auto;
    }

    /* FOOTER CORREGIDO */
    footer {
        background-color: var(--color-pie) !important;
        border-top: 2px solid var(--color-principal);
        padding: 30px 0;
        text-align: center;
        width: 100%;
    }

    footer p {
        margin: 0;
        font-size: 14px;
        color: var(--color-texto) !important;
    }

    footer a {
        color: var(--color-principal) !important; /* Forza el color naranja */
        text-decoration: none !important;
        font-weight: bold;
        transition: 0.3s ease;
    }

    footer a:hover {
        color: #ffffff !important; /* Cambio a blanco al pasar el mouse */
        text-decoration: underline !important;
    }

    /* MODAL DE BIOGRAFÍA */
    .bio-modal {
        display: none;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background: rgba(0, 0, 0, 0.95);
        align-items: center;
        justify-content: center;
    }

    .bio-content {
        background: #151515;
        border: 2px solid var(--color-principal);
        padding: 30px;
        border-radius: 20px;
        width: 90%;
        max-width: 450px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .bio-text {
        width: 100%;
        overflow-y: auto;
        text-align: justify;
        line-height: 1.6;
        color: var(--color-texto);
        white-space: pre-line;
        margin-top: 15px;
    }

    .bio-text::-webkit-scrollbar { width: 5px; }
    .bio-text::-webkit-scrollbar-thumb {
        background: var(--color-principal);
        border-radius: 10px;
    }

    .close-bio {
        position: absolute;
        top: 10px;
        right: 15px;
        color: var(--color-principal);
        font-size: 30px;
        cursor: pointer;
    }

    .bio-img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        border: 2px solid var(--color-principal);
    }

    .btn-play {
        background: var(--color-principal) !important;
        border: none;
        cursor: pointer;
    }

    .player-card {
        border: 2px solid var(--color-principal) !important;
    }

    .img-button {
        transition: transform 0.2s;
    }

    .img-button:hover {
        transform: scale(1.05);
    }
    </style>
</head>
<body>

<main class="main-container">
    <div class="row-top">
        <article class="player-card">
            <nav class="player-socials">
                <a href="javascript:void(0)" onclick="toggleBio()"><i class="fas fa-user-circle"></i></a>
                <a href="<?= $data['facebook'] ?>" target="_blank"><i class="fab fa-facebook"></i></a>
                <a href="<?= $data['instagram'] ?>" target="_blank"><i class="fab fa-instagram"></i></a>
                <a href="https://wa.me/<?= $data['whatsapp'] ?>" target="_blank"><i class="fab fa-whatsapp"></i></a>
                <a href="<?= $data['tiktok'] ?>" target="_blank"><i class="fa-brands fa-tiktok"></i></a>
            </nav>

            <div class="player-logo" style="background-image: url('<?= $data['logo_player'] ?>');"></div>
            <h1><?=htmlspecialchars($data['nombre_radio']) ?></h1>
            <p><?=htmlspecialchars($data['slogan']) ?></p>

            <div class="player-controls-row">
                <div class="btn-side"><i class="fas fa-backward"></i></div>
                <button class="btn-play" onclick="togglePlay()">
                    <i id="playIcon" class="fas fa-play"></i>
                </button>
                <div class="btn-side"><i class="fas fa-forward"></i></div>
            </div>

            <div class="live-indicator"><span class="dot">●</span> EN VIVO</div>
        </article>

        <header class="main-logo">
            <img src="<?= $data['logo_lado'] ?>" alt="Logo">
        </header>
    </div>

    <div class="separator"></div>

    <section class="row-bottom">
        <a href="https://wa.me/<?= $data['whatsapp'] ?>" target="_blank">
            <img src="https://tipicord.net/ritmoymamboradio/assets/img/whatapp.webp" class="img-button">
        </a>
        <a href="<?= $data['playstore'] ?>" target="_blank">
            <img src="https://tipicord.net/ritmoymamboradio/assets/img/1playstore.webp" class="img-button">
        </a>
    </section>
</main>

<div id="bioModal" class="bio-modal" onclick="if(event.target == this) toggleBio()">
    <div class="bio-content">
        <span class="close-bio" onclick="toggleBio()">&times;</span>
        <div class="bio-img" style="background-image: url('<?= $data['logo_player'] ?>');"></div>
        <h2 style="margin: 15px 0 5px 0;">Sobre Nosotros</h2>
        <div class="bio-text"><?=nl2br(htmlspecialchars($data['biografia'])) ?></div>
    </div>
</div>

<footer>
    <p>
        © 2026 <strong><?=htmlspecialchars($data['nombre_radio']) ?></strong> | 
        <a href="https://stmundial.com/" target="_blank">Stmundial.com</a>
    </p>
</footer>

<script>
    // Bloqueo de click derecho y teclas de inspección
    document.addEventListener('contextmenu', event => event.preventDefault());
    document.onkeydown = function(e) {
        if (e.keyCode == 123) return false;
        if (e.ctrlKey && e.shiftKey && (e.keyCode == 73 || e.keyCode == 74 || e.keyCode == 67)) return false;
        if (e.ctrlKey && (e.keyCode == 85 || e.keyCode == 83)) return false;
    };

    function toggleBio() {
        const modal = document.getElementById('bioModal');
        const isVisible = modal.style.display === 'flex';
        modal.style.display = isVisible ? 'none' : 'flex';
        document.body.style.overflow = isVisible ? 'auto' : 'hidden';
    }
</script>

<script src="https://tipicord.net/nuevo/player.php"></script>

</body>
</html>