<?php
ob_start();
session_start();

ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', __DIR__ . '/../logs/php_errors.log');
error_reporting(E_ALL);

include_once 'db/db_connection.php';
include 'files/guardiankey.php';

// --- INCLUIR ARCHIVO DE VIDEOS EXTERNO ---
include_once 'socios/videos-motivacion.php';

$db_error_message = null;

try {
    $stmt = $pdo->query("SELECT * FROM website_config WHERE id = 1");
    $config = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($config) {
        $company_name_from_db = htmlspecialchars($config['company_name'] ?? 'Nombre de la Empresa');
        $contact_phone_from_db = htmlspecialchars($config['phone_primary'] ?? '');
        $website_url_from_db = htmlspecialchars($config['website_url'] ?? '');
        $value_proposition_from_db = htmlspecialchars($config['value_proposition'] ?? '');
    } else {
        $company_name_from_db = 'Nombre de la Empresa';
        $contact_phone_from_db = '';
        $website_url_from_db = '';
        $value_proposition_from_db = '';
        $db_error_message = 'No se encontró la configuración. Se usarán valores por defecto.';
    }

} catch (PDOException $e) {
    error_log("Error PDO al cargar configuración web: " . $e->getMessage());
    $company_name_from_db = 'Nombre de la Empresa';
    $contact_phone_from_db = '';
    $website_url_from_db = '';
    $value_proposition_from_db = '';
    $db_error_message = 'Error de Base de Datos al cargar configuración: ' . $e->getMessage();
} catch (Exception $e) {
    error_log("General Error al cargar configuración web: " . $e->getMessage());
    $company_name_from_db = 'Nombre de la Empresa';
    $contact_phone_from_db = '';
    $website_url_from_db = '';
    $value_proposition_from_db = '';
    $db_error_message = 'Error inesperado al cargar configuración: ' . $e->getMessage();
}

// Codificar el array para pasarlo a JavaScript
$videos_json = json_encode($todosLosVideos);

