---
import Icon from "./Icon.astro";
import { contacto, redes, empresa } from "../data/empresa";
const year = new Date().getFullYear();
---

<!-- ==================== FOOTER WIDGETS (#sp-bottom) ==================== -->
<div class="bg-[#2e2e2e] text-white">
  <div class="container-x py-[50px]">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-8">

      <!-- Col 1: Logo + descripción -->
      <div class="md:col-span-3">
        <img src="/images/logo.png" alt="Acepla" width="220" height="48" class="h-[42px] w-auto mb-4 brightness-0 invert" />
        <p class="text-sm italic leading-relaxed text-white/80">
          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>

      <!-- Col 2: Lista de Precios -->
      <div class="md:col-span-3">
        <h4 class="mb-4 text-white">Lista de Precios</h4>
        <p class="text-sm text-white/80 mb-4">Descargue la última versión de nuestra Lista de Precios</p>
        <a href="/descargas" class="btn-primary btn-sm">
          <Icon name="download" size={16} />
          Descargar
        </a>
      </div>

      <!-- Col 3: Contacto -->
      <div class="md:col-span-6">
        <h4 class="mb-4 text-white">Contáctenos</h4>
        <ul class="space-y-3 text-sm">
          <li class="flex items-start gap-3">
            <Icon name="location" size={18} class="mt-0.5 text-[#ec646a] shrink-0" />
            <span class="text-white/90">{contacto.direccion}</span>
          </li>
          <li class="flex items-start gap-3">
            <Icon name="phone" size={18} class="mt-0.5 text-[#ec646a] shrink-0" />
            <a href={`tel:${contacto.telefonoPrincipal.replace(/\s/g, "")}`} class="text-white/90 hover:text-[#f29296]">{contacto.telefonos}</a>
          </li>
          <li class="flex items-start gap-3">
            <Icon name="whatsapp" size={18} class="mt-0.5 text-[#ec646a] shrink-0" />
            <a href={contacto.whatsappAdminLink} target="_blank" rel="noopener" class="text-white/90 hover:text-[#f29296]">{contacto.whatsappAdmin}</a>
          </li>
        </ul>

        <!-- Redes sociales -->
        <div class="mt-5">
          <p class="text-xs text-white/70 mb-2">Seguinos en Nuestras Redes Sociales</p>
          <div class="flex items-center gap-3">
            <a href={redes.instagram} target="_blank" rel="noopener" class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-acepla-700 transition-colors" aria-label="Instagram">
              <Icon name="instagram" size={18} class="text-white" />
            </a>
            <a href={redes.facebook} target="_blank" rel="noopener" class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-acepla-700 transition-colors" aria-label="Facebook">
              <Icon name="facebook" size={18} class="text-white" />
            </a>
            <a href={redes.youtube} target="_blank" rel="noopener" class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-acepla-700 transition-colors" aria-label="YouTube">
              <Icon name="youtube" size={18} class="text-white" />
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- ==================== COPYRIGHT (#sp-footer) ==================== -->
<footer class="bg-[#363839] text-[#b0b0b0]">
  <div class="container-x py-5 text-center text-sm">
    &copy; {year} Acepla S.A. Todos los derechos Reservados.
  </div>
</footer>

<!-- ==================== WHATSAPP FLOTANTE ==================== -->
<a
  href={contacto.whatsappAdminLink}
  target="_blank"
  rel="noopener"
  class="fixed bottom-5 right-5 z-40 flex items-center justify-center w-14 h-14 rounded-full bg-[#25D366] shadow-lg hover:scale-110 transition-transform"
  aria-label="Contactar por WhatsApp"
>
  <Icon name="whatsapp" size={28} class="text-white" />
</a>