<div class="container py-5 d-flex justify-content-center">
  <div class="card bscur-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="fw-bold mb-0">Pro plan</h6>
        <select class="form-select form-select-sm" id="bscurSelect" style="max-width:110px;">
          <option value="USD">USD $</option>
          <option value="EUR">EUR &euro;</option>
          <option value="GBP">GBP &pound;</option>
          <option value="INR">INR &#8377;</option>
          <option value="JPY">JPY &yen;</option>
        </select>
      </div>
      <p class="display-6 fw-bold mb-1" id="bscurPrice">$29.00</p>
      <p class="small text-muted mb-0">per month, billed monthly</p>
    </div>
  </div>
</div>

.bscur-card { width: 300px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }

const BASE_USD = 29;

// Fixed illustrative rates and symbols per currency — a real implementation
// should source live rates from an actual exchange-rate API instead.
const RATES = {
  USD: { rate: 1, symbol: '$', decimals: 2 },
  EUR: { rate: 0.92, symbol: '\u20ac', decimals: 2 },
  GBP: { rate: 0.79, symbol: '\u00a3', decimals: 2 },
  INR: { rate: 83.1, symbol: '\u20b9', decimals: 0 },
  JPY: { rate: 149.3, symbol: '\u00a5', decimals: 0 },
};

const select = document.getElementById('bscurSelect');
const priceEl = document.getElementById('bscurPrice');

function render() {
  const info = RATES[select.value];
  const converted = BASE_USD * info.rate;
  priceEl.textContent = info.symbol + converted.toLocaleString(undefined, {
    minimumFractionDigits: info.decimals,
    maximumFractionDigits: info.decimals,
  });
}

select.addEventListener('change', render);
render();