// Forzar que los archivos HTML se carguen con UTF-8
fetch('inc/header.html')
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.body.insertAdjacentHTML('afterbegin', data);
    })
    .catch(error => console.error('Error cargando el header:', error));




/* ============================================================ */
/* load-components.js - Carga header y footer                   */
/* ============================================================ */

// 1. Cargar el HEADER al principio del documento
fetch('inc/header.html')
    .then(response => response.text())
    .then(data => {
        document.body.insertAdjacentHTML('afterbegin', data);
        // Una vez cargado el header, inicializar los scripts del menú
        initMenuScripts();
    })
    .catch(error => console.error('Error cargando el header:', error));

// 2. Cargar el FOOTER al final del documento
document.addEventListener('DOMContentLoaded', function() {
    fetch('inc/footer.html')
        .then(response => response.text())
        .then(data => {
            document.body.insertAdjacentHTML('beforeend', data);
        })
        .catch(error => console.error('Error cargando el footer:', error));
});

// ==============================================================
// FUNCIÓN PARA INICIALIZAR LOS SCRIPTS DEL MENÚ
// ==============================================================
function initMenuScripts() {
    // Esperar un momento para que el DOM se actualice
    setTimeout(function() {

        console.log('Inicializando scripts del menú...');

        // ==============================================================
        // 1. MENÚ MÓVIL - TOGGLE
        // ==============================================================
        var mobileToggle = document.querySelector('.mobile_menu_bar_toggle');
        var mobileNav = document.querySelector('.mobile_nav');
        var topMenu = document.querySelector('#top-menu');

        console.log('mobileToggle:', mobileToggle);
        console.log('mobileNav:', mobileNav);
        console.log('topMenu:', topMenu);

        if (mobileToggle && mobileNav) {
            mobileToggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();

                if (mobileNav.classList.contains('closed')) {
                    mobileNav.classList.remove('closed');
                    mobileNav.classList.add('opened');
                    document.body.style.overflow = 'hidden';
                    if (topMenu) {
                        topMenu.style.display = 'block';
                    }
                    console.log('Menú abierto');
                } else {
                    mobileNav.classList.add('closed');
                    mobileNav.classList.remove('opened');
                    document.body.style.overflow = '';
                    if (topMenu) {
                        topMenu.style.display = 'none';
                    }
                    console.log('Menú cerrado');
                }
            });
        } else {
            console.warn('No se encontraron elementos del menú móvil. Verifica que el header se haya cargado correctamente.');
        }

        // ==============================================================
        // 2. SUBMENÚS EN MÓVIL
        // ==============================================================
        var menuItems = document.querySelectorAll('.menu-item-has-children > a');

        console.log('Elementos con submenú:', menuItems.length);

        menuItems.forEach(function(item) {
            item.addEventListener('click', function(e) {
                if (window.innerWidth <= 980) {
                    e.preventDefault();
                    var parentLi = this.parentElement;
                    var submenu = this.nextElementSibling;

                    if (submenu && submenu.classList.contains('sub-menu')) {
                        if (submenu.classList.contains('open')) {
                            submenu.classList.remove('open');
                            parentLi.classList.remove('opened');
                            console.log('Submenú cerrado');
                        } else {
                            var parentUl = parentLi.parentElement;
                            if (parentUl) {
                                var allSubmenus = parentUl.querySelectorAll('.sub-menu');
                                allSubmenus.forEach(function(sm) {
                                    sm.classList.remove('open');
                                    if (sm.parentElement) {
                                        sm.parentElement.classList.remove('opened');
                                    }
                                });
                            }
                            submenu.classList.add('open');
                            parentLi.classList.add('opened');
                            console.log('Submenú abierto');
                        }
                    }
                }
            });
        });

        // ==============================================================
        // 3. CERRAR MENÚ AL HACER CLIC EN UN ENLACE
        // ==============================================================
        var menuLinks = document.querySelectorAll('#top-menu a');

        menuLinks.forEach(function(link) {
            link.addEventListener('click', function() {
                if (!this.parentElement.classList.contains('menu-item-has-children')) {
                    if (window.innerWidth <= 980) {
                        if (mobileNav) {
                            mobileNav.classList.add('closed');
                            mobileNav.classList.remove('opened');
                            document.body.style.overflow = '';
                            if (topMenu) {
                                topMenu.style.display = 'none';
                            }
                            console.log('Menú cerrado por clic en enlace');
                        }
                    }
                }
            });
        });

        // ==============================================================
        // 4. MARCAR PÁGINA ACTUAL
        // ==============================================================
        var currentPage = window.location.pathname.split('/').pop() || 'index.html';
        var menuLinksAll = document.querySelectorAll('#top-menu a');

        menuLinksAll.forEach(function(link) {
            var href = link.getAttribute('href');
            if (href === currentPage) {
                link.classList.add('active');
            }
        });

        // ==============================================================
        // 5. CERRAR MENÚ AL CAMBIAR A ESCRITORIO
        // ==============================================================
        function handleMenuOnResize() {
            if (window.innerWidth > 980) {
                if (mobileNav) {
                    mobileNav.classList.add('closed');
                    mobileNav.classList.remove('opened');
                    document.body.style.overflow = '';
                    if (topMenu) {
                        topMenu.style.display = '';
                    }
                }
                var allSubmenus = document.querySelectorAll('.sub-menu');
                allSubmenus.forEach(function(sm) {
                    sm.classList.remove('open');
                    if (sm.parentElement) {
                        sm.parentElement.classList.remove('opened');
                    }
                });
            }
        }

        var resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(handleMenuOnResize, 200);
        });

        handleMenuOnResize();

        console.log('✅ Scripts del menú inicializados correctamente');

    }, 100); // Pequeño retraso para asegurar que el DOM se actualizó
}