<div class="container mt-5">
  <h2 class="text-center mb-4 fw-bold"> 🛍️✨ Productos que Te Encantarán</h2>

  <div class="row" id="productos-container"></div>
</div>

body {
  background-color: #fbfafb !important;
}
.card img {
  -webkit-mask-image: linear-gradient(black 80%, transparent);
  mask-image: linear-gradient(black 80%, transparent);
}
.btn-cart {
  background-color: #1b1a20 !important;
  color: white !important;
}
.btn-cart:hover {
  background-color: #333 !important;
  color: #fff !important;
}
.custom-card:hover img {
  transform: scale(1.1);
}

.custom-card img {
  transition: transform 0.3s ease-in-out;
}

const renderProducts = (productos) => {
  const container = document.getElementById("productos-container");
  container.innerHTML = ""; // Limpiar el contenedor

  productos.forEach((producto) => {
    const col = document.createElement("div");
    col.className = "col-6 col-md-3 mb-4";

    col.innerHTML = `
      <div class="card h-100 border-0 custom-card d-flex flex-column">
        <img class="card-img-top" src="${producto.img}" alt="${producto.title}">
        <div class="card-body d-flex flex-column flex-grow-1">
          <h5 class="card-title">${producto.title}</h5>
          <p class="card-text">Categoría: <strong>${producto.style}</strong></p>
          <p class="card-text">Precio: <strong class="price">$${producto.price}</strong></p>
          <button class="btn btn-cart w-100 mt-auto">Agregar al carrito &nbsp;<i class="bi bi-cart-plus"></i></button>
        </div>
      </div>
    `;

    container.appendChild(col);
  });
};

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

    if (!res.ok) {
      throw new Error("Error en la respuesta de la API");
    }

    renderProducts(data);
  } catch (error) {
    console.error("Error al obtener los productos:", error.message);
  }
};

getProducts();