document.addEventListener("DOMContentLoaded", () => {
    console.log('DOM cargado completamente');

    // Esperar a que el DOM esté completamente cargado
    setTimeout(() => {
        const loader = document.getElementById('loader');
        if (loader) {
            loader.style.display = 'none';
        }
    }, 1000);

    // Verificar si estamos en la página de grabación
    const recordingPage = document.getElementById('sectionGrabacion');
    if (recordingPage) {
        console.log('Estamos en la página de grabación');
        return;
    }

    // Crear y agregar el mensaje de rotación si no existe
    let rotateMessage = document.getElementById('rotate-message');
    if (!rotateMessage) {
        rotateMessage = document.createElement('div');
        rotateMessage.id = 'rotate-message';
        rotateMessage.innerHTML = `
            <div class="rotate-content">
                <i class="fas fa-mobile-alt"></i>
                <p>Por favor, gira tu dispositivo a modo vertical</p>
            </div>
        `;
        document.body.appendChild(rotateMessage);
        rotateMessage.style.display = 'none';
    }

    // Detectar orientación correctamente
    function checkOrientation() {
        if (window.matchMedia("(orientation: landscape)").matches) {
            rotateMessage.style.display = "flex";
        } else {
            rotateMessage.style.display = "none";
        }
    }

    window.addEventListener("resize", checkOrientation);
    checkOrientation(); // Ejecutar al cargar la página

    // Manejar el video de intro y el botón de navegación
    const video = document.getElementById('splash-video');
    const button = document.getElementById('navigate-button');

    //console.log('Video elemento:', video);
    //console.log('Botón elemento:', button);

    if (!video) {
        console.error('No se encontró el elemento de video');
    }

    if (!button) {
        console.error('No se encontró el botón de navegación');
    }

    if (video && button) {
        console.log('Se encontraron ambos elementos');
        
        // Intentar reproducir el video
        video.play().catch(function(error) {
            console.log("Error reproduciendo el video:", error);
            button.style.display = 'block';
            button.style.opacity = '1';
        });

        // Mostrar el botón cuando termine el video
        video.addEventListener('ended', () => {
            button.style.display = 'block';
            // Forzar un reflow
            void button.offsetWidth;
            button.style.opacity = '1';
            // Pausar el video en el último frame
            video.pause();
        });

        // Manejar clic en el botón
        button.addEventListener('click', () => {
            window.location.href = 'v1';
        });

        // Eventos adicionales para debugging
        video.addEventListener('play', () => {
            console.log('Video comenzó a reproducirse');
        });

        video.addEventListener('pause', () => {
            console.log('Video pausado');
        });

        video.addEventListener('error', (e) => {
            console.error('Error en el video:', e);
            button.style.display = 'block';
        });

        // Asegurarse de que el video se reproduzca en iOS
        document.addEventListener('touchstart', () => {
            video.play().catch(function(error) {
                console.log("Error reproduciendo el video en touch:", error);
            });
        }, { once: true });
    }
});

// Manejar errores de manera global
window.addEventListener('error', (event) => {
    console.error('Error capturado:', event.error);
});