---
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);

const isHebrew = Astro.currentLocale === "he";
const { hideContact } = Astro.props;
---

<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-regular">
        {tl("footer.email")}
        <!--email_off-->
        <a
          class="font-light hover:text-[#D4C7A1] transition-all hover:underline hover:underline-offset-4 hidden lg:block"
          href="mailto:joseperez@centrodelreinodepazyjusticia.com"
          >joseperez@centrodelreinodepazyjusticia.com</a
        >
        <!--/email_off-->
      </p>
      <!--email_off-->
      <a
        class="font-light hover:text-[#D4C7A1] transition-all hover:underline hover:underline-offset-4 block lg:hidden overflow-hidden overflow-ellipsis"
        href="mailto:joseperez@centrodelreinodepazyjusticia.com"
        >joseperez@centrodelreinodepazyjusticia.com</a
      >
      <!--/email_off-->
      <p
        class="text-lg font-light mb-10 break-words"
        set:html={tl("footer.text2")}
      >
      </p>

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

    <div
      class="flex lg:justify-between mt-10 lg:mt-0 align-center justify-center"
    >
      {
        !isHebrew && (
          <p class="px-4 order-1 text-sm font-normal text-white lg:self-end text-center lg:text-left">
            {tl("footer.reserved")}
          </p>
        )
      }

      <div class="flex items-center gap-3 lg:order-1 z-10 pl-6">
        <img
          class="w-24 object-contain"
          src="/img/logo-metalico.webp"
          alt="Logo Metalico"
        />

        {
          isHebrew && (
            <p class="text-sm font-normal text-white text-center lg:text-left">
              {tl("footer.reserved")}
            </p>
          )
        }
      </div>
    </div>
  </div>
</div>
