---
import { Icon } from "astro-icon/components";

import { createTranslator, t } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);
---
<div id="programs" class="bg-[#BEA48D] py-16 lg:py-32">
    <div class="container mx-auto">
        <h4 class="text-lg text-center uppercase text-[#003421]">{tl("formation.subtitle")}</h4>
        <h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">{tl("formation.title")}</h2>
        <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421] text-justify" set:html={tl("formation.text")}></p>

        <div class="grid xl:grid-cols-3 text-[#003421] gap-20">
            <div class="bg-[#EBE5D0] p-12 relative pb-40">
                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
                <h4 class="text-[#003421] text-2xl mb-12">{tl("formation.area.title")}</h4>

                <ul class="text-lg list-disc font-normal list-inside leading-8" set:html={tl("formation.area.text")}></ul>

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

            <div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40">
                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
                <h4 class="text-[#003421] text-2xl mb-12">{tl("formation.consulting.title")}</h4>

                <p class="text-lg font-normal">{tl("formation.consulting.text")}</p>

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

            <div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40">
                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
                <h4 class="text-[#003421] text-2xl mb-12" set:html={tl("formation.action.title")}></h4>

                <p class="text-lg font-normal" set:html={tl("formation.action.text")}></p>

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