<?php
session_start(); // Inicia la sesión

// Define el CÓDIGO MAESTRO que tú le darás a tus usuarios manualmente.
// ¡CAMBIA ESTO POR TU CÓDIGO SECRETO! (Ej: "MIMOLDEPRO", "ESPECIAL2024", etc.)
$master_secret_code = "ESPACIOAPP2025"; 

// Guarda el código en sesión para que canva_redirect_process.php pueda verificarlo.
$_SESSION['master_secret_code'] = $master_secret_code;

// Genera un token de acceso a Canva y lo guarda en sesión
$_SESSION['canva_access_token'] = bin2hex(random_bytes(16));
$_SESSION['canva_token_timestamp'] = time(); // Guarda el momento en que se creó

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acceso Exclusivo Canva | EspacioApp</title>
    <link rel="stylesheet" href="css/style.css"> <!-- Si tienes un CSS general -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: sans-serif; text-align: center; background-color: #f0f2f5; margin: 0; color: #333; }
        
        /* ESTILO PARA LA BARRA DE NAVEGACIÓN SUPERIOR */
        .global-nav {
            display: flex;
            justify-content: space-between; /* Alinea los elementos a los extremos */
            align-items: center;
            background: #fff;
            padding: 10px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px; /* Separación del contenido principal */
        }
        .global-nav .brand {
            font-size: 1.5em;
            font-weight: bold;
            color: var(--primary);
            text-decoration: none;
        }
        .global-nav .btn-back { /* Reutilizamos la clase btn-back de tus otros archivos */
            background: none;
            border: none;
            color: #666;
            text-decoration: none;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            border-radius: 5px;
            transition: 0.2s;
        }
        .global-nav .btn-back:hover {
            background-color: #f0f0f0;
            color: var(--primary);
        }

        .container { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); display: inline-block; max-width: 500px; width: 90%; }
        h2 { color: var(--primary); font-size: 1.8em; margin-bottom: 15px; }
        p { color: #666; font-size: 1.0em; line-height: 1.5; margin-bottom: 20px; }
        
        .promo-banner {
            background: linear-gradient(45deg, var(--primary), #6c5ce7); /* Gradiente vibrante */
            border-radius: 10px;
            padding: 20px;
            margin: 25px auto;
            color: white; /* Texto blanco para contraste */
            font-size: 1em;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4); /* Sombra rosada */
            animation: pulse-glow 2s infinite; /* Animación de brillo sutil */
        }
        .promo-banner i {
            color: #ffcc00; /* Icono llamativo (amarillo dorado) */
            font-size: 2em;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        .promo-banner p {
            margin: 0;
            color: white;
            line-height: 1.4;
        }
        .promo-banner p strong {
            font-size: 1.2em;
            display: block;
            margin-bottom: 5px;
        }
        @keyframes pulse-glow {
            0% { box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4); }
            50% { box-shadow: 0 5px 25px rgba(255, 0, 128, 0.8); }
            100% { box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4); }
        }

        .code-input-section { margin-bottom: 30px; }
        .code-input-section input {
            width: 80%; max-width: 300px; padding: 15px; border: 2px solid #ddd; border-radius: 8px;
            text-align: center; font-size: 1.3em; text-transform: uppercase; font-weight: bold;
        }
        .code-input-section button {
            background: var(--primary); color: white; padding: 12px 25px; border: none; border-radius: 30px;
            font-size: 1.1em; cursor: pointer; transition: 0.3s; margin-top: 15px;
        }
        .code-input-section button:hover { background: #e00073; }

        .btn-canva { background: #00c4cc; color: white; padding: 15px 30px; border: none; border-radius: 30px; font-size: 1.2em; cursor: pointer; text-decoration: none; margin-top: 20px; }
        .btn-canva:hover { background: #00aeb5; }
        .btn-canva:disabled { background: #cccccc; cursor: not-allowed; }

        #errorMsg { color: red; margin-top: 10px; font-size: 0.9em; display: none; }
    </style>
</head>
<body>
    <!-- BARRA DE NAVEGACIÓN SUPERIOR CON BOTÓN DE INICIO -->
    <nav class="global-nav">
        <a href="index.html" class="brand">🦄 EspacioApp</a>
        <a href="index.html" class="btn-back">⬅ Ir al Inicio</a>
    </nav>

    <div class="container">
        <h2>&#127808; Acceso a Grupo Exclusivo de Canva</h2>
        
        <!-- TU PUBLICIDAD AHORA MUCHO MÁS LLAMATIVA -->
        <div class="promo-banner">
            <i class="fas fa-ruler-combined"></i>
            <p>
                <strong>¡Dile adiós a los errores de medida!</strong><br>
                En EspacioApp, creamos moldes y pósters con medidas <strong>100% EXACTAS</strong>.<br>
                ¡Tu trabajo artesanal merece la perfección!
            </p>
        </div>

        <p>Introduce el código que te hemos proporcionado para acceder a nuestra comunidad de diseño.</p>
        
        <div class="code-input-section">
            <input type="text" id="secretCodeInput" placeholder="CÓDIGO DE ACCESO" onkeyup="checkCode()">
            <p id="errorMsg"><i class="fas fa-exclamation-triangle"></i> Código incorrecto. Inténtalo de nuevo.</p>
        </div>

        <form action="canva_redirect_process.php" method="POST">
            <input type="hidden" name="canva_token" value="<?php echo $_SESSION['canva_access_token']; ?>">
            <input type="hidden" name="user_entered_code" id="userEnteredCodeHidden" value="">
            <button type="submit" id="accessCanvaBtn" class="btn-canva" disabled>&#127808; Ir al Grupo de Canva</button>
        </form>

        <p style="margin-top: 20px; font-size: 0.8em; color: #888;">Si tienes problemas para acceder, contáctanos.</p>
    </div>

    <script>
        const secretCodeInput = document.getElementById('secretCodeInput');
        const accessCanvaBtn = document.getElementById('accessCanvaBtn');
        const errorMsg = document.getElementById('errorMsg');
        const userEnteredCodeHidden = document.getElementById('userEnteredCodeHidden');

        const masterCode = "<?php echo $master_secret_code; ?>";

        function checkCode() {
            const enteredCode = secretCodeInput.value.trim().toUpperCase();
            userEnteredCodeHidden.value = enteredCode;
            
            if (enteredCode === masterCode.toUpperCase()) {
                accessCanvaBtn.disabled = false;
                errorMsg.style.display = 'none';
                secretCodeInput.style.borderColor = 'green';
            } else {
                accessCanvaBtn.disabled = true;
                secretCodeInput.style.borderColor = '#ddd';
                if (enteredCode.length > 0 && enteredCode.length >= masterCode.length / 2) {
                    errorMsg.style.display = 'block';
                    secretCodeInput.style.borderColor = 'red';
                } else {
                    errorMsg.style.display = 'none';
                }
            }
        }
    </script>
</body>
</html>
