<div class="container my-5">
  <h2 class="text-center mb-4 fw-bold">🌟 Jugadores Destacados</h2>
  <div class="row" id="players-container"></div>
</div>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f8f9fa;
}

.card {
  border: none;
  transition: transform 0.2s;
   background-color: #f8f9fa;
}

.card:hover {
  transform: translateY(-5px);
}

.player-img {
  object-fit: cover;
   -webkit-mask-image: linear-gradient(black 90%, transparent);
}

.card-body {
  background: #f8f9fa;
}

const getPlayers = async () => {
  try {
    const res = await fetch("https://devsapihub.com/api-players");
    const data = await res.json();

    const container = document.getElementById("players-container");

    data.forEach(player => {
      const card = document.createElement("div");
      card.className = "col-12 col-sm-6 col-md-4 col-lg-3 mb-4";
      card.innerHTML = `
        <div class="card h-100">
          <img src="${player.imgSrc}" class="card-img-top player-img" alt="${player.name}">
          <div class="card-body d-flex flex-column mt-4">
            <h5 class="card-title">${player.name}</h5>
            <small class="text-muted">${player.number}</small>
            <p class="mb-1"><strong>Posición:</strong> ${player.position}</p>
            <p class="mb-1"><strong>Estadísticas:</strong> ${player.stats}</p>
            <p class="mb-1"><strong>Equipo:</strong> ${player.teamName}</p>
            <p class="text-muted mt-auto">${player.info}</p>
          </div>
        </div>
      `;
      container.appendChild(card);
    });

  } catch (error) {
    console.error("Error al obtener los jugadores:", error);
  }
};

getPlayers();