Interactive Billing Period Toggle with Heading

<div class="flex flex-col items-center text-center gap-8 relative z-20">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Oswald:wght@300&family=Space+Grotesk:wght@300&display=swap');
  </style>
  <div class="space-y-5 flex flex-col items-center">
    <div
      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50/80 border border-indigo-100 text-indigo-600 text-xs font-light tracking-widest shadow-sm uppercase"
      style="font-family: 'Oswald', sans-serif;">
      <iconify-icon icon="solar:wallet-linear" class="text-sm"></iconify-icon>
      Clear Cost Structure
    </div>
    <h1 class="text-4xl lg:text-6xl font-normal tracking-tight leading-tight max-w-xl text-slate-900"
      style="font-family: 'Instrument Serif', serif;">
      Transparent <span class="text-indigo-600 font-normal italic">Economics</span>
    </h1>
    <p class="text-base text-slate-500 font-light max-w-md" style="font-family: 'Space Grotesk', sans-serif;">
      Choose a plan that matches your current workload. Expand seamlessly as your technical demands grow.
    </p>
  </div>

  <div id="hdr-toggle-container" role="switch" aria-checked="true" tabindex="0"
    class="relative z-10 w-48 h-16 rounded-full p-1.5 flex items-center cursor-pointer group transition-all duration-500 outline-none focus-visible:ring-4 focus-visible:ring-indigo-500/30"
    style="background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px), linear-gradient(180deg, #e0e7ff 0%, #a5b4fc 100%); box-shadow: 2px 2px 0px rgba(79,70,229,0.1), 4px 4px 0px rgba(79,70,229,0.08), 6px 6px 0px rgba(79,70,229,0.06), 8px 8px 0px rgba(79,70,229,0.04), 10px 10px 0px rgba(79,70,229,0.02), 20px 20px 30px rgba(79,70,229,0.25), inset 0 4px 8px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(255,255,255,0.7), 0 0 0 6px rgba(238, 242, 255, 0.8); border: 1px solid #a5b4fc;">
    <div id="hdr-toggle-thumb"
      class="absolute left-[6px] w-[116px] h-[calc(100%-12px)] rounded-full flex items-center justify-center gap-1.5 transition-all duration-500 ease-out"
      style="transform: translateX(64px); background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%); box-shadow: 1px 1px 0px rgba(79,70,229,0.15), 2px 2px 0px rgba(79,70,229,0.1), 3px 3px 0px rgba(79,70,229,0.08), 4px 4px 0px rgba(79,70,229,0.05), 5px 5px 0px rgba(79,70,229,0.03), 12px 12px 20px -4px rgba(79, 70, 229, 0.4), inset 0 3px 4px rgba(255,255,255,1), inset 0 -2px 4px rgba(129, 140, 248, 0.2); border: 1px solid #eef2ff;">
      <iconify-icon id="hdr-toggle-icon" icon="solar:calendar-linear"
        class="text-indigo-600 text-base drop-shadow-sm transition-colors duration-300"></iconify-icon>
      <span id="hdr-toggle-text" class="text-sm font-light text-slate-800 tracking-wide transition-all duration-300" style="font-family: 'Space Grotesk', sans-serif; text-shadow: 0 1px 1px rgba(255,255,255,0.9);">Annually</span>
    </div>
  </div>

  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script>
    (function() {
      const container = document.getElementById('hdr-toggle-container');
      const thumb = document.getElementById('hdr-toggle-thumb');
      const icon = document.getElementById('hdr-toggle-icon');
      const text = document.getElementById('hdr-toggle-text');
      let isYearly = true;

      container.addEventListener('click', () => {
        isYearly = !isYearly;
        if (isYearly) {
          thumb.style.transform = 'translateX(64px)';
          text.innerText = 'Annually';
          icon.setAttribute('icon', 'solar:calendar-linear');
          icon.classList.replace('text-slate-500', 'text-indigo-600');
          container.style.background = 'repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px), linear-gradient(180deg, #e0e7ff 0%, #a5b4fc 100%)';
          container.style.borderColor = '#a5b4fc';
        } else {
          thumb.style.transform = 'translateX(0px)';
          text.innerText = 'Monthly';
          icon.setAttribute('icon', 'solar:calendar-mark-linear');
          icon.classList.replace('text-indigo-600', 'text-slate-500');
          container.style.background = 'repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px), linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)';
          container.style.borderColor = '#cbd5e1';
        }
      });
    })();
  </script>
</div>