Billing Plan Upgrade Modal with Payment Method Selection

<div
  class="relative shadow-[0_20px_60px_-15px_rgba(0,0,0,.6)] ring-1 ring-white/10 bg-neutral-900/95 rounded-2xl backdrop-blur">
  <!-- Header -->
  <div class="flex items-start justify-between p-6 sm:p-8 border-b border-white/10">
    <div class="flex items-center gap-3">
      <div
        class="h-8 w-8 rounded-md grid place-items-center bg-white/5 ring-1 ring-white/10 text-white text-[10px] font-semibold tracking-tight">
        NV</div>
      <div class="">
        <h2 class="text-2xl tracking-tight font-semibold text-white">Update billing plan</h2>
        <p class="text-xs text-neutral-400">Nova Cloud • Workspace: Orion Research</p>
      </div>
    </div>
    <button id="closeModal" class="shrink-0 p-2 rounded-lg text-neutral-400 hover:text-neutral-100 hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-white/20" aria-label="Close">
            <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="x" class="lucide lucide-x w-5 h-5"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
          </button>
  </div>

  <!-- Content -->
  <div class="sm:px-8 sm:pb-8 pt-6 pr-6 pb-6 pl-6 space-y-8">
    <!-- Plan summary -->
    <div class="rounded-xl bg-neutral-800/60 ring-1 ring-white/10 p-4 sm:p-5 flex items-center justify-between">
      <div class="min-w-0">
        <div class="text-base font-medium text-white">Studio Pro</div>
        <div class="text-sm text-neutral-400 truncate">Up to 10 seats · Priority support · Usage insights</div>
      </div>
      <div class="text-right">
        <div class="text-xl font-semibold text-white tracking-tight">
          $49<span class="text-sm text-neutral-400 font-normal">/month</span></div>
        <div class="text-[11px] text-neutral-400">or $499/year</div>
      </div>
    </div>

    <!-- What's included -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
        <div
          class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-orange-400">
          <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="sparkles" class="lucide lucide-sparkles w-4 h-4">
            <path
              d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
              class=""></path>
            <path d="M20 2v4" class=""></path>
            <path d="M22 4h-4" class=""></path>
            <circle cx="4" cy="20" r="2" class=""></circle>
          </svg>
        </div>
        <div class="min-w-0">
          <p class="text-sm font-medium text-white">Advanced workflows</p>
          <p class="text-xs text-neutral-400">Approvals, automation, and scheduled runs</p>
        </div>
      </div>
      <div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
        <div class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-blue-400">
          <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="bar-chart-3" class="lucide lucide-bar-chart-3 w-4 h-4">
            <path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
            <path d="M18 17V9" class=""></path>
            <path d="M13 17V5" class=""></path>
            <path d="M8 17v-3" class=""></path>
          </svg>
        </div>
        <div class="min-w-0">
          <p class="text-sm font-medium text-white">Usage analytics</p>
          <p class="text-xs text-neutral-400">Real-time dashboards and export</p>
        </div>
      </div>
      <div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
        <div
          class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-emerald-400">
          <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="users"
            class="lucide lucide-users w-4 h-4">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
            <path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
            <circle cx="9" cy="7" r="4" class=""></circle>
          </svg>
        </div>
        <div class="min-w-0">
          <p class="text-sm font-medium text-white">10 seats included</p>
          <p class="text-xs text-neutral-400">Add teammates with granular roles</p>
        </div>
      </div>
      <div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
        <div
          class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-violet-400">
          <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="headphones" class="lucide lucide-headphones w-4 h-4">
            <path
              d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
              class=""></path>
          </svg>
        </div>
        <div class="min-w-0">
          <p class="text-sm font-medium text-white">Priority support</p>
          <p class="text-xs text-neutral-400">Live chat and 4-hour response SLA</p>
        </div>
      </div>
    </div>

    <p class="text-sm text-neutral-400">
      Your plan will be upgraded immediately. A pro‑rated amount will be charged today and applied to your next billing
      date.
    </p>

    <!-- Payment methods -->
    <div class="border-t border-white/10 pt-6 space-y-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <h3 class="text-sm font-medium text-white tracking-tight">Payment method</h3>
          <span class="text-[11px] text-neutral-400">Secured by ArcPay</span>
        </div>
        <button id="manageBilling" class="text-xs text-neutral-300 hover:text-white px-2.5 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10">
                Manage billing
              </button>
      </div>

      <div class="space-y-3" id="paymentList" role="radiogroup" aria-label="Payment methods">
        <!-- Aster Bank (Debit) -->
        <label class="group flex items-center gap-4 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 hover:bg-neutral-800/40 transition-colors p-4 cursor-pointer">
                <input type="radio" name="payment" value="aster_2841" class="sr-only peer">
                <div class="flex items-center gap-4 flex-1">
                  <div class="w-12 h-8 rounded-md bg-neutral-800 ring-1 ring-white/15 grid place-items-center">
                    <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="contact" class="lucide lucide-contact w-4 h-4 text-neutral-200"><path d="M16 2v2" class=""></path><path d="M7 22v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2" class=""></path><path d="M8 2v2" class=""></path><circle cx="12" cy="11" r="3" class=""></circle><rect x="3" y="4" width="18" height="18" rx="2" class=""></rect></svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium text-white">Aster Bank • Debit ****2841</p>
                    <p class="text-xs text-neutral-400">Expiry: 06/28</p>
                  </div>
                </div>
                <span class="relative grid place-items-center">
                  <span class="w-5 h-5 rounded-full ring-1 ring-white/20 bg-neutral-900/60 peer-checked:ring-orange-500/60"></span>
                  <span class="absolute w-2.5 h-2.5 rounded-full bg-transparent peer-checked:bg-orange-500 transition-colors"></span>
                </span>
              </label>

        <!-- OrionCard (Credit) -->
        <label class="group flex items-center gap-4 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 hover:bg-neutral-800/40 transition-colors p-4 cursor-pointer">
                <input type="radio" name="payment" value="orion_6798" class="sr-only peer">
                <div class="flex items-center gap-4 flex-1">
                  <div class="w-12 h-8 rounded-md ring-1 ring-white/15 bg-neutral-800 grid place-items-center">
                    <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="credit-card" class="lucide lucide-credit-card w-4 h-4 text-neutral-200"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium text-white">OrionCard • Credit ****6798</p>
                    <p class="text-xs text-neutral-400">Expiry: 09/27</p>
                  </div>
                </div>
                <span class="relative grid place-items-center">
                  <span class="w-5 h-5 rounded-full ring-1 ring-white/20 bg-neutral-900/60 peer-checked:ring-orange-500/60"></span>
                  <span class="absolute w-2.5 h-2.5 rounded-full bg-transparent peer-checked:bg-orange-500 transition-colors"></span>
                </span>
              </label>
      </div>

      <div class="flex items-center gap-3">
        <button id="addPayment" class="flex-1 flex items-center justify-center gap-2 rounded-xl border border-dashed border-white/15 hover:border-white/25 bg-neutral-900/40 hover:bg-neutral-800/40 text-neutral-300 hover:text-white transition-colors py-3">
                <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="plus" class="lucide lucide-plus w-4 h-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                <span class="text-sm font-medium">Add payment method</span>
              </button>
        <button id="applyCode" class="px-3.5 py-3 rounded-xl bg-white/5 hover:bg-white/10 text-neutral-200 text-sm font-medium ring-1 ring-white/10">
                <div class="flex items-center gap-2">
                  <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="ticket" class="lucide lucide-ticket w-4 h-4"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" class=""></path><path d="M13 5v2" class=""></path><path d="M13 17v2" class=""></path><path d="M13 11v2" class=""></path></svg>
                  <span>Apply code</span>
                </div>
              </button>
      </div>

      <div class="flex items-center gap-2 text-xs text-neutral-400">
        <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="shield-check" class="lucide lucide-shield-check w-4 h-4 text-emerald-400">
          <path
            d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
            class=""></path>
          <path d="m9 12 2 2 4-4" class=""></path>
        </svg>
        <span>Payments are encrypted. VAT may apply at checkout.</span>
      </div>
    </div>

    <!-- Footer actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-2">
      <p class="text-xs text-neutral-400">By upgrading, you agree to our <a href="#"
          class="text-neutral-200 hover:text-white underline underline-offset-4">Terms</a> and <a href="#"
          class="text-neutral-200 hover:text-white underline underline-offset-4">Privacy</a>.</p>
      <div class="flex items-center justify-end gap-3">
        <button class="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-neutral-200 text-sm font-medium ring-1 ring-white/10">Cancel</button>
        <button id="upgradeBtn" class="px-4 sm:px-5 py-2.5 rounded-xl bg-orange-600 hover:bg-orange-500 text-white text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed transition-colors" disabled="">
                Confirm upgrade
              </button>
      </div>
    </div>
  </div>
</div>