/**
 * Demo Modal Controller
 * Muestra un modal a pantalla completa al cargar la página
 */

// Elementos del DOM
const demoModal = document.getElementById('demo-modal');
const demoModalClose = document.getElementById('demo-modal-close');

/**
 * Cierra el modal y lo oculta
 */
function closeDemoModal() {
    if (demoModal) {
        demoModal.classList.add('hidden');
    }
}

/**
 * Inicializa el modal cuando se carga la página
 */
function initDemoModal() {
    if (demoModal && demoModalClose) {
        // Mostrar el modal (ya está visible por defecto en CSS)
        demoModal.classList.remove('hidden');
        
        // Agregar evento al botón de cerrar
        demoModalClose.addEventListener('click', closeDemoModal);
        
        // Cerrar al hacer clic fuera del contenido del modal
        demoModal.addEventListener('click', function(e) {
            if (e.target === demoModal) {
                closeDemoModal();
            }
        });
        
        // Cerrar con la tecla Escape
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !demoModal.classList.contains('hidden')) {
                closeDemoModal();
            }
        });
    }
}

// Inicializar cuando el DOM esté listo
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initDemoModal);
} else {
    initDemoModal();
}
