// Plan navigation functionality
function scrollToSection(anchorId) {
  const targetElement = document.getElementById(anchorId);
  
  if (targetElement) {
    // Smooth scroll to the anchor element
    targetElement.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'start' 
    });
  }
}

function updateActiveButton(activeButton) {
  const buttons = document.querySelectorAll('.plan-nav-btn[data-plan]');
  buttons.forEach(btn => {
    if (btn === activeButton) {
      btn.classList.remove('bg-[var(--accent-color)]');
      btn.classList.add('bg-[var(--primary-color)]');
    } else if (btn.dataset.plan) {
      btn.classList.remove('bg-[var(--primary-color)]');
      btn.classList.add('bg-[var(--accent-color)]');
    }
  });
}

function handleNavigation() {
  const navButtons = document.querySelectorAll('.plan-nav-btn[data-plan]');
  
  navButtons.forEach(button => {
    button.addEventListener('click', handleNavButtonClick);
  });
}

function handleNavButtonClick(e) {
  e.preventDefault();
  
  const targetView = this.dataset.plan;
  let anchorId;
  
  // Map data-plan values to actual section IDs that exist in the HTML
  switch(targetView) {
    case 'overview':
      anchorId = 'sjjwm5l'; // Plan overview section
      break;
    case 'detailed':
      anchorId = 'sybl9qj'; // Detailed comparison section
      break;
    case 'calculator':
      anchorId = 's4ww6i9'; // Payment calculator section
      break;
    default:
      anchorId = targetView;
  }
  
  // Scroll to the target section
  scrollToSection(anchorId);
  
  // Update active button styling
  updateActiveButton(this);
}

// Initialize when DOM is loaded
function init() {
  handleNavigation();
  
  // Set initial active state for overview button
  const overviewButton = document.querySelector('.plan-nav-btn[data-plan="overview"]');
  if (overviewButton) {
    updateActiveButton(overviewButton);
  }
}

function teardown() {
  // Remove event listeners by replacing elements
  const navButtons = document.querySelectorAll('.plan-nav-btn[data-plan]');
  navButtons.forEach(button => {
    button.removeEventListener('click', handleNavButtonClick);
  });
}

// Export functions
export { init, teardown, scrollToSection };