---
import { infoboxes } from "../../data/content/infosection.js";
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 class="grid grid-cols-3">
        { infoboxes.map((box) => (
            <BoxContainer props={box} />    
        ))}
    </div>
    <div class="grid grid-cols-3 h-auto bg-white w-full">
        <div class="col-span-2 row-span-2 p-24 text-tertiary grid gap-8 ">
            <div class="grid gap-8">
                <h2 class="font-secondary text-5xl font-bold">{title}</h2>
                <Icon name="ph:minus" class="text-tertiary text-4xl" />
                <p class="text-lg">El <b>Centro del Reino de Paz y Justicia (CPyJ)</b> es una organización de alcance <b>internacional dedicada a la formación, el diálogo estratégico y la acción pública, orientada a promover la justicia y la paz</b> conforme a los valores eternos proclamados por los profetas, con un compromiso explícito y permanente con Israel y su lugar central en la historia y el destino del mundo.</p>
            </div>
            <div class="grid grid-cols-2 gap-8 text-lg leading-relaxed">
                <p>El CPyJ desarrolla iniciativas educativas, espacios de reflexión profunda y acciones concretas en el ámbito público, integrando principios espirituales, responsabilidad institucional y liderazgo ético. Su labor se inscribe en el campo de la diplomacia pública, entendida como una herramienta legítima para influir en la conversación global, fortalecer vínculos entre naciones y defender valores fundamentales frente a los desafíos del presente y del futuro.</p>
                <p>La paz no es concebida como una consigna abstracta ni como un ideal ingenuo, sino como el resultado de decisiones firmes, liderazgo con valores y compromiso sostenido con propósitos claros, que reconocen el rol insustituible de Israel en la construcción de un orden justo y estable para toda la humanidad.</p>
            </div>
        </div>
        <div class="col-span-1 h-full bg-[#CBA16A]">
            <BoxContainer props={{
                title: 'Misión, Visión y Valores Institucionales.',
                buttonLabel: 'Leer Mas',
                hasButton: true,
                bgImage: '../src/assets/dove-bg.webp',
                hasIcon: true,
                bgColor: '#CBA16A',
                titleColor: 'text-tertiary',
                sizeTitle: 'text-2xl',
            }} />
        </div>
        <div class="col-span-1 py-38 px-24 bg-[#21523F]">
            <img src="/src/assets/logo-ligth.webp" alt="Logo del CPyJ">
        </div>
    </div>
</div>