---
import { infoboxes } from "../../data/content/infosection.js";
import GridCard from "../cards/GridCard.astro";
import BoxContainer from "../BoxContainer.astro";
import { Icon } from "astro-icon/components";

const { bgColor, titleColor, textColor, title, text } = Astro.props;
---

<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 text-tertiary">
            <div class="flex flex-col gap-5 md:text-lg">
                <h2 class="font-secondary text-3xl lg:text-5xl font-bold">{title}</h2>
                <Icon name="ph:minus" class="text-tertiary text-4xl" />
                <p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p>
                <p><strong>A través de encuentros, giras internacionales, foros y relaciones institucionales, el CPyJ impulsa:</strong></p>
                <ul class="list-disc list-inside text-lg">
                    <li>El diálogo interreligioso e intercultural desde valores firmes.</li>
                    <li>La defensa de la justicia y la paz en escenarios internacionales.</li>
                    <li>La vinculación con líderes políticos, académicos y sociales.</li>
                    <li>El <strong>apoyo claro y permanente al pueblo judío y al Estado de Israel</strong>, reconociendo su centralidad histórica, espiritual y geopolítica.</li>
                </ul>
                <p>Esta proyección internacional posiciona al CPyJ como un <strong>actor relevante en el debate global sobre el futuro del mundo</strong>, la estabilidad internacional y la vigencia de los valores proféticos.</p>
            </div>
            <div class="grid xl:grid-cols-2 gap-16 mt-12">
                <GridCard props={{
                    type: 'imgText',
                    bgColor: '#BEA48D',
                    icon: 'ph:minus',
                    image: '/src/assets/JBP-MBM.webp',
                    text: 'La vinculación con líderes políticos, académicos y sociales.'

                }} />
                <GridCard props={{
                        bgColor: '#BEA48D',
                        type: 'imgText',
                        image: '/src/assets/pueblo-judio.webp',
                        icon: 'ph:minus',
                        text: 'Apoyo claro y permanente al pueblo judío y al Estado de Israel'
                    }} />
            </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: '../src/assets/dove-bg.webp',
                    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 CPyJ">
                </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>