<div class="container py-5">
  <div class="text-center mb-4">
    <div class="d-flex justify-content-center align-items-center gap-3">
      <span class="fw-semibold">Monthly</span>
      <div class="form-check form-switch fs-4 m-0">
        <input class="form-check-input" type="checkbox" role="switch" id="bspBillingToggle">
      </div>
      <span class="fw-semibold">Yearly</span>
    </div>
    <div class="small text-success fw-semibold mt-1" id="bspSaveNote" style="visibility:hidden;">Billed yearly, save 20%</div>
  </div>

  <div class="row g-4 justify-content-center">
    <div class="col-md-4">
      <div class="card h-100 bsp-card">
        <div class="card-body p-4 d-flex flex-column">
          <h5 class="fw-bold">Basic</h5>
          <p class="text-muted small">For individuals getting started.</p>
          <div class="mb-3">
            <span class="fs-2 fw-bold bsp-price" data-monthly="9" data-yearly="7.2">$9</span>
            <span class="text-muted">/mo</span>
          </div>
          <ul class="list-unstyled small flex-grow-1">
            <li class="mb-2">✓ 1 project</li>
            <li class="mb-2">✓ 5 GB storage</li>
            <li class="mb-2">✓ Community support</li>
          </ul>
          <button class="btn btn-outline-dark w-100">Choose Basic</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card h-100 bsp-card bsp-popular position-relative border-dark">
        <span class="badge text-bg-dark bsp-ribbon">Most Popular</span>
        <div class="card-body p-4 d-flex flex-column">
          <h5 class="fw-bold">Pro</h5>
          <p class="text-muted small">For growing teams that need more.</p>
          <div class="mb-3">
            <span class="fs-2 fw-bold bsp-price" data-monthly="29" data-yearly="23.2">$29</span>
            <span class="text-muted">/mo</span>
          </div>
          <ul class="list-unstyled small flex-grow-1">
            <li class="mb-2">✓ 10 projects</li>
            <li class="mb-2">✓ 100 GB storage</li>
            <li class="mb-2">✓ Priority email support</li>
            <li class="mb-2">✓ Team collaboration</li>
          </ul>
          <button class="btn btn-dark w-100">Choose Pro</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card h-100 bsp-card">
        <div class="card-body p-4 d-flex flex-column">
          <h5 class="fw-bold">Enterprise</h5>
          <p class="text-muted small">For organizations at scale.</p>
          <div class="mb-3">
            <span class="fs-2 fw-bold bsp-price" data-monthly="99" data-yearly="79.2">$99</span>
            <span class="text-muted">/mo</span>
          </div>
          <ul class="list-unstyled small flex-grow-1">
            <li class="mb-2">✓ Unlimited projects</li>
            <li class="mb-2">✓ 1 TB storage</li>
            <li class="mb-2">✓ Dedicated account manager</li>
          </ul>
          <button class="btn btn-outline-dark w-100">Choose Enterprise</button>
        </div>
      </div>
    </div>
  </div>
</div>

.bsp-card { border: 1px solid #eceef1; border-radius: 14px; transition: transform 0.15s ease; }
.bsp-card:hover { transform: translateY(-4px); }
.bsp-popular { box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.bsp-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; }

const toggle = document.getElementById('bspBillingToggle');
const saveNote = document.getElementById('bspSaveNote');
const prices = Array.from(document.querySelectorAll('.bsp-price'));

function formatPrice(value) {
  const num = parseFloat(value);
  return Number.isInteger(num) ? '$' + num : '$' + num.toFixed(1);
}

function updatePrices() {
  const yearly = toggle.checked;
  saveNote.style.visibility = yearly ? 'visible' : 'hidden';
  prices.forEach(el => {
    const value = yearly ? el.getAttribute('data-yearly') : el.getAttribute('data-monthly');
    el.textContent = formatPrice(value);
  });
}

toggle.addEventListener('change', updatePrices);

updatePrices();