Upsell Toggle Card

<div class="bg-black/30 ring-1 ring-white/10 rounded-2xl p-5 flex flex-col justify-between min-h-[200px]">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
    .font-geist { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; }
  </style>
  <div>
    <p class="text-base font-medium tracking-tight font-geist text-white">Need growth acceleration?</p>
    <p class="mt-2 text-sm text-white/70 font-geist">Add strategic marketing and SEO optimization.</p>
  </div>
  <div class="mt-8 flex items-center justify-between">
    <div class="text-sm font-geist">
      <span class="text-white/90">+ $1,850</span>
    </div>
    <button type="button" role="switch" aria-checked="false" data-upsell-switch="" class="inline-flex h-6 w-11 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition-colors duration-200 hover:bg-white/20">
      <span data-upsell-knob="" class="h-4 w-4 translate-x-0 rounded-full bg-white transition-transform duration-200"></span>
      <span class="sr-only">Toggle Growth Package add-on</span>
    </button>
  </div>
  <script>
    const toggleSwitch = document.querySelector('[data-upsell-switch]');
    const knob = document.querySelector('[data-upsell-knob]');
    
    if (toggleSwitch && knob) {
      toggleSwitch.addEventListener('click', function() {
        const isChecked = this.getAttribute('aria-checked') === 'true';
        
        if (isChecked) {
          this.setAttribute('aria-checked', 'false');
          this.classList.remove('bg-blue-500');
          this.classList.add('bg-white/10');
          knob.classList.remove('translate-x-5');
          knob.classList.add('translate-x-0');
        } else {
          this.setAttribute('aria-checked', 'true');
          this.classList.remove('bg-white/10');
          this.classList.add('bg-blue-500');
          knob.classList.remove('translate-x-0');
          knob.classList.add('translate-x-5');
        }
      });
    }
  </script>
</div>