/* ============================================
   SELECTOR DE SERVICIOS
   ============================================ */
function initServiciosSelector() {
  const tabs = document.querySelectorAll('.servicio-tab');
  const pills = document.querySelectorAll('.servicio-pill');
  const panels = document.querySelectorAll('.servicio-panel');

  if (tabs.length === 0 || panels.length === 0) return;

  function activarServicio(servicioId) {
    // Desactivar todos los tabs y pills
    tabs.forEach(tab => {
      tab.classList.remove('active');
      tab.setAttribute('aria-selected', 'false');
    });
    pills.forEach(pill => {
      pill.classList.remove('active');
      pill.setAttribute('aria-selected', 'false');
    });

    // Desactivar todos los panels
    panels.forEach(panel => panel.classList.remove('active'));

    // Activar el tab y pill correspondientes
    const tabActivo = document.querySelector(`.servicio-tab[data-servicio="${servicioId}"]`);
    const pillActivo = document.querySelector(`.servicio-pill[data-servicio="${servicioId}"]`);
    const panelActivo = document.getElementById(`panel-${servicioId}`);

    if (tabActivo) {
      tabActivo.classList.add('active');
      tabActivo.setAttribute('aria-selected', 'true');
    }
    if (pillActivo) {
      pillActivo.classList.add('active');
      pillActivo.setAttribute('aria-selected', 'true');
    }
    if (panelActivo) {
      panelActivo.classList.add('active');
    }

    // Scroll suave al panel
    if (panelActivo) {
      panelActivo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }

  // Event listeners para tabs
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const servicioId = tab.dataset.servicio;
      activarServicio(servicioId);
    });
  });

  // Event listeners para pills
  pills.forEach(pill => {
    pill.addEventListener('click', () => {
      const servicioId = pill.dataset.servicio;
      activarServicio(servicioId);
    });
  });

  // Soporte para hash en URL (ej: servicios.html#branding)
  const hash = window.location.hash.replace('#', '');
  if (hash && document.getElementById(`panel-${hash}`)) {
    activarServicio(hash);
  }
}

// Inicializar cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', () => {
  initServiciosSelector();
});