/* ============================================
   CARGA DE INCLUDES (menu y footer)
   ============================================ */
async function loadInclude(selector, url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const html = await response.text();
    const container = document.querySelector(selector);
    if (container) container.innerHTML = html;
  } catch (error) {
    console.error(`Error cargando ${url}:`, error);
  }
}

/* ============================================
   SWITCH DE TEMA (claro por defecto)
   ============================================ */
function initTheme() {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
}

function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme') || 'light';
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

// Ejecutar al cargar la página
document.addEventListener('DOMContentLoaded', () => {
  initTheme();

  const themeBtn = document.querySelector('.theme-toggle');
  if (themeBtn) {
    themeBtn.addEventListener('click', toggleTheme);
  }
});
/* ============================================
   CALCULAR ANCHO DEL SCROLLBAR
   ============================================ */
function getScrollbarWidth() {
  return window.innerWidth - document.documentElement.clientWidth;
}

function applyScrollbarCompensation() {
  const scrollbarWidth = getScrollbarWidth();
  document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
}

/* ============================================
   MENÚ FULLSCREEN
   ============================================ */
function openMenu() {
  const menu = document.getElementById('fullscreen-menu');
  const overlay = document.getElementById('menu-overlay');
  const menuToggle = document.querySelector('.menu-toggle');
  
  if (menu && overlay) {
    applyScrollbarCompensation();
    menu.classList.add('is-open');
    overlay.classList.add('is-open');
    document.body.classList.add('menu-open');
    menuToggle.setAttribute('aria-expanded', 'true');
  }
}

function closeMenu() {
  const menu = document.getElementById('fullscreen-menu');
  const overlay = document.getElementById('menu-overlay');
  const menuToggle = document.querySelector('.menu-toggle');
  
  if (menu && overlay) {
    menu.classList.remove('is-open');
    overlay.classList.remove('is-open');
    document.body.classList.remove('menu-open');
    menuToggle.setAttribute('aria-expanded', 'false');
  }
}

/* ============================================
   INICIALIZACIÓN
   ============================================ */
document.addEventListener('DOMContentLoaded', async () => {
  // Cargar menú y footer
  await Promise.all([
    loadInclude('#menu-container', 'includes/menu.html'),
    loadInclude('#footer-container', 'includes/footer.html')
  ]);

  // Inicializar tema
  initTheme();

  // Eventos del tema
  const themeBtn = document.querySelector('.theme-toggle');
  if (themeBtn) themeBtn.addEventListener('click', toggleTheme);

  // Eventos del menú
  const menuToggle = document.querySelector('.menu-toggle');
  const menuClose = document.querySelector('.menu-close');
  const menuOverlay = document.getElementById('menu-overlay');
  const menuLinks = document.querySelectorAll('.fullscreen-menu a');

  if (menuToggle) menuToggle.addEventListener('click', openMenu);
  if (menuClose) menuClose.addEventListener('click', closeMenu);
  if (menuOverlay) menuOverlay.addEventListener('click', closeMenu);

  // Cerrar menú al hacer clic en un enlace
  menuLinks.forEach(link => {
    link.addEventListener('click', closeMenu);
  });

  // Cerrar menú con tecla Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeMenu();
  });

  // Año dinámico en el footer
  const yearEl = document.getElementById('current-year');
  if (yearEl) yearEl.textContent = new Date().getFullYear();
});