---
import { Icon } from "astro-icon/components";
import Container from "~/components/Container.astro";
import Contact from "./Contact.jsx";
import Modal from "~/components/Modal.astro";
---

{/* Modal */}
<Modal id="planform">
    <h1 class="text-3xl lg:text-4xl font-medium">
        Preencha os dados da sua empresa
    </h1>
    <Contact url={Astro.request.url} client:load />
</Modal>

<Container {...Astro.props}>
    <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
        <h1 class="text-pretty text-4xl lg:text-6xl">
            Modelos de contratação para sua empresa
        </h1>
        <div class="grid lg:grid-cols-3 gap-5">
            <div
                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
            >
                <h1
                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                >
                    EDUSEG<sup>&reg;</sup> Flexível
                </h1>
                <h2 class="text-xl/6 font-semibold">
                    Catálogo completo sempre à sua disposição
                </h2>
                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
                    <li>Acesse todos os cursos imediatamente</li>
                    <li>Pague apenas pelo que usar, mês a mês</li>
                    <li>Gestão e autonomia direto pela plataforma</li>
                </ul>
                <p class="mt-auto">
                    Ideal para empresas que treinam continuamente e precisam de
                    agilidade.
                </p>
                <button
                    data-toggle="modal"
                    data-target="#planform"
                    class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                >
                    Saiba mais
                </button>
            </div>
            <div
                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
            >
                <h1
                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                >
                    EDUSEG<sup>&reg;</sup> In-Company
                </h1>
                <h2 class="text-xl/6 font-semibold">
                    Treinamento presencial na sua empresa
                </h2>
                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
                    <li>Atendemos nas principais cidades do Brasil</li>
                    <li>Instrutores especialistas com vivência prática</li>
                    <li>Ideal para grandes turmas ou treinamentos práticos</li>
                </ul>
                <p class="mt-auto">
                    Solução sob medida, direto no seu ambiente de trabalho.
                </p>
                <button
                    data-toggle="modal"
                    data-target="#planform"
                    class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                >
                    Saiba mais
                </button>
            </div>
            <div
                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
            >
                <h1
                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                >
                    EDUSEG<sup>&reg;</sup> Conteúdo
                </h1>
                <h2 class="text-xl/6 font-semibold">
                    Leve nosso conteúdo para sua plataforma
                </h2>
                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
                    <li>Customização completa com sua identidade visual</li>
                    <li>Entregamos em formato SCORM para qualquer LMS</li>
                    <li>Ideal para empresas com ambiente EAD próprio</li>
                </ul>
                <p class="mt-auto">
                    Seu time com o nosso conteúdo, na sua plataforma.
                </p>
                <button
                    data-toggle="modal"
                    data-target="#planform"
                    class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                >
                    Saiba mais
                </button>
            </div>
        </div>
    </section>
</Container>