---
import { Icon } from "astro-icon/components";
---
<div id="programs" class="bg-[#BEA48D] py-16 lg:py-32">
    <div class="container mx-auto">
        <h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y areas de acción</h4>
        <h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2>
        <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421]">El <strong>CPyJ desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p>

        <div class="grid xl:grid-cols-3 gap-20">
            <div class="bg-[#EBE5D0] p-12 relative pb-40">
                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
                <h4 class="text-[#003421] font-bold text-2xl mb-12">Area de Formacion</h4>

                <p class="text-lg">
                    <ul class="text-lg list-disc list-inside">
                        <li class="mb-8">Liderazgo ético y estratégico.</li>
                        <li class="mb-8">Mediación y resolución responsable de conflictos.</li>
                        <li class="mb-8">Fe, valores y acción en el espacio público.</li>
                        <li class="mb-8">Análisis de escenarios internacionales y desafíos contemporáneos.</li>
                        <li class="mb-8">Fundamentos para la construcción de una paz sólida y duradera, con eje en Israel.</li>
                    </ul>
                </p>

                <div class="bottom-12 right-12 absolute">
                    <Icon name="icon_formation_1"  class="text-8xl" />
                </div>
            </div>

            <div class="bg-[#EBE5D0] p-12 relative pb-40">
                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
                <h4 class="text-[#003421] font-bold text-2xl mb-12">Asesoría y Consultoría</h4>

                <p class="text-lg">Acompañamiento estratégico a organiza- ciones e instituciones que buscan diseñar e implementar iniciativas de impacto, alineadas con valores claros, objetivos transversales y una visión de largo plazo.</p>

                <div class="bottom-12 right-12 absolute">
                    <Icon name="icon_formation_2"  class="text-8xl" />
                </div>
            </div>

            <div class="bg-[#EBE5D0] p-12 relative pb-40">
                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
                <h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4>

                <p class="text-lg">Desarrollo de iniciativas concretas en distintos territorios, orientadas a la formación, la preven- ción de conflictos y el fortalecimiento de lide- razgos locales con visión internacional.</p>

                <div class="bottom-12 right-12 absolute">
                    <Icon name="icon_formation_3" class="text-8xl" />
                </div>
            </div>
        </div>
    </div>
</div>