<div class="container py-5">
  <div class="btn-group mb-4" role="group" id="bstgFilter">
    <button type="button" class="btn btn-outline-primary active" data-filter="all">All</button>
    <button type="button" class="btn btn-outline-primary" data-filter="5">5 Stars</button>
    <button type="button" class="btn btn-outline-primary" data-filter="4">4+ Stars</button>
  </div>
  <div class="row g-4" id="bstgGrid">
    <div class="col-12 col-md-6 col-lg-4 bstg-card" data-rating="5">
      <div class="card h-100 p-3">
        <div class="card-body">
          <div class="bstg-stars mb-2"></div>
          <p class="card-text">"Support answered in minutes and actually fixed the issue. Best onboarding experience we've had with any vendor."</p>
          <div class="d-flex align-items-center mt-3">
            <img src="https://i.pravatar.cc/48?img=5" class="rounded-circle me-2" width="48" height="48" alt="Avatar">
            <div><strong class="d-block">Meera Nair</strong><small class="text-muted">Head of Ops, Kite Labs</small></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 bstg-card" data-rating="4">
      <div class="card h-100 p-3">
        <div class="card-body">
          <div class="bstg-stars mb-2"></div>
          <p class="card-text">"Solid product overall. A couple of features took longer than expected to find, but support helped quickly."</p>
          <div class="d-flex align-items-center mt-3">
            <img src="https://i.pravatar.cc/48?img=15" class="rounded-circle me-2" width="48" height="48" alt="Avatar">
            <div><strong class="d-block">Arjun Verma</strong><small class="text-muted">CTO, Northloop</small></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 bstg-card" data-rating="3">
      <div class="card h-100 p-3">
        <div class="card-body">
          <div class="bstg-stars mb-2"></div>
          <p class="card-text">"Does what it says. UI could use a refresh but it hasn't slowed our team down at all."</p>
          <div class="d-flex align-items-center mt-3">
            <img src="https://i.pravatar.cc/48?img=25" class="rounded-circle me-2" width="48" height="48" alt="Avatar">
            <div><strong class="d-block">Priya Das</strong><small class="text-muted">PM, Fieldstack</small></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 bstg-card" data-rating="5">
      <div class="card h-100 p-3">
        <div class="card-body">
          <div class="bstg-stars mb-2"></div>
          <p class="card-text">"Migrated three teams onto this in a week. Genuinely the smoothest rollout we've had."</p>
          <div class="d-flex align-items-center mt-3">
            <img src="https://i.pravatar.cc/48?img=33" class="rounded-circle me-2" width="48" height="48" alt="Avatar">
            <div><strong class="d-block">Sana Iyer</strong><small class="text-muted">Eng Manager, Voltbase</small></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 bstg-card" data-rating="2">
      <div class="card h-100 p-3">
        <div class="card-body">
          <div class="bstg-stars mb-2"></div>
          <p class="card-text">"Pricing tiers were confusing at first and we hit a couple of bugs during setup."</p>
          <div class="d-flex align-items-center mt-3">
            <img src="https://i.pravatar.cc/48?img=41" class="rounded-circle me-2" width="48" height="48" alt="Avatar">
            <div><strong class="d-block">Karan Bhatt</strong><small class="text-muted">Founder, Loopcart</small></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 bstg-card" data-rating="4">
      <div class="card h-100 p-3">
        <div class="card-body">
          <div class="bstg-stars mb-2"></div>
          <p class="card-text">"Reliable day to day. We'd like better export options but it covers our core workflow well."</p>
          <div class="d-flex align-items-center mt-3">
            <img src="https://i.pravatar.cc/48?img=47" class="rounded-circle me-2" width="48" height="48" alt="Avatar">
            <div><strong class="d-block">Devika Rao</strong><small class="text-muted">Ops Lead, Marblewave</small></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.bstg-stars .bi-star-fill,
.bstg-stars span { color: #f5b301; font-size: 1rem; letter-spacing: 1px; }
.bstg-card { transition: opacity 0.15s ease; }
.bstg-card.bstg-hidden { display: none; }

function renderStars(container, rating) {
  container.innerHTML = '';
  for (let i = 1; i <= 5; i++) {
    const star = document.createElement('span');
    star.textContent = i <= rating ? '\u2605' : '\u2606';
    container.appendChild(star);
  }
}

const cards = Array.from(document.querySelectorAll('.bstg-card'));
cards.forEach(card => {
  const rating = parseInt(card.dataset.rating, 10);
  renderStars(card.querySelector('.bstg-stars'), rating);
});

const filterButtons = Array.from(document.querySelectorAll('#bstgFilter button'));

function applyFilter(filter) {
  cards.forEach(card => {
    const rating = parseInt(card.dataset.rating, 10);
    const matches =
      filter === 'all' ||
      (filter === '5' && rating === 5) ||
      (filter === '4' && rating >= 4);
    card.classList.toggle('bstg-hidden', !matches);
  });
}

filterButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    filterButtons.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    applyFilter(btn.dataset.filter);
  });
});