<div class="demo">
  <div class="ladder-card">
    <div class="ladder-head">
      <span class="ladder-label">Commit longer, save more</span>
      <div class="ladder-price">
        <span id="ladderPrice">$49</span><small>/mo</small>
      </div>
      <span class="ladder-billed" id="ladderBilled">Billed monthly</span>
    </div>

    <div class="ladder-track" id="ladderTrack" role="slider" tabindex="0" aria-label="Commitment length" aria-valuemin="0" aria-valuemax="3" aria-valuenow="0" aria-valuetext="Monthly, no discount">
      <div class="ladder-fill" id="ladderFill"></div>
      <div class="ladder-stops">
        <button class="stop" data-idx="0" aria-label="Monthly"></button>
        <button class="stop" data-idx="1" aria-label="3 months"></button>
        <button class="stop" data-idx="2" aria-label="12 months"></button>
        <button class="stop" data-idx="3" aria-label="24 months"></button>
      </div>
    </div>
    <div class="ladder-ticks">
      <span>Monthly</span><span>3 mo</span><span>12 mo</span><span>24 mo</span>
    </div>

    <div class="ladder-savings" id="ladderSavings">No commitment — cancel anytime.</div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.ladder-card { width: 340px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }

.ladder-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ladder-label { font-size: 11.5px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.04em; }
.ladder-price { font-size: 34px; font-weight: 800; color: #111827; }
.ladder-price small { font-size: 14px; font-weight: 600; color: #94a3b8; }
.ladder-billed { font-size: 11.5px; color: #94a3b8; font-weight: 600; }

.ladder-track { position: relative; height: 6px; background: #e2e8f0; border-radius: 999px; margin: 10px 4px; cursor: pointer; }
.ladder-track:focus-visible { outline: 2px solid #6366f1; outline-offset: 6px; border-radius: 999px; }
.ladder-fill { position: absolute; top: 0; left: 0; height: 100%; background: #6366f1; border-radius: 999px; transition: width 0.25s ease; width: 0%; }
.ladder-stops { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); }
.stop { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #e2e8f0; cursor: pointer; padding: 0; transition: border-color 0.2s, transform 0.2s; }
.stop.active { border-color: #6366f1; transform: scale(1.15); }

.ladder-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: #94a3b8; font-weight: 600; padding: 0 2px; }

.ladder-savings { text-align: center; font-size: 12.5px; font-weight: 700; color: #059669; background: #f0fdf4; border-radius: 10px; padding: 10px; transition: color 0.2s, background 0.2s; }
.ladder-savings.neutral { color: #94a3b8; background: #f8fafc; }

const track = document.getElementById('ladderTrack');
const fill = document.getElementById('ladderFill');
const priceEl = document.getElementById('ladderPrice');
const billedEl = document.getElementById('ladderBilled');
const savingsEl = document.getElementById('ladderSavings');
const stops = Array.from(track.querySelectorAll('.stop'));

const BASE_MONTHLY = 49;

// Each tier's discount off the base monthly price, and how billing is described.
const tiers = [
  { months: 1, discount: 0, label: 'Monthly, no discount', billed: 'Billed monthly' },
  { months: 3, discount: 0.10, label: '3 month commitment, 10% off', billed: 'Billed every 3 months' },
  { months: 12, discount: 0.20, label: '12 month commitment, 20% off', billed: 'Billed annually' },
  { months: 24, discount: 0.30, label: '24 month commitment, 30% off', billed: 'Billed every 2 years' },
];

let index = 0;

function render() {
  const tier = tiers[index];
  const price = BASE_MONTHLY * (1 - tier.discount);
  const totalSaved = (BASE_MONTHLY - price) * tier.months;

  priceEl.textContent = '$' + price.toFixed(price % 1 === 0 ? 0 : 2);
  billedEl.textContent = tier.billed;
  fill.style.width = (index / (tiers.length - 1)) * 100 + '%';

  stops.forEach((s, i) => s.classList.toggle('active', i === index));

  if (tier.discount === 0) {
    savingsEl.textContent = 'No commitment — cancel anytime.';
    savingsEl.classList.add('neutral');
  } else {
    savingsEl.textContent = `Save $${totalSaved.toFixed(0)} total over ${tier.months} months (${(tier.discount * 100).toFixed(0)}% off).`;
    savingsEl.classList.remove('neutral');
  }

  track.setAttribute('aria-valuenow', String(index));
  track.setAttribute('aria-valuetext', tier.label);
}

function setIndex(newIndex) {
  index = Math.max(0, Math.min(tiers.length - 1, newIndex));
  render();
}

stops.forEach((stop, i) => {
  stop.addEventListener('click', (e) => {
    e.stopPropagation();
    setIndex(i);
  });
});

track.addEventListener('click', (e) => {
  const rect = track.getBoundingClientRect();
  const pct = (e.clientX - rect.left) / rect.width;
  setIndex(Math.round(pct * (tiers.length - 1)));
});

track.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { setIndex(index + 1); e.preventDefault(); }
  if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { setIndex(index - 1); e.preventDefault(); }
  if (e.key === 'Home') { setIndex(0); e.preventDefault(); }
  if (e.key === 'End') { setIndex(tiers.length - 1); e.preventDefault(); }
});

render();