---
import GridCard from "../cards/GridCard.astro";
import BoxContainer from "../BoxContainer.astro";
import { Icon } from "astro-icon/components";

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

<div class="container mx-auto">

    <div id="projection" class="grid lg:grid-cols-3 bg-white w-full">
        <div class="row-span-2 lg:col-span-2 p-12 lg:p-24">
            <div class="flex flex-col gap-5 md:text-lg text-tertiary text-justify prose-p:mb-4 prose-ul:text-tertiary prose-p:text-tertiary prose-strong:text-tertiary prose-strong:font-bold ">
                <h2 class="font-secondary text-3xl lg:text-5xl font-bold">{tl('projection.title')}</h2>
                <Icon name="ph:minus" class="text-tertiary text-4xl" />
                <div class="prose" set:html={tl('projection.text')}></div>
            </div>
            <div class="grid xl:grid-cols-2 gap-16 mt-12">
                <GridCard props={{
                    type: 'imgText',
                    bgColor: '#BEA48D',
                    icon: 'ph:minus',
                    image: 'https://ik.imagekit.io/crpy/JBP-MBM.webp',
                    text: tl("projection.card1")

                }} />
                <GridCard props={{
                        bgColor: '#BEA48D',
                        type: 'imgText',
                        image: 'https://ik.imagekit.io/crpy/pueblo-judio.webp',
                        icon: 'ph:minus',
                        text: tl("projection.card2")
                    }} />
            </div>
        </div>
        <div class="hidden lg:block row-span-2 col-span-full lg:col-span-1 over bg-[#CBA16A] relative">
            <div class="relative">
                <BoxContainer props={{
                    bgImage: 'https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158',
                    bgColor: '#CBA16A',
                }} />
                <div class="absolute -bottom-[8rem] z-10 w-full">
                    <img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del Centro del Reino de Paz y Justicia (CRPJ)">
                </div>
            </div>
            <div class="hidden lg:flex bg-[#22523F] object-cover pt-64 justify-end ">
                <img src="/img/DRJBP-1.webp" class="h-full object-cover" />
            </div>
        </div>
        
    </div>
</div>