/* ============================================
   SELECTOR DE PLANES
   ============================================ */
function initPlanesSelector() {
  const tabs = document.querySelectorAll('.plan-tab');
  const pills = document.querySelectorAll('.plan-pill');
  const panels = document.querySelectorAll('.plan-panel');

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

  function activarPlan(planId) {
    // 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(`.plan-tab[data-plan="${planId}"]`);
    const pillActivo = document.querySelector(`.plan-pill[data-plan="${planId}"]`);
    const panelActivo = document.getElementById(`panel-${planId}`);

    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 planId = tab.dataset.plan;
      activarPlan(planId);
    });
  });

  // Event listeners para pills
  pills.forEach(pill => {
    pill.addEventListener('click', () => {
      const planId = pill.dataset.plan;
      activarPlan(planId);
    });
  });

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

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