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

<Base
  title={`Descargas | Acepla - Nueva Maquinaria S.A.`}
  description="Descargue nuestros folletos, certificados de calidad y lista de precios."
>
  {DEMO_MODE ? (
    <WipPlaceholder seccion="La sección de Descargas" />
  ) : (
  <>
  <!-- Cabecera -->
  <section class="bg-[#2e2e2e] py-16">
    <div class="container-x text-center">
      <h1 class="text-white text-4xl mb-3">Descargas</h1>
      <p class="text-[#f3b9b9]">Folletos, catálogos y documentos</p>
    </div>
  </section>

  <section class="container-x py-12">

    <!-- Lista de Precios (con "auth tonta") -->
    <div class="max-w-3xl mx-auto mb-14">
      <div class="card p-8 text-center">
        <div class="w-16 h-16 rounded-full bg-acepla-100 flex items-center justify-center text-acepla-700 mb-4 mx-auto">
          <Icon name="download" size={32} />
        </div>
        <h2 class="text-2xl font-display font-bold mb-2">Lista de Precios</h2>
        <p class="text-ink-soft mb-6">Descargue la última versión de nuestra Lista de Precios. Ingrese sus credenciales para acceder.</p>

        <!-- Formulario de acceso (auth tonto client-side) -->
        <div id="login-box" class="max-w-sm mx-auto">
          <div class="space-y-3 text-left">
            <div>
              <label class="block text-sm font-semibold text-ink mb-1">Usuario</label>
              <input id="lp-user" type="text" placeholder="Usuario" class="w-full rounded-lg border border-line px-4 py-2.5 text-sm focus:border-acepla-700 focus:ring-1 focus:ring-acepla-700 outline-none transition-colors" autocomplete="off" />
            </div>
            <div>
              <label class="block text-sm font-semibold text-ink mb-1">Contraseña</label>
              <input id="lp-pass" type="password" placeholder="Contraseña" class="w-full rounded-lg border border-line px-4 py-2.5 text-sm focus:border-acepla-700 focus:ring-1 focus:ring-acepla-700 outline-none transition-colors" autocomplete="off" />
            </div>
          </div>
          <button id="lp-login" class="btn-primary w-full mt-4">Acceder</button>
          <p id="lp-error" class="text-sm text-acepla-700 mt-3 hidden">Credenciales incorrectas. Intente nuevamente.</p>
        </div>

        <!-- Vista desbloqueada -->
        <div id="lp-unlocked" class="hidden">
          <p class="text-green-600 font-semibold mb-4 flex items-center justify-center gap-2">
            <Icon name="check" size={20} /> Acceso concedido
          </p>
          <a href="/images/acepla_lista_de_precios.pdf" target="_blank" rel="noopener" class="btn-primary">
            <Icon name="download" size={18} /> Descargar Lista de Precios (PDF)
          </a>
        </div>
      </div>
    </div>

    <!-- Folletos institucionales -->
    <div class="mb-14">
      <h2 class="text-2xl font-display font-bold mb-6 text-center">Documentos institucionales</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 max-w-5xl mx-auto">
        <a href="/images/acepla_certificado_calidad.pdf" target="_blank" rel="noopener" class="card p-5 flex items-center gap-4 flex-row">
          <div class="w-11 h-11 rounded-lg bg-acepla-100 flex items-center justify-center text-acepla-700 shrink-0">
            <Icon name="shield" size={22} />
          </div>
          <div>
            <h3 class="font-display font-semibold text-ink text-sm">Certificado de Calidad</h3>
            <p class="text-xs text-ink-soft">PDF</p>
          </div>
        </a>
        <a href="/images/acepla_politica_calidad.pdf" target="_blank" rel="noopener" class="card p-5 flex items-center gap-4 flex-row">
          <div class="w-11 h-11 rounded-lg bg-acepla-100 flex items-center justify-center text-acepla-700 shrink-0">
            <Icon name="shield" size={22} />
          </div>
          <div>
            <h3 class="font-display font-semibold text-ink text-sm">Política de Calidad</h3>
            <p class="text-xs text-ink-soft">PDF</p>
          </div>
        </a>
        <a href="/images/folletos/FOLLETO_ACEPLA_cmyk-comprimido.pdf" target="_blank" rel="noopener" class="card p-5 flex items-center gap-4 flex-row">
          <div class="w-11 h-11 rounded-lg bg-acepla-100 flex items-center justify-center text-acepla-700 shrink-0">
            <Icon name="download" size={22} />
          </div>
          <div>
            <h3 class="font-display font-semibold text-ink text-sm">Folleto Corporativo</h3>
            <p class="text-xs text-ink-soft">PDF</p>
          </div>
        </a>
      </div>
    </div>

    <!-- Folletos por producto -->
    <div>
      <h2 class="text-2xl font-display font-bold mb-6 text-center">Folletos por producto</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 max-w-5xl mx-auto">
        {productos.filter((p) => p.folleto && !p.folleto.includes("FOLLETO_ACEPLA")).map((p) => (
          <a href={p.folleto} target="_blank" rel="noopener" class="card p-5 flex items-center gap-4 flex-row">
            <div class="w-11 h-11 rounded-lg bg-acepla-100 flex items-center justify-center text-acepla-700 shrink-0">
              <Icon name="download" size={22} />
            </div>
            <div class="min-w-0">
              <h3 class="font-display font-semibold text-ink text-sm leading-tight">{p.nombre}</h3>
              <p class="text-xs text-ink-soft">{p.familia}</p>
            </div>
          </a>
        ))}
      </div>
    </div>

  </section>
  </>
  )}
</Base>

<script is:inline>
  // "Auth tonta" client-side — security theater
  // usuario: acepla / contraseña: lista
  document.getElementById("lp-login")?.addEventListener("click", () => {
    const user = document.getElementById("lp-user")?.value?.trim();
    const pass = document.getElementById("lp-pass")?.value?.trim();
    const error = document.getElementById("lp-error");
    const loginBox = document.getElementById("login-box");
    const unlocked = document.getElementById("lp-unlocked");
    if (user === "acepla" && pass === "lista") {
      loginBox?.classList.add("hidden");
      unlocked?.classList.remove("hidden");
      error?.classList.add("hidden");
    } else {
      error?.classList.remove("hidden");
    }
  });
  // Enter key
  document.getElementById("lp-pass")?.addEventListener("keydown", (e) => {
    if (e.key === "Enter") document.getElementById("lp-login")?.click();
  });
</script>