---
import { Picture } from "astro:assets";
import Container from "~/components/Container.astro";
import mulherdenegocios from "~/assets/mulher-de-negocios.png";
import homemdenegocios from "~/assets/homem-de-negocios.png";
---

<Container {...Astro.props}>
    <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
        <div
            class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-5 relative h-136 max-lg:hidden -m-px max-xl:overflow-hidden"
        >
            <Picture
                alt="Homem de negócios"
                formats={["webp"]}
                src={homemdenegocios}
                class="w-94 absolute bottom-0 -left-28"
            />
            <Picture
                alt="Mulher de negócios"
                formats={["webp"]}
                src={mulherdenegocios}
                class="w-96 absolute bottom-0 -right-24"
            />
        </div>

        <div class="col-span-2 flex items-center">
            <div class="xl:w-8/12 xl:mx-auto space-y-5 p-6">
                <h3 class="text-pretty text-4xl">
                    Por que capacitar sua equipe com a EDUSEG&reg;
                </h3>
                <p>
                    Nós cuidamos da burocracia, oferecemos uma plataforma
                    completa para simplicar a gestão e capacitação em larga
                    escala de seus colaboradores. Com a EDUSEG&reg, sua empresa
                    se beneficia de uma tecnologia eficiente e confiável.
                </p>

                <ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
                    <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
                        Centralização de todos os certificados
                    </li>
                    <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
                        Agilidade na liberação de cursos
                    </li>
                    <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
                        Agendamento para liberação de cursos
                    </li>
                    <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
                        Aviso de vencimento para certificados
                    </li>
                </ul>

                <div class="text-center">
                    <button
                        data-toggle="modal"
                        data-target="#solutionmodal"
                        data-detail="Agendar uma demonstração"
                        class="text-blue-400 underline hover:no-underline cursor-pointer"
                    >
                        Agendar uma demonstração
                    </button>
                </div>
            </div>
        </div>
    </div>
</Container>