---
import "../../styles/global.css";

import MainLayout from "../../layouts/MainLayout.astro";
import HeroHome from "../../components/HeroHome.astro";
import NewsSection from "../../components/section/NewsSection.astro";
import ParticipateSection from "../../components/section/ParticipateSection.astro";
import CarouselSection from "../../components/section/CarouselSection.astro";
import InfoSection from "../../components/section/InfoSection.astro";
import IdentitySection from "../../components/section/IdentitySection.astro";
import AuthoritySection from "../../components/section/AuthoritySection.astro";
import ProjectionSection from "../../components/section/ProjectionSection.astro";

import ColorSection from "../../components/section/ColorSection.astro";
import TitleSection from "../../components/section/TitleSection.astro";
import GridSection from "../../components/section/GridSection.astro";
import ColumnsSection from "../../components/section/ColumnsSection.astro";
import FormationSection from "../../components/section/FormationSection.astro";
import FooterSection from "../../components/section/FooterSection.astro";

const { locale } = Astro.params;

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

const carouselImages2 = [
  {
    image: "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
    text: tl("carousel.text1"),
  },
  {
    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
    text: tl("carousel.text2"),
  },
];

const carouselImages3 = [
  {
    image: "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
    text: tl("carousel.text1"),
  },
  {
    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
    text: tl("carousel.text2"),
  },
];
---

<MainLayout>

  <HeroHome />

  <InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" />

  <div class="carousel-full md:h-[110vh] h-[30vh]">
    <CarouselSection class="h-full" images={carouselImages3} imgClass="object-cover w-full h-full" />
  </div>

  <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />

  <AuthoritySection bgColor="bg-[#003421]" titleColor="text-colorSecondary" descColor="text-[#EBE6D2]" />

  <TitleSection title={tl("title1.title")} />

  <GridSection />

  <ColorSection
    id="mision"
    bgColor="#22523F"
    titleColor="text-[#ffffff]"
    textColor="text-[#CBA16A] font-bold"
    title={tl("color1.title")}
    text={tl("color1.text")} />

  <ColorSection
    bgColor="#CBA16A"
    titleColor="text-[#ffffff]"
    textColor="text-[#ffffff] font-bold"
    title={tl("color2.title")}
    text={tl("color2.text")} />

  <TitleSection title={tl("title2.title")} />

  <ColumnsSection />

  <ProjectionSection title={tl("projection.title")} />

  <FormationSection />

  <div class="carousel-full md:h-[110vh] h-[30vh]">
    <CarouselSection class="h-full" images={carouselImages2} imgClass="object-cover w-full h-full" />
  </div>

  <NewsSection />

  <ParticipateSection />

  <FooterSection />

</MainLayout>

<style>
  .carousel-full :global(.mx-auto),
  .carousel-full :global(.swiper),
  .carousel-full :global(.swiper-wrapper),
  .carousel-full :global(.swiper-slide),
  .carousel-full :global(.swiper-slide > div) {
    height: 100%;
  }
</style>