---
import Base from "../layouts/Base.astro";
import Icon from "../components/Icon.astro";
import { getProductosVisibles, familiaColor } from "../data/productos";
import { DEMO_MODE } from "../data/config";

const productos = getProductosVisibles(DEMO_MODE);
---

<Base
  title={`Productos | Acepla - Nueva Maquinaria S.A.`}
  description="Conozca toda nuestra línea de implementos agrícolas: acoplados, tanques, tolvas, labranza, carga, postcosecha y más."
>
  <!-- Cabecera -->
  <section class="bg-[#2e2e2e] py-16">
    <div class="container-x text-center">
      <h1 class="text-white text-4xl mb-3">Nuestros Productos</h1>
      <p class="text-[#f3b9b9]">Implementos agrícolas de primera calidad</p>
    </div>
  </section>

  <section class="container-x py-10">
    {/* Filtros — ocultos en modo demo (solo hay un producto) */}
    {!DEMO_MODE && (
    <div class="flex flex-wrap justify-center gap-3 mb-10">
      <button data-filter="all" class="filter-btn active px-5 py-2 rounded-full text-sm font-display font-semibold uppercase tracking-wide bg-acepla-700 text-white">
        Todos
      </button>
    </div>
    )}

    <!-- Grid de productos -->
    <div id="product-grid" class:list={DEMO_MODE ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-2xl mx-auto" : "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"}>
      {productos.map((p) => (
        <a
          href={`/productos/${p.slug}`}
          class:list={["product-card card", `familia-${p.familia.replace(/\s/g, "-")}`]}
          data-familia={p.familia}
        >
          <div class="aspect-[4/3] bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center p-6 overflow-hidden">
            <img
              src={p.imagenes[0]}
              alt={p.nombre}
              class="max-h-full max-w-full object-contain desaturate group-hover:!grayscale-0 transition-all duration-500"
              loading="lazy"
              width="400"
              height="300"
            />
          </div>
          <div class="p-5 flex flex-col flex-1">
            <span class:list={["badge mb-2 w-fit", familiaColor[p.familia]]}>{p.familia}</span>
            <h3 class="text-lg font-display font-semibold text-ink mb-1.5 leading-tight">{p.nombre}</h3>
            <p class="text-sm text-ink-soft leading-relaxed flex-1">{p.resumen}</p>
            <span class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-acepla-700 group-hover:gap-2 transition-all">
              Ver detalles <Icon name="arrowRight" size={16} />
            </span>
          </div>
        </a>
      ))}
    </div>

    {/* Mensaje "próximamente" en modo demo */}
    {DEMO_MODE && (
      <div class="mt-12 max-w-2xl mx-auto text-center">
        <div class="rounded-xl border border-dashed border-line bg-gray-50/50 px-8 py-10">
          <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-acepla-100 flex items-center justify-center text-acepla-700">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7Z"/></svg>
          </div>
          <h3 class="font-display font-semibold text-ink mb-1">Más productos próximamente</h3>
          <p class="text-sm text-ink-soft">Estamos trabajando en el catálogo completo de implementos agrícolas.</p>
        </div>
      </div>
    )}
  </section>
</Base>

<script>
  // Filtros
  const buttons = document.querySelectorAll<HTMLButtonElement>(".filter-btn");
  const cards = document.querySelectorAll<HTMLElement>(".product-card");
  buttons.forEach((btn) => {
    btn.addEventListener("click", () => {
      const filter = btn.dataset.filter;
      buttons.forEach((b) => {
        const active = b === btn;
        b.classList.toggle("active", active);
        b.classList.toggle("bg-acepla-700", active);
        b.classList.toggle("text-white", active);
        b.classList.toggle("bg-white", !active);
        b.classList.toggle("border", !active);
        b.classList.toggle("border-line", !active);
        b.classList.toggle("text-ink-soft", !active);
      });
      cards.forEach((card) => {
        const show = filter === "all" || card.dataset.familia === filter;
        card.style.display = show ? "" : "none";
      });
    });
  });
</script>

<style>
  .product-card:hover img {
    filter: none !important;
  }
</style>