Interactive GPU Pricing Section with Toggle

<section class="sm:py-32 overflow-hidden z-0 border-zinc-800/50 border-t pt-24 pb-24 relative bg-zinc-950"
  id="pricing-component">
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <div
    class="[mask-image:linear-gradient(to_bottom,white,transparent)] z-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9IiMzZjNmNDYiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PC9zdmc+')] absolute top-0 right-0 bottom-0 left-0">
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="max-w-3xl">
      <h2 class="text-4xl font-semibold tracking-tight text-zinc-50 sm:text-5xl">
        Transparent compute pricing
      </h2>
      <p class="mt-6 text-lg leading-8 text-zinc-400">
        Pay only for what you use. Spot pricing available for fault-tolerant workloads.
      </p>
    </div>

    <div class="mt-12 flex justify-start">
      <div id="pricing-toggle-container"
        class="relative flex items-center p-1.5 bg-zinc-950 rounded-full shadow-[inset_2px_2px_6px_rgba(0,0,0,1),inset_-1px_-1px_2px_rgba(255,255,255,0.05),0_1px_1px_rgba(255,255,255,0.1)]">
        <button type="button" data-type="demand" class="pricing-toggle-btn relative w-28 rounded-full py-1.5 text-xs font-medium transition-all text-zinc-100 bg-gradient-to-b from-zinc-700 to-zinc-800 shadow-[0_2px_4px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.15),0_0_0_1px_rgba(0,0,0,1)]">
          On-Demand
        </button>
        <button type="button" data-type="reserved" class="pricing-toggle-btn relative w-28 rounded-full py-1.5 text-xs font-medium transition-all text-zinc-500 hover:text-zinc-300 drop-shadow-sm">
          Reserved
        </button>
      </div>
    </div>

    <div
      class="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3 [perspective:2000px]">
      <!-- Hobby Tier -->
      <div
        class="relative rounded-2xl p-1.5 bg-gradient-to-br from-zinc-700 via-zinc-800 to-zinc-950 shadow-[10px_20px_30px_rgba(0,0,0,0.8),inset_1px_1px_1px_rgba(255,255,255,0.15),0_0_0_1px_rgba(15,15,15,1)] transition-all duration-500 hover:-translate-y-2 lg:[transform:rotateY(6deg)_rotateX(2deg)] lg:hover:[transform:rotateY(0deg)_rotateX(0deg)] flex flex-col group">
        <div
          class="flex-1 rounded-xl bg-zinc-950 shadow-[inset_4px_4px_12px_rgba(0,0,0,1)] p-8 flex flex-col justify-between relative overflow-hidden transition-colors duration-500 group-hover:bg-zinc-900/90">
          <div>
            <h3 class="text-lg font-medium text-zinc-50">Startup</h3>
            <p class="mt-4 text-sm text-zinc-400">For side projects and experiments.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span class="text-4xl font-medium text-zinc-50">$0</span>
              <span class="text-sm font-medium text-zinc-500">/mo</span>
            </p>
            <div class="h-px w-full my-8 bg-transparent shadow-[0_1px_0_rgba(255,255,255,0.05),0_-1px_0_rgba(0,0,0,1)]">
            </div>
            <ul class="space-y-4 text-sm text-zinc-400">
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-500"
                  width="18"></iconify-icon> Up to 3 projects</li>
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-500"
                  width="18"></iconify-icon> Basic analytics</li>
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-500"
                  width="18"></iconify-icon> Community support</li>
            </ul>
          </div>
          <a href="#"
            class="mt-8 block w-full rounded-lg px-3 py-2 text-center text-sm font-medium text-zinc-300 bg-gradient-to-b from-zinc-700 to-zinc-800 shadow-[0_4px_6px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] hover:from-zinc-600 hover:text-zinc-50 active:translate-y-[1px] transition-all">Deploy
            now</a>
        </div>
      </div>

      <!-- Pro Tier -->
      <div
        class="relative z-10 rounded-2xl p-1.5 bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 shadow-[15px_25px_40px_rgba(0,0,0,0.85),inset_1px_1px_1px_rgba(255,255,255,0.2)] transition-all duration-500 hover:-translate-y-2 lg:-translate-y-4 lg:[transform:rotateX(2deg)] lg:hover:[transform:rotateX(0deg)] flex flex-col group">
        <div
          class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-b from-zinc-200 to-zinc-400 px-3 py-1 text-xs font-medium text-zinc-900 shadow-[0_4px_8px_rgba(0,0,0,0.6),inset_0_2px_2px_rgba(255,255,255,1)] z-20">
          Most Popular</div>
        <div
          class="flex-1 rounded-xl bg-zinc-900 shadow-[inset_4px_4px_12px_rgba(0,0,0,1)] p-8 flex flex-col justify-between relative overflow-hidden transition-colors duration-500 group-hover:bg-zinc-900/80">
          <div>
            <h3 class="text-lg font-medium text-zinc-50">Scale</h3>
            <p class="mt-4 text-sm text-zinc-400">For production applications and teams.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span id="price-value" class="text-4xl font-medium text-zinc-50">$3.20</span>
              <span class="text-sm font-medium text-zinc-500">/hr per A100</span>
            </p>
            <div class="h-px w-full my-8 bg-transparent shadow-[0_1px_0_rgba(255,255,255,0.08),0_-1px_0_rgba(0,0,0,1)]">
            </div>
            <ul class="space-y-4 text-sm text-zinc-300">
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-50"
                  width="18"></iconify-icon> Unlimited projects</li>
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-50"
                  width="18"></iconify-icon> Advanced access controls</li>
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-50"
                  width="18"></iconify-icon> Email support</li>
            </ul>
          </div>
          <a href="#"
            class="mt-8 block w-full rounded-lg px-3 py-2 text-center text-sm font-medium text-zinc-900 bg-gradient-to-b from-zinc-100 to-zinc-300 shadow-[0_4px_6px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,1)] hover:from-white active:translate-y-[1px] transition-all">Upgrade
            to Pro</a>
        </div>
      </div>

      <!-- Enterprise Tier -->
      <div
        class="relative rounded-2xl p-1.5 bg-gradient-to-br from-zinc-700 via-zinc-800 to-zinc-950 shadow-[10px_20px_30px_rgba(0,0,0,0.8),inset_1px_1px_1px_rgba(255,255,255,0.15)] transition-all duration-500 hover:-translate-y-2 lg:[transform:rotateY(-6deg)_rotateX(2deg)] lg:hover:[transform:rotateY(0deg)_rotateX(0deg)] flex flex-col group">
        <div
          class="flex-1 rounded-xl bg-zinc-950 shadow-[inset_4px_4px_12px_rgba(0,0,0,1)] p-8 flex flex-col justify-between relative overflow-hidden transition-colors duration-500 group-hover:bg-zinc-900/90">
          <div>
            <h3 class="text-lg font-medium text-zinc-50">Cluster</h3>
            <p class="mt-4 text-sm text-zinc-400">Custom capabilities for large scale.</p>
            <p class="mt-6 flex items-baseline gap-x-1"><span class="text-4xl font-medium text-zinc-50">Custom</span>
            </p>
            <div class="h-px w-full my-8 bg-transparent shadow-[0_1px_0_rgba(255,255,255,0.05),0_-1px_0_rgba(0,0,0,1)]">
            </div>
            <ul class="space-y-4 text-sm text-zinc-400">
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-500"
                  width="18"></iconify-icon> Everything in Pro</li>
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-500"
                  width="18"></iconify-icon> SSO (SAML, OIDC)</li>
              <li class="flex gap-x-3 items-center"><iconify-icon icon="solar:check-circle-linear" class="text-zinc-500"
                  width="18"></iconify-icon> Dedicated success manager</li>
            </ul>
          </div>
          <a href="#"
            class="mt-8 block w-full rounded-lg px-3 py-2 text-center text-sm font-medium text-zinc-300 bg-gradient-to-b from-zinc-700 to-zinc-800 shadow-[0_4px_6px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] hover:from-zinc-600 active:translate-y-[1px] transition-all">Contact
            sales</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function() {
      const container = document.getElementById('pricing-toggle-container');
      const buttons = container.querySelectorAll('.pricing-toggle-btn');
      const priceVal = document.getElementById('price-value');
      
      const activeClasses = ['text-zinc-100', 'bg-gradient-to-b', 'from-zinc-700', 'to-zinc-800', 'shadow-[0_2px_4px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.15),0_0_0_1px_rgba(0,0,0,1)]'];
      const inactiveClasses = ['text-zinc-500', 'hover:text-zinc-300', 'drop-shadow-sm'];

      buttons.forEach(btn => {
        btn.addEventListener('click', () => {
          buttons.forEach(b => {
            b.classList.remove(...activeClasses);
            b.classList.add(...inactiveClasses);
          });
          btn.classList.add(...activeClasses);
          btn.classList.remove(...inactiveClasses);
          
          priceVal.innerText = btn.getAttribute('data-type') === 'demand' ? '$3.20' : '$2.45';
        });
      });
    })();
  </script>
</section>