Pricing table with monthly and yearly toggle

<section class="mx-auto max-w-5xl px-4 py-16" aria-labelledby="pricing-title">
  <div class="text-center">
    <h2 id="pricing-title" class="text-3xl font-bold tracking-tight text-slate-900">Simple pricing</h2>
    <div class="mt-6 inline-flex items-center gap-3 text-sm font-medium">
      <span id="bill-monthly-label" class="text-slate-900">Monthly</span>
      <button id="bill-switch" type="button" role="switch" aria-checked="false"
        aria-labelledby="bill-monthly-label bill-yearly-label"
        class="relative h-7 w-12 rounded-full bg-slate-300 transition aria-checked:bg-indigo-600">
        <span id="bill-knob" class="absolute left-1 top-1 size-5 rounded-full bg-white shadow transition-transform"></span>
      </button>
      <span id="bill-yearly-label" class="text-slate-500">Yearly</span>
      <span id="bill-badge" class="hidden rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">Save 20%</span>
    </div>
  </div>

  <div class="mt-10 grid gap-6 md:grid-cols-3">
    <article class="rounded-2xl border border-slate-200 p-6">
      <h3 class="font-semibold">Starter</h3>
      <p class="mt-4 text-4xl font-bold"><span data-price data-monthly="$9" data-yearly="$86">$9</span>
        <span data-unit class="text-base font-normal text-slate-500">/mo</span></p>
      <a href="#" class="mt-6 block rounded-lg bg-slate-900 py-2 text-center text-white">Choose Starter</a>
    </article>
    <article class="rounded-2xl border-2 border-indigo-600 p-6 shadow-lg">
      <h3 class="font-semibold">Pro</h3>
      <p class="mt-4 text-4xl font-bold"><span data-price data-monthly="$29" data-yearly="$278">$29</span>
        <span data-unit class="text-base font-normal text-slate-500">/mo</span></p>
      <a href="#" class="mt-6 block rounded-lg bg-indigo-600 py-2 text-center text-white">Choose Pro</a>
    </article>
    <article class="rounded-2xl border border-slate-200 p-6">
      <h3 class="font-semibold">Scale</h3>
      <p class="mt-4 text-4xl font-bold"><span data-price data-monthly="$79" data-yearly="$758">$79</span>
        <span data-unit class="text-base font-normal text-slate-500">/mo</span></p>
      <a href="#" class="mt-6 block rounded-lg bg-slate-900 py-2 text-center text-white">Choose Scale</a>
    </article>
  </div>
</section>

// Billing toggle: rewrites prices from data attributes, no re-render.
const sw = document.getElementById('bill-switch');
const knob = document.getElementById('bill-knob');
const badge = document.getElementById('bill-badge');

function apply(yearly) {
  sw.setAttribute('aria-checked', String(yearly));
  knob.classList.toggle('translate-x-5', yearly);
  badge.classList.toggle('hidden', !yearly);
  document.querySelectorAll('[data-price]').forEach((el) => {
    el.textContent = yearly ? el.dataset.yearly : el.dataset.monthly;
  });
  document.querySelectorAll('[data-unit]').forEach((el) => {
    el.textContent = yearly ? '/yr' : '/mo';
  });
}

sw.addEventListener('click', () => apply(sw.getAttribute('aria-checked') !== 'true'));
apply(false);