---
import Container from "~/components/Container.astro";
import Form from "./Contact.jsx";
---

<div
    x-data="{ open: false }"
    x-on:keydown.esc.prevent.stop="open = false"
    x-effect="document.body.classList.toggle('overflow-hidden', open)"
>
    <div style="display: none;" x-show="open">
        <div
            class="fixed inset-0 flex justify-center items-center p-2.5 z-40 overflow-y-auto"
        >
            <div
                x-on:click="open = false"
                class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
            >
            </div>
            <div
                class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow"
            >
                <h1 class="text-3xl lg:text-4xl font-medium">
                    Preencha os dados da sua empresa
                </h1>
                <Form client:load />
            </div>
        </div>
    </div>

    <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
                        x-on:click="open = true"
                        class="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
                        x-on:click="open = true"
                        class="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
                        x-on:click="open = true"
                        class="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>
</div>