---
import { Image } from "astro:assets";
import LogoHSEQXl from "../assets/images/Logo_HSEQ.png";
import LogoAlturas from "../assets/images/Logo-Alturas-300x123.png";
import LogoHseqVirtual from "../assets/images/Logo-HSEQ-Virtual-300x117.png";
import LogoAVA from "../assets/images/Logo-AVA-300x90.png";
import LogoFVAC from "../assets/images/LogoFundacionVolverACasa.webp";
const actualyear = new Date().getFullYear();
---

<footer class="py-16 xl:py-28 bg-gray-50 mt-24">
  <div class="max-w-screen-xl mx-auto px-5" data-aos="fade-up">
    <div class="flex flex-wrap justify-between gap-4">
      <div class="flex-1 md:w-1/2 lg:w-1/3 lg:pe-16">
        <div class="mb-5">
          <a href="/" class="text-lg flex items-center">
            <Image
              src={LogoHSEQXl}
              alt={"Logo HSEQ xl"}
              width={180}
              height={48}
              quality={"max"}
              format="avif"
              densities={[1.5, 2]}
            />
          </a>
        </div>
        <p class="font-mv-boli mb-2.5 lg:mb-20 text-gray-500 font-bold">
          "Desarrollando programas de gestión"
        </p>
        <!-- Redes Sociales Mejoradas -->
        <ul class="flex gap-4 mt-4 items-center">
          <!-- Facebook -->
          <li>
            <a
              href="https://www.facebook.com/hseq.holding"
              target="_blank"
              rel="noopener noreferrer"
              class="bg-slate-100 hover:bg-blue-600 text-blue-600 hover:text-white transition-all duration-300 rounded-full w-10 h-10 flex items-center justify-center shadow-md"
              aria-label="Facebook Page"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-facebook"
              >
                <path
                  d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
                ></path>
              </svg>
            </a>
          </li>

          <!-- Instagram -->
          <li>
            <a
              href="https://www.instagram.com/hseq_sas/"
              target="_blank"
              rel="noopener noreferrer"
              class="bg-slate-100 hover:bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-pink-500 hover:text-white transition-all duration-300 rounded-full w-10 h-10 flex items-center justify-center shadow-md"
              aria-label="Instagram Profile"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-instagram"
              >
                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
                ></path>
                <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
              </svg>
            </a>
          </li>

          <!-- X (Twitter) -->
          <li>
            <a
              href="https://twitter.com/HseqSAS_"
              target="_blank"
              rel="noopener noreferrer"
              class="bg-slate-100 hover:bg-black text-black hover:text-white transition-all duration-300 rounded-full w-10 h-10 flex items-center justify-center shadow-md"
              aria-label="Twitter (X) Page"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-x"
              >
                <path d="M18 3L5 21"></path>
                <path d="M5 3l13 18"></path>
              </svg>
            </a>
          </li>

          <!-- LinkedIn -->
          <li>
            <a
              href="https://www.linkedin.com/in/hseq-consultor%C3%ADa-y-capacitaci%C3%B3n-5b1115226/"
              target="_blank"
              rel="noopener noreferrer"
              class="bg-slate-100 hover:bg-blue-700 text-blue-700 hover:text-white transition-all duration-300 rounded-full w-10 h-10 flex items-center justify-center shadow-md"
              aria-label="LinkedIn Profile"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-linkedin"
              >
                <path
                  d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
                ></path>
                <rect width="4" height="12" x="2" y="9"></rect>
                <circle cx="4" cy="4" r="2"></circle>
              </svg>
            </a>
          </li>
        </ul>
      </div>
      <div class="flex-1 w-full md:w-1/2 lg:w-1/3">
        <div
          class="flex flex-wrap gap-y-6 sm:flex-nowrap md:justify-end lg:justify-around"
        >
          <div
            class="w-[460px] bg-corporative-green rounded-3xl p-4 text-center"
          >
            <h3 class="mb-4 pt-2 text-base text-white md:mb-9 font-bold">
              Nuestras marcas
            </h3>
            <ul class="flex flex-col gap-8 items-center">
              <li>
                <a href="https://alturashseq.com/" target="_blank">
                  <Image
                    src={LogoAlturas}
                    alt={"Logo Alturas xl"}
                    width={180}
                    height={40}
                    quality={"mid"}
                    format="webp"
                    densities={[1.5, 2]}
                  />
                </a>
              </li>
              <li>
                <a href="https://hseqvirtual.com/" target="_blank">
                  <Image
                    src={LogoHseqVirtual}
                    alt={"Logo HSEQ virtual xl"}
                    width={180}
                    height={40}
                    quality={"mid"}
                    format="webp"
                    densities={[1.5, 2]}
                  />
                </a>
              </li>
              <li>
                <a href="https://hseqvirtual.com/" target="_blank">
                  <Image
                    src={LogoAVA}
                    alt={"Logo Ambientes virtuales de aprendizaje xl"}
                    width={180}
                    height={40}
                    quality={"mid"}
                    format="webp"
                    densities={[1.5, 2]}
                  />
                </a>
              </li>
              <li>
                <a href="https://fundacionvolveracasa.org/" target="_blank">
                  <Image
                    src={LogoFVAC}
                    alt={"Logo Fundación volver a casa xl"}
                    width={180}
                    height={40}
                    quality={"mid"}
                    format="webp"
                    densities={[1.5, 2]}
                  />
                </a>
              </li>
            </ul>
          </div>
          <div class="w-[360px] ml-8 pt-4">
            <h3 class="mb-4 pt-2 text-base text-black md:mb-9 font-bold">
              Enlaces de interés
            </h3>
            <ul class="flex flex-col gap-8">
              <li>
                <a
                  target="_blank"
                  href="https://web.mintransporte.gov.co/sisconmp2/ConsultasCapacitaciones/"
                  class="font-medium transition hover:text-corporative-red"
                >
                  Sisconmp
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://mintransporte.gov.co/"
                  class="font-medium transition hover:text-corporative-red"
                >
                  Ministerio de Transporte
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://ansv.gov.co/"
                  class="font-medium transition hover:text-corporative-red"
                >
                  Agencia Nacional de Seguridad Vial
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.mintrabajo.gov.co/web/guest/inicio"
                  class="font-medium transition hover:text-corporative-red"
                >
                  Ministerio de Trabajo
                </a>
              </li>
              <li>
                <a
                  href="/workWithUs"
                  class="font-medium transition hover:text-corporative-red"
                >
                  Trabaja con nosotros
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="flex-1 w-3/5 md:w-1/2 lg:w-1/3 pt-4 lg:ml-12">
        <h3 class="mb-4 text-xl font-bold text-black">Contáctenos</h3>
        <p class="mb-6 font-light">
          Deja tu email aquí y uno de nuestros asesores se pondrá en contacto
          contigo.
        </p>
        <form
          action="sendEmail"
          id="footerContactForm"
          class="flex justify-between rounded-full bg-white px-3 py-2"
        >
          <input
            type="email"
            placeholder="Tu correo aquí"
            name="email"
            id="email"
            class="w-full rounded-full !border-transparent bg-transparent py-2 pl-2 placeholder:!opacity-100"
            required
          />
          <button
            class="rounded-full bg-corporative-blue px-4 py-1 font-medium transition hover:opacity-80 text-white"
            type="submit"
          >
            Enviar
          </button>
        </form>
        <a href="/certificates" rel="prefetch" data-astro-reload="true">
          <button
            class="rounded-full bg-corporative-blue my-12 h-12 w-full px-4 py-1 font-medium transition hover:opacity-80 text-white"
          >
            Verificar certificados
          </button>
        </a>
      </div>
      <div class="mt-5 lg:mt-14 w-full text-center">
        Copyright © {actualyear}
        <span class="font-semibold">Consultoría y capacitación HSEQ</span> | Todos
        los derechos reservados.
        <a
          class="hover:underline hover:underline-offset-4 hover:text-corporative-blue transition-colors duration-200"
          target="_blank"
          href="https://consultoriaycapacitacionhseq.com/politicas/politica_tratamiento_datos_personales.pdf"
        >
          Política de privacidad.
        </a>
      </div>
    </div>
  </div>
</footer>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById(
      "footerContactForm"
    ) as HTMLFormElement;

    form.addEventListener("submit", async (e) => {
      e.preventDefault();

      const formData = new FormData(form);
      const formBody = {
        fullName: formData.get("email"),
        email: formData.get("email"),
        message: "Necesito mas información de sus servicios",
      };

      try {
        const response = await fetch(
          "https://api-prod.consultoriaycapacitacionhseq.com/contact/send-email",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(formBody),
          }
        );

        if (response.ok) {
          alert("Mensaje enviado con éxito");
          form.reset();
        } else {
          alert("Error al enviar el mensaje");
        }
      } catch (error) {
        console.error("Error:", error);
        alert("Error al enviar el mensaje");
      }
    });
  });
</script>