// Funcionalidades para integración con la página de personajes

document.addEventListener('DOMContentLoaded', function() {
    // Sincronizar contador de Lumio con localStorage
    syncLumioCounter();
    
    // Añadir efecto de destaque al enlace de personajes en el menú
    highlightPersonajesLink();
    
    // Integrar funcionalidad del botón de mapa
    setupMapButton();
});

// Función para sincronizar el contador de Lumio con localStorage
function syncLumioCounter() {
    // Verificar si hay un contador guardado en localStorage
    const lumioCount = localStorage.getItem('lumioCount') || 0;
    
    // Actualizar el contador en la página
    const counterElement = document.querySelector('.contador-lumio span');
    if (counterElement) {
        counterElement.textContent = `Lumio encontrado: ${lumioCount}/5`;
    }
    
    // Escuchar cambios en localStorage (para sincronizar entre páginas)
    window.addEventListener('storage', function(e) {
        if (e.key === 'lumioCount') {
            const newCount = e.newValue || 0;
            if (counterElement) {
                counterElement.textContent = `Lumio encontrado: ${newCount}/5`;
            }
        }
    });
}

// Función para destacar el enlace de personajes en el menú
function highlightPersonajesLink() {
    const personajesLink = document.querySelector('nav .menu li a[href*="personajes"]');
    
    if (personajesLink) {
        // Añadir un pequeño efecto de brillo
        personajesLink.addEventListener('mouseenter', function() {
            this.style.textShadow = '0 0 5px rgba(255, 255, 255, 0.8)';
        });
        
        personajesLink.addEventListener('mouseleave', function() {
            this.style.textShadow = '';
        });
    }
}

// Función para configurar el botón de mapa
function setupMapButton() {
    const mapButtons = document.querySelectorAll('.mapa-button');
    
    mapButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Guardar estado actual en localStorage para mantener continuidad
            localStorage.setItem('lastPage', 'home');
            
            // Redirigir a la página de personajes con un parámetro para mostrar el mapa
            window.location.href = 'https://hjtzczwo.manus.space/personajes?showMap=true';
        });
    });
}

// Función para manejar la transición desde la página de personajes
function handleReturnFromPersonajes() {
    // Verificar si venimos de la página de personajes
    const referrer = document.referrer;
    
    if (referrer.includes('personajes')) {
        // Mostrar un mensaje de bienvenida de regreso
        const welcomeBack = document.createElement('div');
        welcomeBack.classList.add('welcome-back');
        welcomeBack.innerHTML = `
            <div class="welcome-content">
                <h3>¡Bienvenido de vuelta al Bosque Brillante!</h3>
                <p>¿Descubriste algo interesante sobre nuestros amigos?</p>
                <button class="close-welcome">Continuar la aventura</button>
            </div>
        `;
        
        document.body.appendChild(welcomeBack);
        
        // Cerrar mensaje al hacer clic en el botón
        welcomeBack.querySelector('.close-welcome').addEventListener('click', function() {
            welcomeBack.remove();
        });
        
        // También cerrar al hacer clic fuera del contenido
        welcomeBack.addEventListener('click', function(e) {
            if (e.target === welcomeBack) {
                welcomeBack.remove();
            }
        });
    }
}

// Llamar a la función de manejo de retorno cuando la página esté completamente cargada
window.addEventListener('load', handleReturnFromPersonajes);

// Estilos adicionales para la integración
document.head.insertAdjacentHTML('beforeend', `
<style>
    .welcome-back {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    
    .welcome-content {
        background-color: white;
        padding: 30px;
        border-radius: 15px;
        max-width: 500px;
        width: 90%;
        text-align: center;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    }
    
    .close-welcome {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 30px;
        margin-top: 20px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .close-welcome:hover {
        background-color: #388E3C;
        transform: translateY(-3px);
    }
</style>
`);