<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LightPath - Memoria de Ruta</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <!-- Particles.js -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <!-- Howler.js para efectos de sonido -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

    <style>
        :root {
            --primary: #ff4e50;
            --secondary: #3a7bd5;
            --dark: #151521;
            --darker: #0f0f1a;
            --light: #f8f9fa;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--darker);
            color: var(--light);
            overflow-x: hidden;
            min-height: 100vh;
        }

        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        header {
            background-color: rgba(21, 21, 33, 0.95);
            padding: 1rem 0;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 10;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            text-decoration: none;
            color: var(--light);
        }

        .logo i {
            color: var(--primary);
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .game-section {
            padding: 50px 0;
        }

        .game-container {
            background-color: rgba(21, 21, 33, 0.8);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            max-width: 500px;
            margin: 30px auto;
        }

        .grid-cell {
            aspect-ratio: 1;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .grid-cell::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .grid-cell.active::before {
            opacity: 1;
        }

        .grid-cell.highlight {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: var(--light);
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

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

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-card {
            background: rgba(58, 123, 213, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card h3 {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 5px;
        }

        .level-progress {
            background: rgba(255, 255, 255, 0.1);
            height: 10px;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
        }

        .level-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            width: 0%;
            transition: width 0.5s ease;
        }

        .achievements {
            margin-top: 50px;
        }

        .achievement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .achievement-card {
            background: rgba(21, 21, 33, 0.8);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }

        .achievement-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s;
        }

        .achievement-card:hover::before {
            transform: scaleX(1);
        }

        .achievement-card i {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .achievement-card.locked {
            opacity: 0.5;
        }

        .achievement-card.locked i {
            color: gray;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .grid-container {
                grid-template-columns: repeat(4, 1fr);
            }

            .controls {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 300px;
            }
        }

        /* Animaciones */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        .slide-in {
            animation: slideIn 0.5s ease forwards;
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>

    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <i class="fas fa-lightbulb"></i>
                    <span>LightPath</span>
                </a>
                <div class="nav-links">
                    <a href="#game">Jugar</a>
                    <a href="#stats">Estadísticas</a>
                    <a href="#achievements">Logros</a>
                </div>
            </nav>
        </div>
    </header>

    <section id="game" class="game-section">
        <div class="container">
            <div class="game-container">
                <h2 class="text-center">Nivel <span id="currentLevel">1</span></h2>
                <div class="grid-container" id="grid"></div>
                <div class="controls">
                    <button id="startBtn" class="btn">
                        <i class="fas fa-play"></i> Iniciar
                    </button>
                    <button id="replayBtn" class="btn" disabled>
                        <i class="fas fa-redo"></i> Repetir
                    </button>
                    <button id="muteBtn" class="btn">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
            </div>

            <div class="stats">
                <div class="stat-card">
                    <h3 id="scoreDisplay">0</h3>
                    <p>Puntuación</p>
                </div>
                <div class="stat-card">
                    <h3 id="levelDisplay">1</h3>
                    <p>Nivel</p>
                </div>
                <div class="stat-card">
                    <h3 id="streakDisplay">0</h3>
                    <p>Racha</p>
                </div>
            </div>

            <div class="level-progress">
                <div class="level-bar" id="levelProgress"></div>
            </div>

            <div class="achievements">
                <h2>Logros</h2>
                <div class="achievement-grid">
                    <div class="achievement-card locked" id="achievement1">
                        <i class="fas fa-star"></i>
                        <h3>Principiante</h3>
                        <p>Completa tu primer nivel</p>
                    </div>
                    <div class="achievement-card locked" id="achievement2">
                        <i class="fas fa-fire"></i>
                        <h3>En Racha</h3>
                        <p>Consigue una racha de 5 niveles</p>
                    </div>
                    <div class="achievement-card locked" id="achievement3">
                        <i class="fas fa-trophy"></i>
                        <h3>Maestro</h3>
                        <p>Alcanza el nivel 10</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Configuración de particles.js
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#ff4e50" },
                shape: { type: "circle" },
                opacity: { value: 0.5, random: true },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#3a7bd5",
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 2,
                    direction: "none",
                    random: false,
                    straight: false,
                    out_mode: "out",
                    bounce: false
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "grab" },
                    onclick: { enable: true, mode: "push" },
                    resize: true
                }
            },
            retina_detect: true
        });

        // Efectos de sonido simplificados
        const sounds = {
            click: new Howl({ 
                src: ['https://cdn.freesound.org/previews/242/242501_4414128-lq.mp3'],
                volume: 0.5,
                preload: true
            }),
            success: new Howl({ 
                src: ['https://cdn.freesound.org/previews/270/270404_5123851-lq.mp3'],
                volume: 0.5,
                preload: true
            }),
            failure: new Howl({ 
                src: ['https://cdn.freesound.org/previews/242/242503_4414128-lq.mp3'],
                volume: 0.5,
                preload: true
            })
        };

        // Agregar después de la sección de sonidos
        const volumeControl = {
            muted: false,
            toggle() {
                this.muted = !this.muted;
                Object.values(sounds).forEach(sound => {
                    sound.mute(this.muted);
                });
            },
            setVolume(value) {
                Object.values(sounds).forEach(sound => {
                    sound.volume(value);
                });
            }
        };

        // Variables del juego con valores por defecto
        const gameState = {
            sequence: [],
            playerSequence: [],
            level: 1,
            score: 0,
            streak: 0,
            isPlaying: false,
            canPlay: false
        };

        // Elementos del DOM - Uso de selectores más específicos
        const elements = {
            grid: document.getElementById('grid'),
            startBtn: document.getElementById('startBtn'),
            replayBtn: document.getElementById('replayBtn'),
            scoreDisplay: document.getElementById('scoreDisplay'),
            levelDisplay: document.getElementById('levelDisplay'),
            streakDisplay: document.getElementById('streakDisplay'),
            levelProgress: document.getElementById('levelProgress'),
            achievements: {
                beginner: document.getElementById('achievement1'),
                streak: document.getElementById('achievement2'),
                master: document.getElementById('achievement3')
            }
        };

        // Crear la cuadrícula con manejo de errores
        function createGrid() {
            try {
                elements.grid.innerHTML = '';
                for (let i = 0; i < 25; i++) {
                    const cell = document.createElement('div');
                    cell.className = 'grid-cell';
                    cell.dataset.index = i;
                    cell.addEventListener('click', handleCellClick);
                    elements.grid.appendChild(cell);
                }
            } catch (error) {
                console.error('Error al crear la cuadrícula:', error);
                showError('Error al inicializar el juego');
            }
        }

        // Generar secuencia con validación
        function generateSequence() {
            if (!gameState.isPlaying) return;
            
            gameState.sequence = Array.from(
                { length: gameState.level + 2 }, 
                () => Math.floor(Math.random() * 25)
            );
        }

        // Mostrar secuencia con mejor manejo de tiempo
        async function showSequence() {
            try {
                if (!gameState.isPlaying) return;
                
                gameState.canPlay = false;
                const delay = Math.max(500 - (gameState.level * 20), 200);

                // Deshabilitar botones durante la secuencia
                elements.replayBtn.disabled = true;
                
                for (const cellIndex of gameState.sequence) {
                    if (!gameState.isPlaying) return; // Verificar si el juego sigue activo
                    
                    const cell = elements.grid.children[cellIndex];
                    if (!cell) continue;

                    cell.classList.add('active');
                    sounds.click.play();
                    await new Promise(resolve => setTimeout(resolve, delay));
                    cell.classList.remove('active');
                    await new Promise(resolve => setTimeout(resolve, delay/2));
                }

                // Habilitar interacción solo si el juego sigue activo
                if (gameState.isPlaying) {
                    gameState.canPlay = true;
                    elements.replayBtn.disabled = false;
                }
            } catch (error) {
                console.error('Error al mostrar la secuencia:', error);
                showError('Error en la secuencia');
                gameState.canPlay = true;
                elements.replayBtn.disabled = false;
            }
        }

        // Manejar click en celda con validación
        function handleCellClick(e) {
            if (!gameState.canPlay || !gameState.isPlaying) return;

            const index = parseInt(e.target.dataset.index);
            if (isNaN(index)) return;

            gameState.playerSequence.push(index);
            e.target.classList.add('active');
            sounds.click.play();

            setTimeout(() => e.target.classList.remove('active'), 300);

            if (gameState.playerSequence[gameState.playerSequence.length - 1] !== 
                gameState.sequence[gameState.playerSequence.length - 1]) {
                gameOver();
                return;
            }

            if (gameState.playerSequence.length === gameState.sequence.length) {
                levelComplete();
            }
        }

        // Nivel completado con animaciones mejoradas
        function levelComplete() {
            gameState.canPlay = false;
            gameState.score += gameState.level * 100;
            gameState.streak++;
            gameState.level++;

            updateUI();
            checkAchievements();
            sounds.success.play();

            gsap.to(elements.scoreDisplay, {
                textContent: gameState.score,
                duration: 1,
                snap: { textContent: 1 }
            });
            
            Swal.fire({
                title: '¡Nivel Completado!',
                text: `¡Puntuación: ${gameState.score}!`,
                icon: 'success',
                confirmButtonText: 'Siguiente Nivel'
            }).then(() => {
                startLevel();
            });
        }

        // Game Over con efectos mejorados
        function gameOver() {
            gameState.isPlaying = false;
            gameState.canPlay = false;
            sounds.failure.play();

            gsap.to('.grid-cell', {
                scale: 0.95,
                opacity: 0.7,
                duration: 0.3,
                stagger: 0.02
            });

            Swal.fire({
                title: '¡Game Over!',
                text: `Puntuación final: ${gameState.score}`,
                icon: 'error',
                confirmButtonText: 'Intentar de nuevo'
            });

            elements.startBtn.disabled = false;
            elements.replayBtn.disabled = true;
            gameState.streak = 0;
            updateUI();
        }

        // Actualizar UI con animaciones
        function updateUI() {
            elements.scoreDisplay.textContent = gameState.score;
            elements.levelDisplay.textContent = gameState.level;
            elements.streakDisplay.textContent = gameState.streak;
            
            gsap.to(elements.levelProgress, {
                width: `${(gameState.playerSequence.length / gameState.sequence.length) * 100}%`,
                duration: 0.3,
                ease: 'power2.out'
            });
        }

        // Verificar logros con notificaciones mejoradas
        function checkAchievements() {
            const achievements = [
                {
                    id: 'achievement1',
                    condition: gameState.level >= 2,
                    title: 'Principiante'
                },
                {
                    id: 'achievement2',
                    condition: gameState.streak >= 5,
                    title: 'En Racha'
                },
                {
                    id: 'achievement3',
                    condition: gameState.level >= 10,
                    title: 'Maestro'
                }
            ];

            achievements.forEach(achievement => {
                const element = document.getElementById(achievement.id);
                if (achievement.condition && element.classList.contains('locked')) {
                    element.classList.remove('locked');
                    showAchievementNotification(achievement.title);
                }
            });
        }

        // Mostrar notificación de logro mejorada
        function showAchievementNotification(achievement) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer);
                    toast.addEventListener('mouseleave', Swal.resumeTimer);
                }
            });

            Toast.fire({
                icon: 'success',
                title: '¡Logro Desbloqueado!',
                text: achievement
            });
        }

        // Mostrar error
        function showError(message) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: message,
                timer: 2000,
                showConfirmButton: false
            });
        }

        // Iniciar nivel con reinicio de estado
        function startLevel() {
            if (!gameState.isPlaying) return;
            
            gameState.playerSequence = [];
            generateSequence();
            updateUI();
            
            // Pequeña pausa antes de mostrar la secuencia
            setTimeout(() => {
                showSequence();
            }, 300);
        }

        // Event Listeners con manejo de errores
        elements.startBtn.addEventListener('click', () => {
            try {
                // Deshabilitar botones inmediatamente
                elements.startBtn.disabled = true;
                elements.replayBtn.disabled = true;

                // Reiniciar estado del juego
                Object.assign(gameState, {
                    isPlaying: true,
                    level: 1,
                    score: 0,
                    streak: 0,
                    sequence: [],
                    playerSequence: []
                });
                
                // Actualizar UI antes de las animaciones
                updateUI();
                
                // Animación de entrada
                gsap.fromTo('.grid-cell', 
                    {
                        scale: 0,
                        opacity: 0
                    },
                    {
                        scale: 1,
                        opacity: 1,
                        duration: 0.5,
                        stagger: 0.02,
                        ease: 'back.out(1.7)',
                        onComplete: () => {
                            // Habilitar el botón de repetir y comenzar el nivel
                            elements.replayBtn.disabled = false;
                            setTimeout(() => {
                                startLevel();
                            }, 500); // Pequeña pausa antes de mostrar la secuencia
                        }
                    }
                );
            } catch (error) {
                console.error('Error al iniciar el juego:', error);
                showError('Error al iniciar el juego');
            }
        });

        elements.replayBtn.addEventListener('click', () => {
            try {
                gameState.playerSequence = [];
                showSequence();
                updateUI();
            } catch (error) {
                console.error('Error al repetir la secuencia:', error);
                showError('Error al repetir la secuencia');
            }
        });

        // Agregar el event listener para el botón de mutear
        document.getElementById('muteBtn').addEventListener('click', () => {
            volumeControl.toggle();
            const icon = document.querySelector('#muteBtn i');
            icon.className = volumeControl.muted ? 'fas fa-volume-mute' : 'fas fa-volume-up';
        });

        // Agregar esta función después de la definición de sounds
        function initializeSounds() {
            return new Promise((resolve) => {
                let loadedSounds = 0;
                const totalSounds = Object.keys(sounds).length;

                Object.values(sounds).forEach(sound => {
                    sound.once('load', () => {
                        loadedSounds++;
                        if (loadedSounds === totalSounds) {
                            resolve();
                        }
                    });
                    sound.once('loaderror', () => {
                        console.warn('Error al cargar un sonido, continuando sin él');
                        loadedSounds++;
                        if (loadedSounds === totalSounds) {
                            resolve();
                        }
                    });
                });

                // Timeout por si los sonidos no cargan
                setTimeout(resolve, 3000);
            });
        }

        // Modificar la inicialización al final del script:
        async function initialize() {
            try {
                createGrid();
                await initializeSounds();
                
                // Animaciones iniciales
                gsap.from('.game-container', {
                    duration: 1,
                    y: 50,
                    opacity: 0,
                    ease: 'power3.out'
                });

                gsap.from('.stat-card', {
                    duration: 0.8,
                    y: 30,
                    opacity: 0,
                    stagger: 0.2,
                    ease: 'power2.out'
                });

                gsap.from('.achievement-card', {
                    duration: 0.8,
                    scale: 0.8,
                    opacity: 0,
                    stagger: 0.2,
                    ease: 'back.out(1.7)'
                });
            } catch (error) {
                console.error('Error en la inicialización:', error);
                showError('Error al inicializar el juego');
            }
        }

        // Iniciar el juego
        initialize();
    </script>
</body>
</html>