---
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 { empresa } from "../data/empresa";
---

<Base
  title={`Empresa | ${empresa.nombre}`}
  description="Conozca la historia de Acepla - Nueva Maquinaria S.A., nuestra visión, misión y valores. 42 años de trayectoria en maquinaria agrícola."
>
  {DEMO_MODE ? (
    <WipPlaceholder seccion="La sección Empresa" />
  ) : (
  <>
  <!-- Cabecera de página -->
  <section class="bg-[#2e2e2e] py-16">
    <div class="container-x text-center">
      <h1 class="text-white text-4xl mb-3">Nuestra Empresa</h1>
      <p class="text-[#f3b9b9]">Implementos agrícolas de primera calidad</p>
    </div>
  </section>

  <!-- Historia + galería -->
  <section class="container-x py-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
      <div>
        <span class="section-eyebrow">Historia</span>
        <h2 class="section-title mt-2 mb-5">Más de 42 años en el campo argentino</h2>
        {empresa.historia.split(".").filter(s => s.trim()).map((frase) => (
          <p class="text-ink-soft leading-relaxed mb-4">{frase.trim()}.</p>
        ))}
      </div>
      <div class="grid grid-cols-2 gap-3">
        <img src="/images/empresa/img_20180803_184055828_burst000_cover_top__1000x750.webp" alt="Planta de Acepla" class="rounded-lg shadow-md w-full h-full object-cover col-span-2" loading="lazy" />
        <img src="/images/empresa/20170913_153826__1000x750.webp" alt="Interior fábrica" class="rounded-lg shadow-md w-full h-full object-cover" loading="lazy" />
        <img src="/images/empresa/img_20200526_154833180_hdr__1000x596.webp" alt="Producción" class="rounded-lg shadow-md w-full h-full object-cover" loading="lazy" />
        <img src="/images/empresa/img_20180803_183946618_burst000_cover_top__1000x750.webp" alt="Talleres" class="rounded-lg shadow-md w-full h-full object-cover" loading="lazy" />
        <img src="/images/empresa/20170913_154639__1000x750.webp" alt="Maquinaria" class="rounded-lg shadow-md w-full h-full object-cover" loading="lazy" />
      </div>
    </div>
  </section>

  <!-- Visión, Misión, Valores -->
  <section class="bg-gray-50 py-14">
    <div class="container-x grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white rounded-xl shadow-[var(--shadow-card)] p-7">
        <div class="w-12 h-12 rounded-full bg-acepla-100 flex items-center justify-center text-acepla-700 mb-4">
          <Icon name="eye" size={26} />
        </div>
        <h3 class="text-acepla-700 mb-3">Visión</h3>
        <p class="text-ink-soft leading-relaxed">{empresa.vision}</p>
      </div>
      <div class="bg-white rounded-xl shadow-[var(--shadow-card)] p-7">
        <div class="w-12 h-12 rounded-full bg-acepla-100 flex items-center justify-center text-acepla-700 mb-4">
          <Icon name="gallery" size={26} />
        </div>
        <h3 class="text-acepla-700 mb-3">Misión</h3>
        <p class="text-ink-soft leading-relaxed">{empresa.mision}</p>
      </div>
      <div class="bg-white rounded-xl shadow-[var(--shadow-card)] p-7">
        <div class="w-12 h-12 rounded-full bg-acepla-100 flex items-center justify-center text-acepla-700 mb-4">
          <Icon name="way" size={26} />
        </div>
        <h3 class="text-acepla-700 mb-3">Valores</h3>
        <p class="text-ink-soft leading-relaxed">{empresa.valores}</p>
      </div>
    </div>
  </section>

  <!-- Certificaciones / Calidad -->
  <section class="container-x py-14">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
      <div>
        <span class="section-eyebrow">Certificaciones</span>
        <h2 class="section-title mt-2 mb-4">Política de Calidad</h2>
        <p class="text-ink-soft leading-relaxed mb-4">
          Somos conscientes de que para llegar lejos el único camino posible es el de la responsabilidad y la seriedad en los negocios, ello es posible dentro de un ambiente de estricta ética empresaria.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="/images/acepla_certificado_calidad.pdf" target="_blank" rel="noopener" class="btn-primary">
            <Icon name="download" size={18} /> Ver Certificado
          </a>
          <a href="/images/acepla_politica_calidad.pdf" target="_blank" rel="noopener" class="btn-outline-primary">
            <Icon name="download" size={18} /> Política de Calidad
          </a>
        </div>
      </div>
      <div class="flex justify-center">
        <img src="/images/logo_calidad_qr.webp" alt="Certificado de calidad Acepla" class="w-full max-w-xs" loading="lazy" />
      </div>
    </div>
  </section>
  </>
  )}
</Base>