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

<Base
  title={`Contactos | Acepla - Nueva Maquinaria S.A.`}
  description="Contacte con Acepla - Nueva Maquinaria S.A. Teléfono, WhatsApp, email y dirección en Armstrong, Santa Fe, Argentina."
>
  {DEMO_MODE ? (
    <WipPlaceholder seccion="La sección de Contacto" />
  ) : (
  <>
  <!-- Cabecera -->
  <section class="bg-[#2e2e2e] py-16">
    <div class="container-x text-center">
      <h1 class="text-white text-4xl mb-3">Contactos</h1>
      <p class="text-[#f3b9b9]">Estamos para ayudarte</p>
    </div>
  </section>

  <!-- Cards de contacto -->
  <section class="container-x py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- WhatsApp -->
      <div class="card p-6 text-center items-center">
        <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-4 mx-auto">
          <Icon name="whatsapp" size={28} />
        </div>
        <h3 class="text-acepla-700 mb-2">WhatsApp</h3>
        <div class="space-y-2 text-sm">
          <a href={contacto.whatsappComprasLink} target="_blank" rel="noopener" class="block text-ink-soft hover:text-acepla-700">
            Compras: {contacto.whatsappCompras}
          </a>
          <a href={contacto.whatsappAdminLink} target="_blank" rel="noopener" class="block text-ink-soft hover:text-acepla-700">
            Administración: {contacto.whatsappAdmin}
          </a>
        </div>
      </div>

      <!-- Teléfono -->
      <div class="card p-6 text-center items-center">
        <div class="w-14 h-14 rounded-full bg-acepla-100 flex items-center justify-center text-acepla-700 mb-4 mx-auto">
          <Icon name="phone" size={28} />
        </div>
        <h3 class="text-acepla-700 mb-2">Teléfono</h3>
        <a href={`tel:${contacto.telefonoPrincipal.replace(/\s/g, "")}`} class="text-ink-soft hover:text-acepla-700">
          {contacto.telefonos}
        </a>
      </div>

      <!-- Email -->
      <div class="card p-6 text-center items-center">
        <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mb-4 mx-auto">
          <Icon name="mail" size={28} />
        </div>
        <h3 class="text-acepla-700 mb-2">E-Mails</h3>
        <div class="space-y-1 text-sm">
          {contacto.emails.map((email) => (
            <a href={`mailto:${email}`} class="block text-ink-soft hover:text-acepla-700">{email}</a>
          ))}
        </div>
      </div>

      <!-- Dirección -->
      <div class="card p-6 text-center items-center">
        <div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mb-4 mx-auto">
          <Icon name="location" size={28} />
        </div>
        <h3 class="text-acepla-700 mb-2">Dirección</h3>
        <p class="text-ink-soft">{contacto.direccion}</p>
      </div>

      <!-- Horarios -->
      <div class="card p-6 text-center items-center">
        <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mb-4 mx-auto">
          <Icon name="clock" size={28} />
        </div>
        <h3 class="text-acepla-700 mb-2">Nuestros Horarios</h3>
        <ul class="space-y-1 text-sm">
          {contacto.horarios.map((h) => (
            <li class="text-ink-soft">{h.dia}: <span class="font-semibold text-ink">{h.horario}</span></li>
          ))}
        </ul>
      </div>

      <!-- Redes -->
      <div class="card p-6 text-center items-center">
        <div class="w-14 h-14 rounded-full bg-rose-100 flex items-center justify-center text-rose-600 mb-4 mx-auto">
          <Icon name="instagram" size={28} />
        </div>
        <h3 class="text-acepla-700 mb-2">Redes Sociales</h3>
        <div class="flex justify-center gap-3">
          <a href={redes.instagram} target="_blank" rel="noopener" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-acepla-700 hover:text-white transition-colors text-ink-soft" aria-label="Instagram">
            <Icon name="instagram" size={18} />
          </a>
          <a href={redes.facebook} target="_blank" rel="noopener" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-acepla-700 hover:text-white transition-colors text-ink-soft" aria-label="Facebook">
            <Icon name="facebook" size={18} />
          </a>
          <a href={redes.youtube} target="_blank" rel="noopener" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-acepla-700 hover:text-white transition-colors text-ink-soft" aria-label="YouTube">
            <Icon name="youtube" size={18} />
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Formulario + Mapa -->
  <section class="bg-gray-50 py-12">
    <div class="container-x grid grid-cols-1 lg:grid-cols-2 gap-10">

      <!-- Formulario (visual, sin envío real) -->
      <div class="bg-white rounded-xl shadow-[var(--shadow-card)] p-7">
        <h2 class="text-2xl font-display font-bold mb-5">Envíenos un mensaje</h2>
        <form id="contact-form" class="space-y-4">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-semibold text-ink mb-1">Nombre</label>
              <input type="text" name="name" placeholder="Nombre" 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" />
            </div>
            <div>
              <label class="block text-sm font-semibold text-ink mb-1">Email *</label>
              <input type="email" name="email" required placeholder="Email" 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" />
            </div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-semibold text-ink mb-1">Teléfono</label>
              <input type="text" name="phone" placeholder="Teléfono" 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" />
            </div>
            <div>
              <label class="block text-sm font-semibold text-ink mb-1">Asunto</label>
              <input type="text" name="subject" placeholder="Asunto" 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" />
            </div>
          </div>
          <div>
            <label class="block text-sm font-semibold text-ink mb-1">Mensaje</label>
            <textarea name="message" rows="5" placeholder="Mensaje" 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 resize-none"></textarea>
          </div>
          <button type="submit" class="btn-primary w-full sm:w-auto">Enviar mensaje</button>
          <p id="form-msg" class="text-sm text-acepla-700 hidden">¡Gracias! Su mensaje fue registrado.</p>
        </form>
      </div>

      <!-- Mapa -->
      <div>
        <h2 class="text-2xl font-display font-bold mb-5">Nuestra ubicación</h2>
        <div class="rounded-xl overflow-hidden shadow-[var(--shadow-card)] h-[400px] lg:h-full min-h-[300px]">
          <iframe
            src={contacto.mapEmbed}
            width="100%"
            height="100%"
            style="border:0; min-height: 300px;"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="Ubicación de Acepla en Armstrong, Santa Fe"
          ></iframe>
        </div>
      </div>
    </div>
  </section>
  </>
  )}
</Base>

<script is:inline>
  // Formulario visual: no envía, solo confirma
  document.getElementById("contact-form")?.addEventListener("submit", (e) => {
    e.preventDefault();
    const msg = document.getElementById("form-msg");
    const form = e.target as HTMLFormElement;
    form.reset();
    msg?.classList.remove("hidden");
    setTimeout(() => msg?.classList.add("hidden"), 4000);
  });
</script>