ob_end_clean();
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mentalidad Socios De Crecimiento™ De OrozDesign Powered By OrozCO</title>
  <meta name="robots" content="noindex, nofollow">

    <link rel="icon" type="image/png" href="img/favicon.png">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">

    <?php include 'files/gtm-head.php'; ?>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://unpkg.com/imask"></script>

    <link rel="stylesheet" href="style.css">
    <script src="files/header-manager.js"></script>
    
    <style>
        /* Estilos CSS del Hero de bienvenida (MODIFICADO) */
        .socios-hero{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--color-primary,#07162d) 0%,#0b2242 55%,#07162d 100%);color:#fff}
        .socios-hero .blob{position:absolute;filter:blur(64px);opacity:.35;border-radius:9999px}
        .socios-hero .blob.bl1{height:280px;width:280px;left:-80px;top:-80px;background:var(--color-secondary,#9e1428)}
        .socios-hero .blob.bl2{height:280px;width:280px;right:-80px;bottom:-80px;background:#ffc857}
        .chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .65rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:.75rem;letter-spacing:.3px}
        .hero-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:12px;background:#fff;color:#0b1220;font-weight:800}
        .hero-cta.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);font-weight:700}
        .video-shell{background:rgba(0,0,0,.35);border-radius:16px;border:1px solid rgba(255,255,255,.12);overflow:hidden}
        @media (max-width: 767px) {
            .socios-hero {
                margin-left: -1rem;
                margin-right: -1rem;
                border-radius: 0 !important;
                padding-top: 2.5rem !important;
                padding-bottom: 2.5rem !important;
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }
        
        /* Estilos para el nuevo panel de video (off-canvas) */
        .off-canvas-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: #f9fafb; /* Color de fondo similar a tu dashboard */
            box-shadow: -4px 0 10px rgba(0,0,0,.1);
            transform: translateX(100%);
            transition: transform .3s ease-out;
            z-index: 50;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }
        .off-canvas-panel.is-open {
            transform: translateX(0);
        }
        .off-canvas-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 40;
            display: none;
        }
        .off-canvas-overlay.is-open {
            display: block;
        }

        /* Estilos del contenido de la lección */
        .lesson-card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 10px 22px rgba(0,0,0,.06);
            padding: 1.5rem;
        }
        .account-card-header {
            font-size: 1.25rem;
            font-weight: 800;
            color: #1f2937;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* Asegurar que el panel se apile en móvil */
        @media (max-width: 768px) {
            .off-canvas-panel {
                width: 100%;
            }
        }
        
        /* Estilos para los botones del panel */
        .btn-panel {
            font-weight: 700;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            text-transform: uppercase;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
        }
        .btn-panel.btn-primary {
            background-color: var(--color-primary);
            color: #fff;
        }
        .btn-panel.btn-secondary {
            background-color: var(--color-secondary);
            color: #fff;
        }
        .btn-panel.btn-ghost {
            background-color: transparent;
            color: #6b7280;
            border: 1px solid #d1d5db;
        }
        .btn-panel:hover {
            opacity: 0.8;
            transform: translateY(-1px);
        }
        .btn-panel[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* Alineación y estilo para los íconos */
        .btn-panel [data-lucide] {
            width: 1rem;
            height: 1rem;
        }
        
        /* Estilo para las tarjetas de video (MODIFICADO) */
        .video-card {
            background-color: #fff;
            border-radius: 1rem;
            box-shadow: 0 10px 22px rgba(0,0,0,.06);
            padding: 1.5rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .video-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,.1);
        }
        .video-card .card-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .video-card h4 {
            font-size: 1.25rem;
            color: var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            line-height: 1.2;
        }
        .video-card p {
            font-size: 0.875rem;
            color: #4b5563;
            flex-grow: 1;
        }
        .video-card button {
            background-color: var(--color-primary);
            color: #fff;
        }
        .video-card button:hover {
            background-color: var(--color-secondary);
        }
        
        /* Hero de la academia */
        .academy-hero{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--color-primary,#07162d) 0%,#0b2242 55%,#07162d 100%);color:#fff}
        .academy-hero .blob{position:absolute;filter:blur(64px);opacity:.35;border-radius:9999px}
        .academy-hero .blob.bl1{height:280px;width:280px;left:-80px;top:-80px;background:var(--color-secondary,#9e1428)}
        .academy-hero .blob.bl2{height:280px;width:280px;right:-80px;bottom:-80px;background:#ffc857}
        .academy-hero .chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .65rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:.75rem;letter-spacing:.3px}
        .academy-hero .hero-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:12px;background:#fff;color:#0b1220;font-weight:800}
        .academy-hero .hero-cta.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);font-weight:700}
        @media (max-width: 767px) {
            .academy-hero {
                margin-left: -1rem;
                margin-right: -1rem;
                border-radius: 0 !important;
                padding-top: 2.5rem !important;
                padding-bottom: 2.5rem !important;
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }
        /* Estilos del panel con video */
        .lesson-panel-video-wrapper {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
            background-color: #000;
        }
        .lesson-panel-video-wrapper video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .lesson-panel-video-wrapper .video-poster-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0,0,0,0.4);
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .lesson-panel-video-wrapper .video-poster-overlay:hover {
            background-color: rgba(0,0,0,0.6);
        }
        .lesson-panel-video-wrapper .video-poster-overlay h4 {
            position: absolute;
            bottom: 20%;
            color: white;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

    </style>
</head>
<body data-page-title="Academia de Socios"
      data-page-subtitle="Recursos y Herramientas Exclusivas Para Tu Desarrollo Personal y Profesional"
      data-page-icon="graduation-cap">

    <div id="toast-container" class="toast-container"></div>

    <?php include 'files/gtm-body.php'; ?>

<div class="relative min-h-screen md:flex">

    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>
    <div id="task-panel-overlay" class="off-canvas-overlay"></div> 
    
    <?php include 'socios-menu.php'; ?>

    <main class="flex-1 overflow-y-auto">
        <header class="bg-white shadow-sm p-4 flex justify-between items-center sticky top-0 z-20">
            <button id="mobile-menu-button" class="md:hidden text-gray-600 hover:text-gray-800">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
            <div class="page-header-container">
                <h2 id="page-title"></h2>
                <p id="page-subtitle"></p>
            </div>
        </header>

            <div id="content-area" class="p-4 md:p-8 space-y-8">

                <section class="academy-hero p-6 md:p-10">
                    <div class="blob bl1"></div><div class="blob bl2"></div>
                    <div class="relative grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                        <div>
                            <span class="chip"><i data-lucide="award" class="w-4 h-4"></i> ACADEMIA SOCIOS DE CRECIMIENTO</span>
                            <h1 class="mt-3 text-3xl md:text-4xl font-extrabold leading-tight text-[var(--color-highlight)]">¡Bienvenido Al Tu Centro De Aprendizaje!</h1>
                            <p class="mt-2 text-white/90 max-w-2xl">
                                Explora las lecciones y herramientas diseñadas para potenciar tus habilidades y llevar tu negocio al siguiente nivel.
                            </p>
                            <div class="mt-4 flex flex-wrap gap-2">
                                <a href="#recursos" class="hero-cta"><i data-lucide="book-open" class="w-5 h-5"></i> EMPEZAR A APRENDER</a>
                            </div>
                        </div>
                        <div>
                            <div class="w-full">
                                <div class="bg-black/40 rounded-xl ring-1 ring-white/10 overflow-hidden">
                                    <div class="relative w-full" style="padding-bottom: 56.25%;">
                                        <video class="absolute top-0 left-0 w-full h-full object-cover" id="videoPlayer" controls controlslist="nodownload nofullscreen" preload="metadata">
                                            <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
                                            TU NAVEGADOR NO SOPORTA LA ETIQUETA DE VIDEO
                                        </video>
                                        <div id="playOverlay" class="absolute inset-0 flex justify-center items-center cursor-pointer group">
                                            <img src="img/VideoLeccion-IAMarketing.jpg" alt="Video de Introducción a la Academia" class="absolute inset-0 w-full h-full object-cover">
                                            <div class="absolute inset-0 w-full h-full bg-black/40 transition-colors group-hover:bg-black/60"></div>
                                            <i data-lucide="play" class="relative w-16 h-16 text-white opacity-80 group-hover:opacity-100 transition-opacity"></i>
                                        </div>
                                    </div>
                                    <div class="p-4 text-white/90 text-sm flex items-center justify-between">
                                        <span class="inline-flex items-center gap-2">
                                            <i data-lucide="play" class="w-4 h-4"></i> Video de Introducción a la Academia
                                        </span>
                                        <span class="inline-flex items-center gap-2">
                                            <i data-lucide="clock" class="w-4 h-4"></i> 2–3 min
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="recursos" class="dashboard-section">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <div class="mb-6">
                            <h3 class="text-2xl font-extrabold text-gray-700 mb-2 uppercase flex items-center gap-3">
                                <i data-lucide="monitor-play" class="w-7 h-7 text-[var(--color-primary)]"></i> TUS LECCIONES EN VIDEO
                            </h3>
                            <p class="text-gray-500 text-sm mt-1 uppercase">COMIENZA A APRENDER Y CRECER HOY MISMO.</p>
                        </div>
                        <div id="resources-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            </div>
                        <div id="load-more-container" class="text-center mt-8">
                            <button id="load-more-videos-btn" class="btn-primary font-bold py-3 px-8 rounded-lg uppercase hidden">
                                Cargar Más Lecciones
                            </button>
                        </div>
                    </div>
                </section>
                </div>
        </main>
    </div>

<div id="lessonPanel" class="off-canvas-panel">
    <div class="flex flex-col h-full">
        <div class="bg-slate-800 text-white p-6 flex justify-between items-center flex-shrink-0">
            <div class="flex items-center">
                <i data-lucide="book-open" class="w-6 h-6 mr-3 text-[var(--color-highlight)]"></i>
                <h3 id="lessonPanelTitleText" class="text-xl font-bold uppercase"></h3>
            </div>
            <button onclick="closeLessonPanel()" class="text-gray-400 hover:text-gray-200">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        <div class="p-4 md:p-8 flex-grow overflow-y-auto pr-2 -mr-2">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
                <div class="lg:col-span-2 space-y-8">
                    <div class="w-full aspect-video bg-gray-900 rounded-lg overflow-hidden shadow-lg relative">
                        <video id="lessonVideoPlayer" class="w-full h-full object-cover" controls preload="metadata"></video>
                        <div id="lessonVideoPoster" class="absolute inset-0 bg-cover bg-center flex items-center justify-center cursor-pointer">
                            <i data-lucide="play" class="w-24 h-24 text-white opacity-90 transition-opacity duration-300 hover:opacity-100"></i>
                        </div>
                    </div>
                </div>

                <div class="space-y-8 lg:sticky lg:top-8">
                    <div class="lesson-card">
                        <div class="space-y-3">
                            <button class="btn-panel btn-primary w-full"><i data-lucide="check" class="w-4 h-4 mr-2"></i> Marcar Como Completado</button>
                            <a href="dashboard.php" class="btn-panel btn-ghost w-full justify-center"><i data-lucide="layout-grid" class="w-4 h-4 mr-2"></i> Volver a Módulos</a>
                        </div>
                    </div>
                    <div class="lesson-card">
                        <h3 class="account-card-header"><i data-lucide="navigation" class="w-5 h-5 text-[var(--color-secondary)] uppercase"></i> NAVEGACIÓN</h3>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="prevLessonBtn" class="btn-panel btn-secondary w-full justify-center" disabled>
                                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Anterior
                            </button>
                            <button id="nextLessonBtn" class="btn-panel btn-secondary w-full justify-center">
                                Siguiente <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        'use strict';
        
        // =================================================================
        // VARIABLES Y CACHÉ DE ELEMENTOS DEL DOM
        // =================================================================
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebar-overlay');
        const playOverlay = document.getElementById('playOverlay');
        const videoPlayer = document.getElementById('videoPlayer');
        const resourcesContainer = document.getElementById('resources-container');
        const loadMoreButton = document.getElementById('load-more-videos-btn');
        
        // Elementos del panel de lección
        const lessonPanel = document.getElementById('lessonPanel');
        const lessonPanelOverlay = document.getElementById('lessonPanelOverlay');
        const lessonVideoPlayer = document.getElementById('lessonVideoPlayer');
        const lessonVideoPoster = document.getElementById('lessonVideoPoster');
        
        // NUEVO: Botones de navegación
        const prevLessonBtn = document.getElementById('prevLessonBtn');
        const nextLessonBtn = document.getElementById('nextLessonBtn');

        // Datos de los videos (desde PHP)
        const todosLosVideos = <?php echo $videos_json; ?>;

        let videosLoadedCount = 0;
        const videosPerPage = 6;

        // NUEVO: Variable para saber qué video se está viendo
        let currentVideoIndex = -1;

        // =================================================================
        // FUNCIONES PRINCIPALES
        // =================================================================
        const createVideoCardHTML = (video) => {
            const videoTitle = video.title || 'Título Desconocido';
            const videoDescription = video.description || 'Sin descripción.';
            const videoThumbnail = video.thumbnail || 'img/default-thumbnail.jpg';

            return `
                <div class="video-card text-center">
                    <div class="relative mb-4 overflow-hidden rounded-lg">
                        <img src="${videoThumbnail}" alt="Miniatura de video: ${videoTitle}" class="w-full h-auto object-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 hover:bg-opacity-60 transition-colors duration-200 cursor-pointer open-lesson-panel-btn" data-video-id="${video.id}">
                            <i data-lucide="play" class="w-16 h-16 text-white"></i>
                        </div>
                    </div>
                    <h4 class="font-bold text-lg text-gray-800 uppercase mb-2">
                        <i data-lucide="square-play" class="w-6 h-6 text-[var(--color-secondary)]"></i>
                        <span>${videoTitle}</span>
                    </h4>
                    <p class="text-sm text-gray-600 flex-grow mb-4">${videoDescription}</p>
                    <button type="button" class="btn-primary font-bold py-2 px-6 rounded-lg flex items-center justify-center uppercase w-full open-lesson-panel-btn"
                        data-video-id="${video.id}">
                        <i data-lucide="play" class="w-4 h-4 mr-2"></i> Ver Lección
                    </button>
                </div>
            `;
        };

        const renderVideos = () => {
            const videosToDisplay = todosLosVideos.slice(videosLoadedCount, videosLoadedCount + videosPerPage);
            
            if (videosToDisplay.length > 0) {
                const html = videosToDisplay.map(createVideoCardHTML).join('');
                resourcesContainer.insertAdjacentHTML('beforeend', html);
                videosLoadedCount += videosToDisplay.length;
                lucide.createIcons();
            }

            if (videosLoadedCount >= todosLosVideos.length) {
                loadMoreButton.classList.add('hidden');
            } else {
                loadMoreButton.classList.remove('hidden');
            }
        };

        // NUEVO: Función para habilitar/deshabilitar los botones de navegación
        const updateNavButtons = () => {
            // Botón "Anterior"
            if (currentVideoIndex <= 0) {
                prevLessonBtn.disabled = true;
            } else {
                prevLessonBtn.disabled = false;
            }

            // Botón "Siguiente"
            if (currentVideoIndex >= todosLosVideos.length - 1) {
                nextLessonBtn.disabled = true;
            } else {
                nextLessonBtn.disabled = false;
            }
        };
        
        // MODIFICADO: Ahora también actualiza el índice del video y los botones
        const openLessonPanel = (videoId) => {
            const videoIndex = todosLosVideos.findIndex(v => v.id == videoId);
            if (videoIndex === -1) {
                console.error('Video no encontrado para el ID:', videoId);
                return;
            }

            const video = todosLosVideos[videoIndex];
            currentVideoIndex = videoIndex; // Actualizamos el índice actual

            const titleTextElement = document.getElementById('lessonPanelTitleText');
            if (titleTextElement) {
                titleTextElement.textContent = video.title || 'Título Desconocido';
            }

            lessonVideoPlayer.src = video.video_url;
            lessonVideoPlayer.poster = video.thumbnail;
            lessonVideoPoster.style.backgroundImage = `url(${video.thumbnail})`;
            lessonVideoPoster.style.display = 'flex';
            lessonVideoPlayer.load();
            lessonVideoPlayer.pause(); // Asegurarse de que no inicie solo

            if (!lessonPanel.classList.contains('is-open')) {
                lessonPanel.classList.add('is-open');
                lessonPanelOverlay.classList.add('is-open');
                document.body.classList.add('modal-open');
            }
            
            updateNavButtons(); // Actualizamos el estado de los botones
            lucide.createIcons();
        };

        window.closeLessonPanel = () => {
            if (lessonVideoPlayer) {
                lessonVideoPlayer.pause();
                lessonVideoPlayer.src = ''; 
            }
            
            lessonPanel.classList.remove('is-open');
            lessonPanelOverlay.classList.remove('is-open');
            document.body.classList.remove('modal-open');
        };

        // NUEVO: Función para cambiar de lección
        const navigateToLesson = (direction) => {
            if (direction === 'next' && currentVideoIndex < todosLosVideos.length - 1) {
                currentVideoIndex++;
            } else if (direction === 'prev' && currentVideoIndex > 0) {
                currentVideoIndex--;
            }

            const nextVideo = todosLosVideos[currentVideoIndex];
            if (nextVideo) {
                openLessonPanel(nextVideo.id);
            }
        };

        // =================================================================
        // INICIALIZACIÓN DE EVENTOS
        // =================================================================
        document.addEventListener('DOMContentLoaded', () => {
            // Manejo del sidebar móvil
            if (mobileMenuButton && sidebar && sidebarOverlay) {
                mobileMenuButton.addEventListener('click', () => {
                    sidebar.classList.toggle('-translate-x-full');
                    sidebarOverlay.classList.toggle('hidden');
                });
                sidebarOverlay.addEventListener('click', () => {
                    sidebar.classList.add('-translate-x-full');
                    sidebarOverlay.classList.add('hidden');
                });
            }
            
            if (playOverlay && videoPlayer) {
                playOverlay.addEventListener('click', () => {
                    playOverlay.style.display = 'none';
                    videoPlayer.play();
                });
            }

            if (resourcesContainer) {
                resourcesContainer.addEventListener('click', (e) => {
                    const openButton = e.target.closest('.open-lesson-panel-btn');
                    if (openButton) {
                        const videoId = openButton.dataset.videoId;
                        openLessonPanel(videoId);
                    }
                });
            }

            if (loadMoreButton) {
                loadMoreButton.addEventListener('click', renderVideos);
            }

            renderVideos();

            if (lessonPanelOverlay) {
                lessonPanelOverlay.addEventListener('click', closeLessonPanel);
            }
            
            if (lessonVideoPoster) {
                lessonVideoPoster.addEventListener('click', () => {
                    lessonVideoPlayer.play();
                    lessonVideoPoster.style.display = 'none';
                });
            }

            // NUEVO: Eventos para los botones de navegación
            if (nextLessonBtn) {
                nextLessonBtn.addEventListener('click', () => navigateToLesson('next'));
            }
            if (prevLessonBtn) {
                prevLessonBtn.addEventListener('click', () => navigateToLesson('prev'));
            }
            
            if (window.lucide) {
                lucide.createIcons();
            }
        });
    })();
</script>
</body>
</html>