---
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import jbp from "../../assets/DRJBP-1.webp";
import FormContact from "./FormContact.vue";

import { createTranslator, t } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);
---

<div id="contact" class="bg-[#22523F]">
  <div class="container mx-auto py-20 relative text-[#EBE5D0]">

    <div class="absolute bottom-0 right-0 w-80 hidden lg:block">
      <Image src={jbp} alt="Centro del Reino de Paz y Justicia" />
    </div>

    <h4 class="text-lg text-center font-bold uppercase" set:html={tl("footer.title")}></h4>
    <h2 class="text-2xl lg:text-5xl text-center font-bold font-secondary my-8" set:html={tl("footer.subtitle")}>
    </h2>

    <div class="px-12 lg:px-4 lg:w-2/5 mx-auto">

      <p class="text-lg font-light mb-10" set:html={tl("footer.text")}></p>

      <p class="text-lg font-light mb-10 break-words" set:html={tl("footer.text2")}></p>

      <FormContact client:load locale ={Astro.currentLocale}/>
      
    </div>

    <div class="flex lg:justify-between mt-10 lg:mt-0 align-center justify-center">
      <p class="px-4 order-1 text-sm font-normal text-white lg:self-end text-center lg:text-left">
        {tl("footer.reserved")}
      </p>
      <img class="w-24 lg:order-1 z-10 pl-6 object-contain" src="/img/logo-metalico.webp" alt="Logo Metalico">
    </div>

  </div>
</div>
