<?php
include 'includes/config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $donacion_id = $_POST['donacion_id'];
    $codigo_transaccion = $_POST['codigo_transaccion'];
    $confirmar = $_POST['confirmar'];
    
    // Actualizar estado de la donación
    if ($confirmar == 'si') {
        $nuevo_estado = 'completada';
        
        // Obtener información del ítem para mensaje personalizado
        $sql_item = "SELECT i.id as item_id, i.nombre as item_nombre FROM donaciones d 
                    JOIN items i ON d.item_id = i.id 
                    WHERE d.id = ? AND d.codigo_transaccion = ?";
        $stmt_item = $pdo->prepare($sql_item);
        $stmt_item->execute([$donacion_id, $codigo_transaccion]);
        $item_info = $stmt_item->fetch(PDO::FETCH_ASSOC);
        
        // MENSAJES PERSONALIZADOS SEGÚN EL ÍTEM - PARTE SUPERIOR
        $mensajes_personalizados = [
            1 => "¡Gracias por tu donación!",
            2 => "¡Gracias por tu donación!",
            3 => "¡Gracias por tu donación!",
            4 => "¡Gracias por tu donación!",
            5 => "¡Gracias por tu donación!",
            6 => "¡Gracias por tu donación!",
            7 => "¡Gracias por tu donación!",
            8 => "¡Gracias por tu donación!",
            9 => "¡Gracias por tu donación!",
            10 => "¡Gracias por tu donación!",
            11 => "¡Gracias por tu donación!",
            12 => "¡Gracias por tu donación!",
            13 => "¡Gracias por tu donación!",
            14 => "¡Gracias por tu donación!",
            15 => "¡Gracias por tu donación!",
            16 => "¡Gracias por tu donación!"
        ];
        
        // MENSAJES PERSONALIZADOS SEGÚN EL ÍTEM - PARTE INFERIOR (LARGA) - ESTILO POEMA
        $mensajes_largos = [
            1 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            2 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            3 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            4 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            5 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            6 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            7 => "Tu apoyo brinda abrigo, protección y esperanza<br>
                 a niñas, niños y adolescentes en situación de vulnerabilidad.<br>
                 <em>Conoce más: adra.org.pe</em>",
            8 => "Con tu ayuda recolectamos alimentos y lo llevamos a <br>
                 ollas comunes, comedores y poblaciones vulnerables <br>
                 <em>Conoce más: adra.org.pe</em>",
            9 => "Con tu ayuda recolectamos alimentos y lo llevamos a <br>
                 ollas comunes, comedores y poblaciones vulnerables <br>
                 <em>Conoce más: adra.org.pe</em>",
            10 => "Con tu ayuda recolectamos alimentos y lo llevamos a <br>
                 ollas comunes, comedores y poblaciones vulnerables <br>
                 <em>Conoce más: adra.org.pe</em>",
            11 => "Con tu ayuda recolectamos alimentos y lo llevamos a <br>
                 ollas comunes, comedores y poblaciones vulnerables <br>
                 <em>Conoce más: adra.org.pe</em>",
            12 => "Tu contribución llevará calor, seguridad y una vivienda digna<br>
                  a una familia que enfrenta el frio extremo<br>
                  <em>Conoce más: adra.org.pe</em>",
            13 => "Tu contribución llevará calor, seguridad y una vivienda digna<br>
                  a una familia que enfrenta el frio extremo<br>
                  <em>Conoce más: adra.org.pe</em>",
            14 => "Tu contribución llevará calor, seguridad y una vivienda digna<br>
                  a una familia que enfrenta el frio extremo<br>
                  <em>Conoce más: adra.org.pe</em>",
            15 => "Tu contribución llevará calor, seguridad y una vivienda digna<br>
                  a una familia que enfrenta el frio extremo<br>
                  <em>Conoce más: adra.org.pe</em>",
            16 => "Tu contribución llevará calor, seguridad y una vivienda digna<br>
                  a una familia que enfrenta el frio extremo<br>
                  <em>Conoce más: adra.org.pe</em>"
        ];
        
        // Obtener mensajes según el ítem
        $item_id = $item_info['item_id'];
        $mensaje = isset($mensajes_personalizados[$item_id]) 
            ? $mensajes_personalizados[$item_id] 
            : "¡Gracias por tu generosa donación!";
        
        $mensaje_largo = isset($mensajes_largos[$item_id]) 
            ? $mensajes_largos[$item_id] 
            : "Tu apoyo transforma vidas y construye un futuro mejor.<br><em>Conoce más: adra.org.pe</em>";
        
        $clase_alerta = "text-success";
        $mostrar_confetti = true;
        $tipo_animacion = 'confetti';
        $segundos_redireccion = 8; // 8 segundos para pago exitoso
    } else {
        $nuevo_estado = 'fallida';
        $mensaje = "No se pudo completar tu donación";
        $mensaje_largo = "Lo sentimos, no pudimos procesar tu donación en este momento.<br>Por favor, intenta nuevamente o contacta con nuestro soporte.";
        $clase_alerta = "text-danger";
        $mostrar_confetti = false;
        $tipo_animacion = 'lluvia';
        $segundos_redireccion = 5; // 5 segundos para pago fallido
    }
    
    // Actualizar estado en la base de datos
    $sql = "UPDATE donaciones SET estado = ? WHERE id = ? AND codigo_transaccion = ?";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$nuevo_estado, $donacion_id, $codigo_transaccion]);
    
    // Obtener información de la donación CON IMAGEN
    $sql = "SELECT d.*, i.nombre as item_nombre, i.tipo as item_tipo, i.imagen as item_imagen 
            FROM donaciones d 
            JOIN items i ON d.item_id = i.id 
            WHERE d.id = ?";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$donacion_id]);
    $donacion = $stmt->fetch(PDO::FETCH_ASSOC);
} else {
    header("Location: index.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agradecimiento - ADRA</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- Google Fonts para estilo poético -->
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap" rel="stylesheet">
    <style>
        /* ========================================== */
        /* VARIABLES DE COLORES - PALETA OFICIAL ADRA */
        /* ========================================== */
        :root {
            --adra-red: #D50032;           /* CHRISTMAS RED */
            --adra-deep-red: #992A31;      /* CHRISTMAS DEEP RED */
            --adra-cream: #F8F0E4;         /* CREAM */
            --adra-gold: #C1A01E;          /* GOLD 20 */
            --adra-pale-blue: #E6F5FA;     /* PALE BLUE */
            --adra-white: #FFFFFF;         /* WHITE */
            --text-dark: #333333;
            --text-medium: #666666;
        }

        /* ========================================== */
        /* RESET Y CONFIGURACIÓN BASE */
        /* ========================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        /* ========================================== */
        /* BODY - FONDO CON IMAGEN NAVIDEÑA */
        /* ========================================== */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: url('fondo-navidad.jpeg') no-repeat center center fixed;
            background-size: cover;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            position: relative;
        }

        /* ========================================== */
        /* CANVAS DE ANIMACIONES */
        /* ========================================== */
        #animation-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            pointer-events: none;
        }

        /* ========================================== */
        /* CONTENEDOR PRINCIPAL - TAMAÑO ORIGINAL */
        /* ========================================== */
        .thanks-container {
            width: 100%;
            max-width: 400px; /* TAMAÑO ORIGINAL */
            height: 100%;
            max-height: 98vh; /* TAMAÑO ORIGINAL */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 50;
        }

        /* ========================================== */
        /* TARJETA DE AGRADECIMIENTO - TAMAÑO ORIGINAL */
        /* ========================================== */
        .thanks-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px; /* TAMAÑO ORIGINAL */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* TAMAÑO ORIGINAL */
            width: 100%;
            border: 2px solid var(--adra-deep-red); /* TAMAÑO ORIGINAL */
            display: flex;
            flex-direction: column;
            height: auto;
            max-height: 98vh; /* TAMAÑO ORIGINAL */
            overflow: hidden;
            position: relative;
            z-index: 50;
            backdrop-filter: blur(3px); /* TAMAÑO ORIGINAL */
        }

        @supports not (backdrop-filter: blur(3px)) {
            .thanks-card {
                background: rgba(255, 255, 255, 0.98);
            }
        }

        /* ========================================== */
        /* ENCABEZADO CON GRADIENTE ADRA - TAMAÑO ORIGINAL */
        /* ========================================== */
        .thanks-header {
            background: linear-gradient(135deg, 
                var(--adra-deep-red) 0%, 
                var(--adra-red) 50%, 
                var(--adra-gold) 100%
            );
            color: var(--adra-white);
            padding: 8px 12px; /* TAMAÑO ORIGINAL */
            text-align: center;
            border-bottom: 2px solid var(--adra-deep-red); /* TAMAÑO ORIGINAL */
            flex-shrink: 0;
        }

        .thanks-header h1 {
            font-size: 0.95rem; /* TAMAÑO ORIGINAL */
            font-weight: 800;
            margin-bottom: 0;
        }

        /* ========================================== */
        /* CUERPO DEL AGRADECIMIENTO - TAMAÑO ORIGINAL */
        /* ========================================== */
        .thanks-body {
            padding: 10px; /* TAMAÑO ORIGINAL */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex: 1;
        }

        .content-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }

        /* Contenido que debe estar por delante de las animaciones */
        .content-above-animation {
            position: relative;
            z-index: 60;
        }

        /* ========================================== */
        /* LOGO DE AGRADECIMIENTO - SIN ANIMACIÓN */
        /* ========================================== */
        .icon-section {
            text-align: center;
            margin-bottom: 8px; /* TAMAÑO ORIGINAL */
            flex-shrink: 0;
        }

        .thanks-icon {
            width: 50px; /* TAMAÑO ADECUADO */
            height: 50px; /* TAMAÑO ADECUADO */
            margin: 0 auto 6px auto; /* TAMAÑO ORIGINAL */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 70;
            /* SIN ANIMACIÓN - SOLO ESTÁTICO */
        }

        .thanks-icon img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        /* ========================================== */
        /* MENSAJE DE AGRADECIMIENTO PRINCIPAL - SIN CUADRO */
        /* ========================================== */
        .message-section {
            text-align: center;
            margin-bottom: 8px; /* TAMAÑO ORIGINAL */
            flex-shrink: 0;
            position: relative;
            z-index: 65;
        }

        .thanks-message {
            color: var(--adra-red);
            font-weight: 700;
            margin-bottom: 0;
            font-size: 1rem; /* TAMAÑO ORIGINAL */
            line-height: 1.2;
            animation: text-bounce 1.2s infinite alternate;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .text-success {
            color: #155724 !important;
        }

        .text-danger {
            color: #721c24 !important;
        }

        /* Animación de texto que salta */
        @keyframes text-bounce {
            0% { 
                transform: translateY(0);
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            50% {
                transform: translateY(-2px);
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            }
            100% { 
                transform: translateY(0);
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
        }

        /* ========================================== */
        /* INFORMACIÓN DEL BENEFICIARIO - TAMAÑO ORIGINAL */
        /* ========================================== */
        .beneficiary-info {
            text-align: center;
            margin-bottom: 8px; /* TAMAÑO ORIGINAL */
            padding-bottom: 6px; /* TAMAÑO ORIGINAL */
            border-bottom: 1px solid var(--adra-cream); /* TAMAÑO ORIGINAL */
            flex-shrink: 0;
        }

        /* ===== IMAGEN PROTAGONISTA GIGANTE ===== */
        .beneficiary-image {
            width: 130px; /* TAMAÑO ORIGINAL */
            height: 130px; /* TAMAÑO ORIGINAL */
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--adra-red); /* TAMAÑO ORIGINAL */
            margin: 0 auto 6px auto; /* TAMAÑO ORIGINAL */
            box-shadow: 0 6px 15px rgba(213, 0, 50, 0.3); /* TAMAÑO ORIGINAL */
            background: linear-gradient(135deg, 
                var(--adra-cream), 
                var(--adra-pale-blue)
            );
        }

        .beneficiary-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .beneficiary-image i {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem; /* TAMAÑO ORIGINAL */
            color: var(--adra-red);
        }

        .beneficiary-details {
            padding: 0 10px; /* TAMAÑO ORIGINAL */
        }

        .beneficiary-details p {
            color: var(--text-medium);
            margin-bottom: 4px; /* TAMAÑO ORIGINAL */
            font-size: 0.7rem; /* TAMAÑO ORIGINAL */
            line-height: 1.2;
        }

        .beneficiary-details h3 {
            color: var(--adra-red);
            font-weight: 700;
            margin-bottom: 4px; /* TAMAÑO ORIGINAL */
            font-size: 0.95rem; /* TAMAÑO ORIGINAL */
            line-height: 1.1;
        }

        /* ========================================== */
        /* MENSAJE LARGO PERSONALIZADO - ESTILO POEMA */
        /* ========================================== */
        .poetic-message-section {
            text-align: center;
            margin-bottom: 10px; /* Un poco más de espacio */
            padding: 12px 8px;
            flex-shrink: 0;
            position: relative;
        }

        .poetic-text {
            font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
            font-size: 0.85rem;
            line-height: 1.6;
            color: var(--text-dark);
            text-align: center;
            font-style: italic;
            letter-spacing: 0.3px;
            position: relative;
            padding: 0 5px;
        }

        .poetic-text::before,
        .poetic-text::after {
            content: "❝";
            font-size: 1.5rem;
            color: var(--adra-gold);
            position: absolute;
            opacity: 0.7;
        }

        .poetic-text::before {
            top: -8px;
            left: 0;
        }

        .poetic-text::after {
            content: "❞";
            bottom: -12px;
            right: 0;
        }

        .poetic-text em {
            font-family: 'Dancing Script', cursive;
            font-size: 0.9rem;
            color: var(--adra-red);
            font-style: normal;
            font-weight: 600;
            margin-top: 8px;
            display: block;
        }

        /* Para mensajes de error (cuando confirmar = 'no') */
        .error-message {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 0.75rem;
            line-height: 1.4;
            color: var(--text-dark);
            text-align: center;
            padding: 10px;
            background-color: rgba(248, 215, 218, 0.2);
            border-radius: 5px;
            border-left: 2px solid #f5c6cb;
        }

        /* ========================================== */
        /* BOTÓN DE VOLVER - TAMAÑO ORIGINAL */
        /* ========================================== */
        .buttons-section {
            display: flex;
            flex-direction: column;
            gap: 6px; /* TAMAÑO ORIGINAL */
            margin-bottom: 6px; /* TAMAÑO ORIGINAL */
            flex-shrink: 0;
        }

        .home-btn {
            background: linear-gradient(135deg, 
                var(--adra-red) 0%, 
                var(--adra-deep-red) 100%
            );
            color: var(--adra-white);
            border: none;
            border-radius: 6px; /* TAMAÑO ORIGINAL */
            padding: 10px; /* TAMAÑO ORIGINAL */
            font-size: 0.8rem; /* TAMAÑO ORIGINAL */
            font-weight: 700;
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px rgba(213, 0, 50, 0.3); /* TAMAÑO ORIGINAL */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            position: relative;
            z-index: 60;
            gap: 4px; /* TAMAÑO ORIGINAL */
            cursor: pointer;
        }

        .home-btn:hover {
            background: linear-gradient(135deg, 
                var(--adra-deep-red) 0%, 
                var(--adra-red) 100%
            );
            color: var(--adra-white);
        }

        .home-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .home-btn.processing {
            background: linear-gradient(135deg, 
                #6c757d 0%, 
                #495057 100%
            );
        }

        .home-btn .btn-text {
            transition: opacity 0.3s ease;
        }

        .home-btn .processing-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px; /* TAMAÑO ORIGINAL */
        }

        .home-btn.processing .btn-text {
            opacity: 0;
        }

        .home-btn.processing .processing-text {
            opacity: 1;
        }

        /* ========================================== */
        /* TEXTO DE AYUDA - TAMAÑO ORIGINAL */
        /* ========================================== */
        .help-text {
            text-align: center;
            margin-top: 6px; /* TAMAÑO ORIGINAL */
            flex-shrink: 0;
            position: relative;
            z-index: 60;
        }

        .help-text p {
            color: var(--text-medium);
            font-size: 0.65rem; /* TAMAÑO ORIGINAL */
            margin-bottom: 0;
        }

        /* ========================================== */
        /* RESPONSIVE - TABLETS */
        /* ========================================== */
        @media (min-width: 768px) {
            body {
                padding: 15px;
            }

            .thanks-card {
                max-width: 450px;
                border-radius: 12px;
            }

            .thanks-icon {
                width: 60px;
                height: 60px;
            }

            .beneficiary-image {
                width: 160px;
                height: 160px;
            }

            .beneficiary-image i {
                font-size: 4.5rem;
            }

            .poetic-text {
                font-size: 0.95rem;
                line-height: 1.7;
            }

            .poetic-text em {
                font-size: 1rem;
            }

            .thanks-message {
                font-size: 1.1rem;
            }
        }

        /* ========================================== */
        /* RESPONSIVE - MÓVILES PEQUEÑOS */
        /* ========================================== */
        @media (max-width: 360px) {
            .beneficiary-image {
                width: 110px;
                height: 110px;
            }

            .beneficiary-image i {
                font-size: 3rem;
            }

            .thanks-icon {
                width: 45px;
                height: 45px;
            }

            .thanks-message {
                font-size: 0.9rem;
            }

            .poetic-text {
                font-size: 0.8rem;
                line-height: 1.5;
            }

            .poetic-text em {
                font-size: 0.85rem;
            }
        }

        /* ========================================== */
        /* RESPONSIVE - PANTALLAS BAJAS */
        /* ========================================== */
        @media (max-height: 650px) {
            .thanks-icon {
                width: 40px;
                height: 40px;
                margin-bottom: 4px;
            }

            .beneficiary-image {
                width: 100px;
                height: 100px;
                margin-bottom: 4px;
            }

            .beneficiary-image i {
                font-size: 2.5rem;
            }

            .poetic-message-section {
                margin-bottom: 8px;
                padding: 8px 6px;
            }

            .poetic-text {
                font-size: 0.75rem;
                line-height: 1.4;
            }

            .poetic-text em {
                font-size: 0.8rem;
                margin-top: 6px;
            }

            .thanks-message {
                font-size: 0.9rem;
                margin-bottom: 6px;
            }
        }
    </style>
</head>
<body>
    <!-- CANVAS DE ANIMACIONES -->
    <canvas id="animation-canvas"></canvas>
    
    <div class="thanks-container">
        <div class="thanks-card">
            <!-- ENCABEZADO -->
            <div class="thanks-header">
                <h1>CONFIRMACIÓN</h1>
            </div>
            
            <!-- CUERPO -->
            <div class="thanks-body">
                <div class="content-wrapper content-above-animation">
                    <!-- LOGO DE AGRADECIMIENTO - SIN ANIMACIÓN -->
                    <div class="icon-section">
                        <div class="thanks-icon">
                            <img src="logo.png" alt="Logo ADRA">
                        </div>
                    </div>

                    <!-- MENSAJE DE AGRADECIMIENTO PRINCIPAL - SIN CUADRO -->
                    <div class="message-section">
                        <h2 class="thanks-message <?php echo $clase_alerta; ?>">
                            <?php echo $mensaje; ?>
                        </h2>
                    </div>

                    <?php if ($confirmar == 'si'): ?>
                        <!-- IMAGEN PROTAGONISTA GIGANTE -->
                        <div class="beneficiary-info">
                            <div class="beneficiary-image">
                                <?php if(!empty($donacion['item_imagen'])): ?>
                                    <img src="<?php echo htmlspecialchars($donacion['item_imagen']); ?>" alt="<?php echo htmlspecialchars($donacion['item_nombre']); ?>">
                                <?php else: ?>
                                    <i class="bi bi-gift"></i>
                                <?php endif; ?>
                            </div>
                            <div class="beneficiary-details">
                                <p>Tu generosidad ayudará con brindar: </p>
                                <h3><?php echo htmlspecialchars($donacion['item_nombre']); ?></h3>
                            </div>
                        </div>

                        <!-- MENSAJE LARGO PERSONALIZADO - ESTILO POEMA -->
                        <div class="poetic-message-section">
                            <div class="poetic-text">
                                <?php echo $mensaje_largo; ?>
                            </div>
                        </div>

                        
                    <?php else: ?>
                        <!-- MENSAJE LARGO DE ERROR (sin estilo poético) -->
                        <div class="poetic-message-section">
                            <div class="error-message">
                                <?php echo $mensaje_largo; ?>
                            </div>
                        </div>
                    <?php endif; ?>

                    <!-- BOTÓN DE VOLVER AL INICIO -->
                    <div class="buttons-section">
                        <a href="index.php" class="home-btn" id="homeBtn">
                            <span class="btn-text">
                                <i class="bi bi-arrow-left"></i> Volver al Inicio
                            </span>
                            <span class="processing-text">
                                <i class="bi bi-hourglass-split"></i> Procesando...
                            </span>
                        </a>
                    </div>

                    <!-- TEXTO DE AYUDA -->
                    <div class="help-text">
                        <p>Serás redirigido automáticamente en <span id="countdown"><?php echo $segundos_redireccion; ?></span> segundos...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // ========================================
        // CONFIGURACIÓN PHP A JAVASCRIPT
        // ========================================
        const mostrarConfetti = <?php echo $mostrar_confetti ? 'true' : 'false'; ?>;
        const tipoAnimacion = '<?php echo $tipo_animacion; ?>';
        const confirmar = '<?php echo $confirmar; ?>';
        const segundosRedireccion = <?php echo $segundos_redireccion; ?>;

        // ========================================
        // FUNCIÓN PARA REPRODUCIR SONIDO CON POLÍTICAS DE AUTOPLAY
        // ========================================
        function playSound(audioElement) {
            const playPromise = audioElement.play();
            
            if (playPromise !== undefined) {
                playPromise.catch(error => {
                    console.log("Autoplay bloqueado, esperando interacción del usuario...");
                    
                    const silentButton = document.createElement('button');
                    silentButton.style.position = 'absolute';
                    silentButton.style.opacity = '0';
                    silentButton.style.width = '1px';
                    silentButton.style.height = '1px';
                    silentButton.style.pointerEvents = 'none';
                    document.body.appendChild(silentButton);
                    
                    setTimeout(() => {
                        silentButton.focus();
                        silentButton.click();
                        
                        setTimeout(() => {
                            audioElement.currentTime = 0;
                            audioElement.play().catch(e => {
                                console.log("No se pudo reproducir el sonido:", e);
                            });
                        }, 100);
                        
                        setTimeout(() => {
                            document.body.removeChild(silentButton);
                        }, 200);
                    }, 100);
                });
            }
        }

        // ========================================
        // REDIRECCIÓN AUTOMÁTICA CON TIEMPOS DIFERENTES
        // ========================================
        let seconds = segundosRedireccion;
        const countdownElement = document.getElementById('countdown');
        const countdown = setInterval(function() {
            seconds--;
            countdownElement.textContent = seconds;
            
            if (seconds <= 0) {
                clearInterval(countdown);
                window.location.href = 'index.php';
            }
        }, 1000);

        // ========================================
        // SISTEMA DE ANIMACIONES (CONFETI O LLUVIA)
        // ========================================
        document.addEventListener('DOMContentLoaded', function() {
            // SONIDOS SEGÚN CONFIRMACIÓN
            if (mostrarConfetti) {
                // SONIDO DE CELEBRACIÓN (solo si confirman)
                const celebrationSound = new Audio('sounds/celebracion2.mp3');
                celebrationSound.volume = 0.7;
                celebrationSound.preload = 'auto';
                celebrationSound.load();

                setTimeout(() => {
                    playSound(celebrationSound);
                }, 500);
            }

            // ANIMACIONES EN CANVAS
            const animationCanvas = document.getElementById('animation-canvas');
            const ctx = animationCanvas.getContext('2d');
            animationCanvas.width = window.innerWidth;
            animationCanvas.height = window.innerHeight;

            if (mostrarConfetti) {
                // ========================================
                // ANIMACIÓN DE CONFETI (PARA CONFIRMACIÓN SÍ)
                // ========================================
                const confettiColors = [
                    '#D50032', '#992A31', '#C1A01E', '#F8F0E4', '#E6F5FA',
                    '#ff6b6b', '#ffa500', '#ffd700', '#90ee90', '#ff69b4'
                ];

                const confettiPieces = [];
                const confettiCount = 200;

                for (let i = 0; i < confettiCount; i++) {
                    confettiPieces.push({
                        x: Math.random() * animationCanvas.width,
                        y: Math.random() * animationCanvas.height - animationCanvas.height,
                        size: Math.random() * 12 + 5,
                        color: confettiColors[Math.floor(Math.random() * confettiColors.length)],
                        speed: Math.random() * 3 + 2,
                        rotation: Math.random() * 360,
                        rotationSpeed: Math.random() * 10 - 5,
                        shape: Math.random() > 0.5 ? 'circle' : 'rect',
                        opacity: Math.random() * 0.7 + 0.3
                    });
                }

                function animateConfetti() {
                    // LIMPIAR SIN FONDO NEGRO - fondo transparente
                    ctx.clearRect(0, 0, animationCanvas.width, animationCanvas.height);

                    confettiPieces.forEach(piece => {
                        ctx.save();
                        ctx.translate(piece.x, piece.y);
                        ctx.rotate(piece.rotation * Math.PI / 180);

                        ctx.globalAlpha = piece.opacity;
                        ctx.fillStyle = piece.color;

                        if (piece.shape === 'circle') {
                            ctx.beginPath();
                            ctx.arc(0, 0, piece.size / 2, 0, Math.PI * 2);
                            ctx.fill();
                        } else {
                            const width = piece.size;
                            const height = piece.size * 0.4;
                            ctx.fillRect(-width / 2, -height / 2, width, height);
                        }

                        ctx.restore();

                        piece.y += piece.speed;
                        piece.rotation += piece.rotationSpeed;
                        piece.x += Math.sin(piece.y * 0.01) * 0.5;

                        if (piece.y > animationCanvas.height) {
                            piece.y = -piece.size;
                            piece.x = Math.random() * animationCanvas.width;
                        }
                    });

                    requestAnimationFrame(animateConfetti);
                }

                animateConfetti();
            } else {
                // ========================================
                // ANIMACIÓN DE LLUVIA TRISTE - MÁS CARGADA
                // ========================================
                const rainColors = [
                    '#6c757d', '#495057', '#868e96', '#adb5bd', '#dee2e6',
                    '#999999', '#777777', '#555555', '#333333', '#111111'
                ];

                const rainDrops = [];
                const rainCount = 200; // MÁS GOTAS

                for (let i = 0; i < rainCount; i++) {
                    rainDrops.push({
                        x: Math.random() * animationCanvas.width,
                        y: Math.random() * animationCanvas.height - animationCanvas.height,
                        length: Math.random() * 20 + 10, // Gotas más largas
                        thickness: Math.random() * 2 + 1, // Más gruesas
                        color: rainColors[Math.floor(Math.random() * rainColors.length)],
                        speed: Math.random() * 6 + 3, // Más rápidas
                        opacity: Math.random() * 0.6 + 0.3, // Menos transparentes
                        angle: Math.random() * 10 + 3 // Más inclinación
                    });
                }

                function animateRain() {
                    // FONDO TRANSPARENTE - NO NEGRO
                    // Solo limpiamos, sin fondo negro
                    ctx.clearRect(0, 0, animationCanvas.width, animationCanvas.height);

                    // Agregar efecto de neblina sutil
                    ctx.fillStyle = 'rgba(0, 0, 0, 0.02)';
                    ctx.fillRect(0, 0, animationCanvas.width, animationCanvas.height);

                    rainDrops.forEach(drop => {
                        ctx.save();
                        
                        // Configurar transparencia
                        ctx.globalAlpha = drop.opacity;
                        ctx.strokeStyle = drop.color;
                        ctx.lineWidth = drop.thickness;
                        ctx.lineCap = 'round';
                        
                        // Dibujar gota de lluvia con ángulo
                        ctx.beginPath();
                        ctx.moveTo(drop.x, drop.y);
                        ctx.lineTo(
                            drop.x + Math.sin(drop.angle * Math.PI / 180) * drop.length,
                            drop.y + drop.length
                        );
                        ctx.stroke();
                        
                        // Agregar pequeña gota al final para efecto más realista
                        ctx.beginPath();
                        ctx.arc(
                            drop.x + Math.sin(drop.angle * Math.PI / 180) * drop.length,
                            drop.y + drop.length,
                            drop.thickness / 2,
                            0,
                            Math.PI * 2
                        );
                        ctx.fill();
                        
                        ctx.restore();

                        // Mover gota
                        drop.y += drop.speed;
                        drop.x += Math.sin(drop.angle * Math.PI / 180) * 0.5;

                        // Reiniciar gota cuando sale de la pantalla
                        if (drop.y > animationCanvas.height) {
                            drop.y = -drop.length;
                            drop.x = Math.random() * animationCanvas.width;
                            drop.opacity = Math.random() * 0.6 + 0.3;
                        }
                    });

                    requestAnimationFrame(animateRain);
                }

                animateRain();
            }

            // Redimensionar canvas al cambiar tamaño de ventana
            window.addEventListener('resize', function() {
                animationCanvas.width = window.innerWidth;
                animationCanvas.height = window.innerHeight;
            });
        });

        // ========================================
        // MANEJO DEL BOTÓN VOLVER AL INICIO
        // ========================================
        document.addEventListener('DOMContentLoaded', function() {
            const clickSound = new Audio('sounds/click.mp3');
            clickSound.volume = 0.5;
            
            const homeBtn = document.getElementById('homeBtn');
            let isProcessing = false;

            function playClickSound() {
                clickSound.currentTime = 0;
                playSound(clickSound);
            }

            if (homeBtn) {
                homeBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (isProcessing) return;

                    playClickSound();
                    isProcessing = true;
                    homeBtn.classList.add('processing');

                    setTimeout(() => {
                        window.location.href = 'index.php';
                    }, 300);
                });
            }

            document.addEventListener('touchstart', function(event) {
                if (event.touches.length > 1) {
                    event.preventDefault();
                }
            }, { passive: false });

            setTimeout(() => {
                document.body.click();
            }, 1000);
        });
    </script>
</body>
</html>