ayr2026/scripts/main.js

/* ============================================
   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');
  }
}


/* ============================================
   ACORDEÓN DE SERVICIOS
   ============================================ */
function initServiciosAccordion() {
  const accordion = document.getElementById('servicios-accordion');
  if (!accordion) {
    console.log('Acordeón no encontrado');
    return;
  }

  const items = accordion.querySelectorAll('.servicio-item');
  console.log('Items encontrados:', items.length);

  // Función para activar un item
  function activateItem(item) {
    if (item.classList.contains('is-active')) return;
    
    accordion.classList.add('has-active');
    items.forEach(i => i.classList.remove('is-active'));
    item.classList.add('is-active');
  }

  // Función para cerrar (volver al estado inicial)
  function closeAll() {
    accordion.classList.remove('has-active');
    items.forEach(i => i.classList.remove('is-active'));
  }

  // Click en cada item para expandirlo
  items.forEach((item, index) => {
    console.log(`Agregando listener al item ${index}`);
    
    item.addEventListener('click', (e) => {
      console.log('Click en item:', index);
      
      // Si el click fue en el botón cerrar o en un botón CTA, no activar
      if (e.target.closest('.servicio-close')) {
        console.log('Click en cerrar');
        return;
      }
      if (e.target.closest('.btn')) {
        console.log('Click en botón CTA');
        return;
      }
      
      activateItem(item);
    });
  });

  // Click en los botones de cerrar
  const closeButtons = accordion.querySelectorAll('.servicio-close');
  closeButtons.forEach((btn, index) => {
    console.log(`Agregando listener al botón cerrar ${index}`);
    
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      console.log('Botón cerrar clicked');
      closeAll();
    });
  });
}

/* ============================================
   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();

  initServiciosAccordion();
});