<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="fw-bold mb-0">Team Members</h5>
    <button class="btn btn-outline-secondary btn-sm" id="bsskReload">Reload</button>
  </div>

  <div class="row g-3" id="bsskGrid">
    <div class="col-12 col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <div class="bssk-skel bssk-avatar"></div>
            <div class="ms-3 flex-grow-1">
              <div class="bssk-skel bssk-line w-75 mb-2"></div>
              <div class="bssk-skel bssk-line w-50"></div>
            </div>
          </div>
          <div class="bssk-skel bssk-line mb-2"></div>
          <div class="bssk-skel bssk-line w-75"></div>
          <div class="bssk-real d-none">
            <div class="d-flex align-items-center mb-3">
              <img src="https://i.pravatar.cc/56?img=12" class="rounded-circle" width="56" height="56" alt="Avatar">
              <div class="ms-3">
                <h6 class="mb-0 fw-bold">Riya Kapoor</h6>
                <small class="text-muted">Product Designer</small>
              </div>
            </div>
            <p class="mb-0 small">Leads the design system and mentors two junior designers on the team.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <div class="bssk-skel bssk-avatar"></div>
            <div class="ms-3 flex-grow-1">
              <div class="bssk-skel bssk-line w-75 mb-2"></div>
              <div class="bssk-skel bssk-line w-50"></div>
            </div>
          </div>
          <div class="bssk-skel bssk-line mb-2"></div>
          <div class="bssk-skel bssk-line w-75"></div>
          <div class="bssk-real d-none">
            <div class="d-flex align-items-center mb-3">
              <img src="https://i.pravatar.cc/56?img=32" class="rounded-circle" width="56" height="56" alt="Avatar">
              <div class="ms-3">
                <h6 class="mb-0 fw-bold">Dev Malhotra</h6>
                <small class="text-muted">Backend Engineer</small>
              </div>
            </div>
            <p class="mb-0 small">Owns the payments service and the on-call rotation for the API team.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <div class="bssk-skel bssk-avatar"></div>
            <div class="ms-3 flex-grow-1">
              <div class="bssk-skel bssk-line w-75 mb-2"></div>
              <div class="bssk-skel bssk-line w-50"></div>
            </div>
          </div>
          <div class="bssk-skel bssk-line mb-2"></div>
          <div class="bssk-skel bssk-line w-75"></div>
          <div class="bssk-real d-none">
            <div class="d-flex align-items-center mb-3">
              <img src="https://i.pravatar.cc/56?img=48" class="rounded-circle" width="56" height="56" alt="Avatar">
              <div class="ms-3">
                <h6 class="mb-0 fw-bold">Anaya Singh</h6>
                <small class="text-muted">Marketing Lead</small>
              </div>
            </div>
            <p class="mb-0 small">Runs the quarterly campaign calendar and the growth experiments backlog.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.bssk-skel {
  background: linear-gradient(90deg, #eceef1 25%, #f6f7f8 37%, #eceef1 63%);
  background-size: 400% 100%;
  animation: bssk-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.bssk-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.bssk-line { height: 12px; width: 100%; }
@keyframes bssk-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.card.is-loaded .bssk-skel { display: none; }
.card:not(.is-loaded) .bssk-real { display: none; }

const grid = document.getElementById('bsskGrid');
const reloadBtn = document.getElementById('bsskReload');
const cards = Array.from(grid.querySelectorAll('.card'));

function showSkeletons() {
  cards.forEach(card => card.classList.remove('is-loaded'));
}

function showLoaded() {
  cards.forEach(card => card.classList.add('is-loaded'));
}

function loadCards() {
  showSkeletons();
  reloadBtn.disabled = true;
  // Simulated network latency before the real card markup is revealed;
  // a real integration would call showLoaded() from a fetch().then().
  setTimeout(() => {
    showLoaded();
    reloadBtn.disabled = false;
  }, 1600);
}

reloadBtn.addEventListener('click', loadCards);

loadCards();