class PricingToggle {
  constructor() {
    this.pToggle = document.getElementById('pricingToggle');
    if (!this.pToggle) return;
    this.mLabel = document.getElementById('monthlyLabel');
    this.aLabel = document.getElementById('annualLabel');
    this.saveBadge = document.getElementById('saveBadge');
    this.monthlyOpts = document.querySelectorAll('.price-option.monthly');
    this.annualOpts = document.querySelectorAll('.price-option.annual');
    this.annual = false;
    this.pToggle.addEventListener('click', () => this.toggle());
    this.pToggle.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.toggle(); }
    });
  }

  toggle() {
    this.annual = !this.annual;
    this.pToggle.classList.toggle('annual', this.annual);
    this.pToggle.setAttribute('aria-checked', this.annual);
    this.mLabel.classList.toggle('active', !this.annual);
    this.aLabel.classList.toggle('active', this.annual);
    this.saveBadge.classList.toggle('show', this.annual);
    this.monthlyOpts.forEach(el => el.classList.toggle('active', !this.annual));
    this.annualOpts.forEach(el => el.classList.toggle('active', this.annual));
  }
}
