GPU Cloud Pricing Section with Billing Toggle

<section
  class="sm:py-32 border-y z-10 bg-[#0a0a0c] border-zinc-900 pt-24 pb-24 relative shadow-[inset_0_20px_40px_rgba(0,0,0,0.5)]"
  id="pricing">
  <!-- background texture -->
  <div
    class="z-0 opacity-50 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMikiLz48L3N2Zz4=')] absolute top-0 right-0 bottom-0 left-0">
  </div>

  <div class="sm:px-6 lg:px-8 max-w-7xl z-10 mr-auto ml-auto pr-4 pl-4 relative">
    <div class="text-center max-w-3xl mx-auto mb-16 scroll-animate">
      <h2 class="text-3xl font-normal tracking-tight text-zinc-100">
        Provision your cluster
      </h2>
      <p class="mt-4 text-base text-zinc-400">
        Straightforward pricing based on physical compute utilization. Scale
        instantly.
      </p>

      <!-- Billing Toggle -->
      <div class="flex items-center justify-center gap-4 mt-8" data-billing="monthly">
        <span class="text-sm text-zinc-500 font-mono uppercase tracking-widest">
              Monthly
            </span>

        <label class="relative flex items-center cursor-pointer select-none">
              <!-- Functional toggle -->
              <input id="billingToggle" type="checkbox" class="sr-only peer">

              <!-- Track -->
              <div class="hw-toggle-track w-12 h-6 rounded-full bg-zinc-700 transition-colors peer-checked:bg-indigo-500/30" aria-hidden="true"></div>

              <!-- Thumb (knob slides to Annually side) -->
              <div class="hw-toggle-thumb transition-transform duration-200 ease-out peer-checked:translate-x-6 bg-zinc-200/90 w-5 h-5 z-10 rounded-full ring-white/10 ring-1 absolute top-0.5 left-1 shadow-[0_6px_16px_rgba(0,0,0,0.55)]" aria-hidden="true"></div>
            </label>

        <span class="text-sm text-zinc-100 font-mono uppercase tracking-widest">
              Annually
              <span class="text-indigo-400 ml-1">-20%</span>
        </span>
      </div>
    </div>

    <!-- IMPORTANT: removed tilt-wrapper so hover doesn't affect both cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto scroll-animate">
      <!-- Dev Tier -->
      <div
        class="tilt-element tactile-glass rounded-[2rem] p-8 border border-zinc-800 hover:border-zinc-700 transition-colors relative group overflow-hidden pricing-card">
        <div
          class="absolute top-0 right-0 w-32 h-32 bg-zinc-800/20 rounded-bl-full blur-2xl group-hover:bg-zinc-700/30 transition-colors pointer-events-none">
        </div>

        <div class="mb-8">
          <div
            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md tactile-inset border border-zinc-800 text-xs font-mono uppercase tracking-widest text-zinc-400 mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu"
              aria-hidden="true" class="lucide lucide-cpu w-3.5 h-3.5">
              <path d="M12 20v2" class=""></path>
              <path d="M12 2v2" class=""></path>
              <path d="M17 20v2" class=""></path>
              <path d="M17 2v2" class=""></path>
              <path d="M2 12h2" class=""></path>
              <path d="M2 17h2" class=""></path>
              <path d="M2 7h2" class=""></path>
              <path d="M20 12h2" class=""></path>
              <path d="M20 17h2" class=""></path>
              <path d="M20 7h2" class=""></path>
              <path d="M7 20v2" class=""></path>
              <path d="M7 2v2" class=""></path>
              <rect x="4" y="4" width="16" height="16" rx="2" class=""></rect>
              <rect x="8" y="8" width="8" height="8" rx="1" class=""></rect>
            </svg>
            Base Compute
          </div>

          <h3 class="text-2xl font-normal text-zinc-100">Developer Node</h3>

          <div class="mt-4 flex items-end gap-1">
            <span class="text-4xl font-normal text-zinc-100 tracking-tight" data-price="" data-monthly="$0.99" data-annual="$0.79">$0.99</span>
            <span class="text-sm text-zinc-500 font-mono mb-1" data-suffix="" data-monthly="/ hr per GPU" data-annual="/ hr per GPU">/ hr per GPU</span>
          </div>

          <p class="mt-4 text-sm text-zinc-400">
            Perfect for prototyping, fine-tuning, and low-latency API
            wrappers.
          </p>
        </div>

        <ul class="space-y-4 mb-8">
          <li class="flex items-center gap-3 text-sm text-zinc-300">
            <div
              class="w-5 h-5 rounded tactile-inset flex items-center justify-center text-indigo-400 border border-zinc-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </div>
            Shared A100/H100 instances
          </li>

          <li class="flex items-center gap-3 text-sm text-zinc-300">
            <div
              class="w-5 h-5 rounded tactile-inset flex items-center justify-center text-indigo-400 border border-zinc-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </div>
            Standard telemetry dashboard
          </li>

          <li class="flex items-center gap-3 text-sm text-zinc-300">
            <div
              class="w-5 h-5 rounded tactile-inset flex items-center justify-center text-indigo-400 border border-zinc-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </div>
            50GB ultra-fast NVMe cache
          </li>
        </ul>

        <button class="w-full btn-physical-dark rounded-xl py-3.5 text-sm font-normal flex items-center justify-center gap-2 group-hover:text-white transition-colors">
              Initialize Sandbox
            </button>
      </div>

      <!-- Enterprise Tier (gradient removed, neutralized) -->
      <div
        class="tilt-element tactile-base rounded-[2rem] p-8 border border-zinc-800 shadow-[0_20px_50px_-15px_rgba(0,0,0,0.55)] relative group overflow-hidden pricing-card">
        <!-- neutral corner glow instead of colorful blob -->
        <div
          class="absolute top-0 right-0 w-48 h-48 bg-zinc-800/20 rounded-bl-full blur-2xl group-hover:bg-zinc-700/25 transition-colors pointer-events-none">
        </div>

        <div class="mb-8 relative z-10">
          <div class="flex justify-between items-start mb-6">
            <div
              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md border border-zinc-800 bg-zinc-900/40 text-xs font-mono uppercase tracking-widest text-zinc-300 shadow-[inset_0_0_10px_rgba(255,255,255,0.04)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="server" aria-hidden="true" class="lucide lucide-server w-3.5 h-3.5">
                <rect width="20" height="8" x="2" y="2" rx="2" ry="2" class=""></rect>
                <rect width="20" height="8" x="2" y="14" rx="2" ry="2" class=""></rect>
                <line x1="6" x2="6.01" y1="6" y2="6" class=""></line>
                <line x1="6" x2="6.01" y1="18" y2="18" class=""></line>
              </svg>
              Dedicated Fabric
            </div>

            <div class="w-2 h-2 rounded-full bg-zinc-300/70 shadow-[0_0_10px_rgba(255,255,255,0.15)] animate-pulse">
            </div>
          </div>

          <h3 class="text-2xl font-normal text-zinc-100">
            Enterprise Core
          </h3>

          <div class="mt-4 flex items-end gap-1">
            <span class="text-4xl font-normal text-zinc-100 tracking-tight" data-price="" data-monthly="Custom" data-annual="Custom">Custom</span>
            <span class="text-sm text-zinc-500 font-mono mb-1" data-suffix="" data-monthly="/ reserved cluster" data-annual="/ reserved cluster">/ reserved cluster</span>
          </div>

          <p class="mt-4 text-sm text-zinc-400">
            Raw physical metal dedicated entirely to your training and
            inference pipelines.
          </p>
        </div>

        <ul class="space-y-4 mb-8 relative z-10">
          <li class="flex items-center gap-3 text-sm text-zinc-200">
            <div
              class="w-5 h-5 rounded tactile-inset flex items-center justify-center text-zinc-200 border border-zinc-800 shadow-[inset_0_0_8px_rgba(255,255,255,0.05)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </div>
            Isolated multi-node H100 clusters
          </li>

          <li class="flex items-center gap-3 text-sm text-zinc-200">
            <div
              class="w-5 h-5 rounded tactile-inset flex items-center justify-center text-zinc-200 border border-zinc-800 shadow-[inset_0_0_8px_rgba(255,255,255,0.05)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </div>
            Uncapped internal NVLink bandwidth
          </li>

          <li class="flex items-center gap-3 text-sm text-zinc-200">
            <div
              class="w-5 h-5 rounded tactile-inset flex items-center justify-center text-zinc-200 border border-zinc-800 shadow-[inset_0_0_8px_rgba(255,255,255,0.05)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="check" aria-hidden="true" class="lucide lucide-check w-3 h-3 text-white">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </div>
            Full thermal and power telemetry
          </li>
        </ul>

        <button class="w-full btn-physical-light rounded-xl py-3.5 text-sm font-normal flex items-center justify-center gap-2 shadow-[0_0_20px_rgba(255,255,255,0.1)]">
              Contact Engineering
              <iconify-icon icon="solar:arrow-right-linear" width="16"></iconify-icon>
            </button>
      </div>
    </div>
  </div>

  <!-- OPTIONAL: per-card hover motion (so only hovered card moves, never both) -->
  <style>
    .pricing-card {
      transition: transform 220ms ease, box-shadow 220ms ease;
      will-change: transform;
    }

    .pricing-card:hover {
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 22px 60px -25px rgba(0, 0, 0, 0.75);
    }
  </style>

  <!-- Toggle logic: updates text + knob slides (CSS handles knob slide via peer-checked) -->
  <script>
    (function () {
          const toggle = document.getElementById("billingToggle");
          if (!toggle) return;

          const billingContainer = toggle.closest("[data-billing]");
          const priceEls = document.querySelectorAll("#pricing [data-price]");
          const suffixEls = document.querySelectorAll("#pricing [data-suffix]");

          function applyBilling(mode) {
            if (billingContainer) billingContainer.setAttribute("data-billing", mode);

            priceEls.forEach((el) => {
              const next = el.getAttribute(mode === "annual" ? "data-annual" : "data-monthly");
              if (next !== null) el.textContent = next;
            });

            suffixEls.forEach((el) => {
              const next = el.getAttribute(mode === "annual" ? "data-annual" : "data-monthly");
              if (next !== null) el.textContent = next;
            });
          }

          // default: monthly
          toggle.checked = false;
          applyBilling("monthly");

          toggle.addEventListener("change", () => {
            applyBilling(toggle.checked ? "annual" : "monthly");
          });
        })();
  </script>
</section>