Pricing Table with Billing Toggle

<div class="w-full flex flex-col gap-12 relative z-10 py-12">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&family=Fraunces:opsz,wght@9..144,300&family=Instrument+Serif:ital@0;1&family=Oswald:wght@300&family=Plus+Jakarta+Sans:wght@300&family=Space+Grotesk:wght@300&display=swap');

    .pricing-container {
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
  </style>

  <header class="flex flex-col items-center text-center gap-8">
    <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>
      <h2 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>
      </h2>
      <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="main-billing-toggle" 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), 0 0 0 6px rgba(238, 242, 255, 0.8); border: 1px solid #a5b4fc;">
      <div id="main-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%); border: 1px solid #eef2ff;">
        <iconify-icon id="main-toggle-icon" icon="solar:calendar-linear"
          class="text-indigo-600 text-base"></iconify-icon>
        <span id="main-toggle-text" class="text-sm font-light text-slate-800 tracking-wide" style="font-family: 'Space Grotesk', sans-serif;">Annually</span>
      </div>
    </div>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 items-center max-w-5xl mx-auto w-full px-6">
    <!-- Tier 1 -->
    <div
      class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 flex flex-col gap-8 transition-transform hover:-translate-y-1 duration-300">
      <div>
        <div
          class="w-12 h-12 rounded-xl flex items-center justify-center bg-blue-50 text-blue-600 border border-blue-100 mb-5">
          <iconify-icon icon="solar:papercraft-linear" class="text-2xl"></iconify-icon>
        </div>
        <h3 class="text-2xl font-light text-slate-900" style="font-family: 'Fraunces', serif;">Essentials</h3>
      </div>
      <div class="flex items-baseline gap-1">
        <span class="text-4xl font-light text-slate-800 main-price" data-monthly="28" data-yearly="18" style="font-family: 'DM Mono', monospace;">$18</span>
        <span class="text-sm text-slate-400 font-light">/mo</span>
      </div>
      <ul class="flex flex-col gap-4 text-sm font-light text-slate-600">
        <li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-emerald-500 text-lg"></iconify-icon> Up to 3 clusters</li>
        <li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-emerald-500 text-lg"></iconify-icon> 2-day metrics</li>
      </ul>
      <button class="w-full py-3 rounded-xl border border-gray-200 text-slate-700 text-sm hover:bg-gray-50">Start for Free</button>
    </div>

    <!-- Tier 2 Highlighted -->
    <div class="relative">
      <div
        class="bg-white rounded-[2rem] p-8 shadow-xl border border-indigo-100 flex flex-col gap-8 relative z-10 md:-translate-y-4 transition-transform hover:-translate-y-5">
        <div
          class="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-[10px] px-3 py-1 rounded-full uppercase tracking-widest"
          style="font-family: 'Oswald', sans-serif;">Suggested</div>
        <div>
          <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5"
            style="background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);">
            <iconify-icon icon="solar:rocket-linear" class="text-white text-2xl"></iconify-icon>
          </div>
          <h3 class="text-2xl font-light text-slate-900" style="font-family: 'Fraunces', serif;">Advanced</h3>
        </div>
        <div class="flex items-baseline gap-1">
          <span class="text-5xl font-light text-slate-800 main-price" data-monthly="74" data-yearly="54" style="font-family: 'DM Mono', monospace;">$54</span>
          <span class="text-sm text-slate-400 font-light">/mo</span>
        </div>
        <ul class="flex flex-col gap-4 text-sm font-light text-slate-600">
          <li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear"
              class="text-indigo-500 text-lg"></iconify-icon> Infinite clusters</li>
          <li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear"
              class="text-indigo-500 text-lg"></iconify-icon> 1-month metrics</li>
        </ul>
        <button class="w-full py-3.5 rounded-xl text-white text-sm shadow-md" style="background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);">Activate Plan</button>
      </div>
    </div>

    <!-- Tier 3 -->
    <div
      class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 flex flex-col gap-8 transition-transform hover:-translate-y-1 duration-300">
      <div>
        <div
          class="w-12 h-12 rounded-xl flex items-center justify-center bg-sky-50 text-sky-600 border border-sky-100 mb-5">
          <iconify-icon icon="solar:buildings-linear" class="text-2xl"></iconify-icon>
        </div>
        <h3 class="text-2xl font-light text-slate-900" style="font-family: 'Fraunces', serif;">Enterprise</h3>
      </div>
      <div class="flex items-baseline gap-1">
        <span class="text-4xl font-light text-slate-800 main-price" data-monthly="164" data-yearly="144" style="font-family: 'DM Mono', monospace;">$144</span>
        <span class="text-sm text-slate-400 font-light">/mo</span>
      </div>
      <ul class="flex flex-col gap-4 text-sm font-light text-slate-600">
        <li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-emerald-500 text-lg"></iconify-icon> Hardware nodes</li>
        <li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-emerald-500 text-lg"></iconify-icon> 24/7 Priority</li>
      </ul>
      <button class="w-full py-3 rounded-xl border border-gray-200 text-slate-700 text-sm hover:bg-gray-50">Talk to Experts</button>
    </div>
  </div>

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

      toggle.addEventListener('click', () => {
        isYearly = !isYearly;
        thumb.style.transform = isYearly ? 'translateX(64px)' : 'translateX(0px)';
        prices.forEach(el => {
          el.style.opacity = '0';
          setTimeout(() => {
            el.innerText = '$' + (isYearly ? el.dataset.yearly : el.dataset.monthly);
            el.style.opacity = '1';
          }, 150);
        });
      });
    })();
  </script>
</div>