@extends('layouts.vitrine')

@section('titre', 'Établissements')

@section('contenu')
    <section class="relative overflow-hidden border-b-4 border-black bg-white">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[8%] top-10 h-14 w-14 bg-[#FFD23F] [--r:12deg]"></span><span class="flotte absolute right-[35%] bottom-8 h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:1.5s]"></span></div>
        <div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
            <p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pour les établissements</p>
            <h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Un projet par établissement. Un réseau par classe.</h1>
            <p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque établissement a son espace isolé sur notre cloud OpenStack hébergé en France. Chaque classe a son propre réseau, sans IP publique.</p>
        </div>
    </section>
    <section class="mx-auto max-w-7xl px-5 pb-28 pt-20 lg:px-10" aria-labelledby="titre-roles">
        <h2 id="titre-roles" class="text-5xl font-black tracking-tighter sm:text-6xl">Chacun son rôle.</h2>
        <ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <li class="border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000]"><h3 class="text-2xl font-black">Administrateur</h3><p class="mt-3 font-medium">Crée les classes, gère les enseignants et les quotas de l’établissement.</p></li>
            <li class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] lg:translate-y-8"><h3 class="text-2xl font-black">Enseignant</h3><p class="mt-3 font-medium">Réserve une séance, suit la classe en direct, prend la main sur une console.</p></li>
            <li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000]"><h3 class="text-2xl font-black">Élève</h3><p class="mt-3 font-medium">Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.</p></li>
            <li class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[6px_6px_0px_#000000] lg:translate-y-8"><h3 class="text-2xl font-black">Formateur</h3><p class="mt-3 font-medium">Anime des sessions pour adultes en titre professionnel.</p></li>
        </ul>
    </section>
    <section class="border-y-4 border-black bg-[#FFD23F]" aria-labelledby="titre-biblio">
        <div class="mx-auto grid max-w-7xl gap-10 px-5 py-20 lg:grid-cols-12 lg:px-10">
            <h2 id="titre-biblio" class="text-5xl font-black leading-[0.95] tracking-tighter lg:col-span-5">Une bibliothèque à dupliquer et adapter.</h2>
            <div class="lg:col-span-7">
                <p class="text-xl font-medium">Des séquences complètes, reliées aux référentiels : cours, TD, quiz et lab. Dupliquez une séquence, modifiez-la pour votre classe. Les quiz s’exportent en GIFT et Moodle XML.</p>
                <ul class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
                    <li class="border-2 border-black bg-white px-3 py-1">Cours</li><li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">TD</li><li class="border-2 border-black bg-[#C4B5FD] px-3 py-1">Quiz</li><li class="border-2 border-black bg-[#FF6FB5] px-3 py-1">Lab</li>
                    <li class="border-2 border-black bg-black px-3 py-1 text-white">Moodle LTI 1.3 · bientôt</li><li class="border-2 border-black bg-black px-3 py-1 text-white">SSO ENT · plus tard</li>
                </ul>
            </div>
        </div>
    </section>
    <section class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10" aria-labelledby="titre-contact">
        <div class="lg:col-span-5">
            <h2 id="titre-contact" class="text-5xl font-black leading-[0.95] tracking-tighter">Équiper votre établissement.</h2>
            <p class="mt-6 text-lg font-medium">Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.</p>
        </div>
        <form action="{{ route('etablissements') }}" method="post" class="grid gap-5 border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] sm:grid-cols-2 lg:col-span-7">
            @csrf
            <label class="grid gap-2 font-extrabold">Nom<input name="nom" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
            <label class="grid gap-2 font-extrabold">Établissement<input name="etablissement" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
            <label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
            <label class="grid gap-2 font-extrabold sm:col-span-2">Votre besoin<textarea name="message" rows="4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="2 classes de BTS SIO, 30 élèves chacune"></textarea></label>
            <div class="sm:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Envoyer la demande <span class="font-mono" aria-hidden="true">→</span></button></div>
        </form>
    </section>
@endsection