---
import { productos, ordenCarruselHome, DEMO_PRODUCTO_VISIBLE_SLUG } from "../data/productos";
import { DEMO_MODE } from "../data/config";

// Mapear el orden del carrusel original a productos por implemento id
// En modo demo, solo se muestra el producto visible
const productosCarrusel = DEMO_MODE
  ? productos.filter((p) => p.slug === DEMO_PRODUCTO_VISIBLE_SLUG)
  : ordenCarruselHome
      .map((id) => productos.find((p) => p.id === id))
      .filter((p): p is NonNullable<typeof p> => Boolean(p));
---

<!-- ==================== CARRUSEL PRODUCTOS (slick-like, vanilla) ==================== -->
<div class="bg-soft-white">
  <div class="container-x py-[50px]">
    <div class="text-center mb-[40px]">
      <h3 class="text-[32px] text-ink text-shadow-soft">Nuestros Productos</h3>
    </div>

    {/* En modo demo, mostrar el único producto centrado sin carrusel */}
    <div class:list={DEMO_MODE ? "flex justify-center" : "relative"}>

    <div class="relative">
      <!-- Track -->
      <div id="product-carousel" class="flex gap-6 overflow-x-auto no-scrollbar snap-x snap-mandatory pb-4 -mx-2 px-2 scroll-smooth">
        {productosCarrusel.map((p) => (
          <a
            href={`/productos/${p.slug}`}
            class="snap-start shrink-0 w-[280px] sm:w-[300px] group"
          >
            <div class="flex flex-col items-center">
              <div class="h-[180px] flex items-center justify-center">
                <img
                  src={p.imagenes[0]}
                  alt={p.nombre}
                  class="max-h-full max-w-full object-contain desaturate group-hover:!grayscale-0 transition-all"
                  loading="lazy"
                  width="280"
                  height="180"
                />
              </div>
              <p class="mt-3 text-center font-display font-semibold text-sm text-ink-soft group-hover:text-acepla-700 transition-colors">
                {p.nombre}
              </p>
            </div>
          </a>
        ))}
      </div>

      <!-- Flechas (ocultas en modo demo) -->
      {!DEMO_MODE && (
        <>
          <button
            class="carousel-arrow absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-11 h-11 rounded-full bg-white shadow-md text-acepla-700 hover:bg-acepla-700 hover:text-white transition-colors"
            data-dir="-1"
            aria-label="Anterior"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z"/></svg>
          </button>
          <button
            class="carousel-arrow absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-11 h-11 rounded-full bg-white shadow-md text-acepla-700 hover:bg-acepla-700 hover:text-white transition-colors"
            data-dir="1"
            aria-label="Siguiente"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41Z"/></svg>
          </button>
        </>
      )}
    </div>
  </div>
</div>

<script>
  const carousel = document.getElementById("product-carousel");
  const arrows = document.querySelectorAll<HTMLButtonElement>(".carousel-arrow");
  arrows.forEach((arrow) => {
    arrow.addEventListener("click", () => {
      const dir = Number(arrow.dataset.dir);
      const scrollAmount = 316 * 2 * dir; // 2 cards
      carousel?.scrollBy({ left: scrollAmount, behavior: "smooth" });
    });
  });
</script>