@extends('layouts.vitrine')

@section('titre', 'Ressources à la maison')

@section('contenu')
    <section class="border-b-4 border-black bg-white">
        <div class="mx-auto max-w-7xl px-5 pb-12 pt-12 lg:px-10">
            <p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pour les élèves</p>
            <h1 class="mt-6 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Envie d’aller plus loin à la maison&nbsp;?</h1>
            <p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Sur Paillasse, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.</p>
            <div class="mt-8 flex flex-wrap gap-4"><a href="{{ route('ide') }}" 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] hover:bg-[#ec3013]">Coder dans l’IDE →</a><a href="{{ route('generateur') }}" class="inline-flex items-center border-4 border-black bg-[#FF6FB5] px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000]">S’entraîner au générateur de TD</a><a href="{{ route('cours.index') }}" class="inline-flex items-center border-4 border-black bg-white px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000] hover:bg-[#FFD23F]">Relire les cours</a></div>
        </div>
    </section>
    <section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="t-ext">
        <h2 id="t-ext" class="text-4xl font-black tracking-tighter">Ressources externes gratuites</h2>
        <p class="mt-3 max-w-2xl text-lg font-semibold">Elles ne font pas partie de Paillasse. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.</p>
        <ul id="ext" class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-3"></ul>
    </section>
    <script src="{{ asset('js/referentiel.js') }}"></script>
    <script>
        (function () {
            var C = ["bg-[#FFD23F]","bg-[#7CF2C0]","bg-[#C4B5FD]","bg-[#FF6FB5]","bg-white"];
            document.getElementById('ext').innerHTML = window.REFERENTIEL.plusLoin.map(function (r, i) {
                return '<li class="flex flex-col border-4 border-black ' + C[i % C.length] + ' p-6 shadow-[6px_6px_0px_#000000] ' + (i % 3 === 1 ? 'lg:translate-y-4' : '') + '"><p class="font-mono text-xs font-semibold uppercase">' + r[0] + '</p><p class="mt-2 text-2xl font-black">' + r[1] + '</p><p class="mt-2 flex-1 font-semibold">' + r[3] + '</p><a href="' + r[2] + '" target="_blank" rel="noopener" class="mt-4 self-start border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">Ouvrir ↗</a></li>';
            }).join('');
        })();
    </script>
@endsection