<div class="container my-5">
  <h2 class="text-center mb-4 fw-bold">🍔 Menú Fast Food desde la API</h2>
  <div id="food-container" class="row g-4"></div>
</div>

body {
  font-family: 'Poppins', sans-serif;
  background-color: #fffdf7;
  color: #333;
}

.card-img-top {
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  -webkit-mask-image: linear-gradient(black 80%, transparent);
}

.btn-order {
  background-color: #e1623a;
  color: white;
}

.btn-order:hover {
  background-color: #e64a19;
}

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

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

    pintarProductos(data);
  } catch (error) {
    console.error("Error al obtener fast food:", error.message);
  }
};

const pintarProductos = (productos) => {
  const container = document.getElementById("food-container");
  container.innerHTML = "";

  productos.forEach((item) => {
    container.innerHTML += `
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="card h-100 border-0">
          <img src="${item.image}" alt="${item.name}" class="card-img-top">
          <div class="card-body d-flex flex-column">
            <h6 class="card-title">${item.name}</h6>
            <p class="card-text">Categoría: <strong>${item.category}</strong></p>
            <p class="card-text">Precio: <strong class="text-success">$${item.price}</strong></p>
            <button class="btn btn-order mt-auto w-100">
              Ordenar ahora <i class="bi bi-bag-plus"></i>
            </button>
          </div>
        </div>
      </div>
    `;
  });
};

document.addEventListener("DOMContentLoaded", getFastFood);