@extends('layouts.vitrine')

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

@section('contenu')
    <section class="border-b border-[#e3e5e8] bg-white">
        <div class="mx-auto max-w-7xl px-5 pb-12 pt-12 lg:px-10">
            <p class="inline-block border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-bold">Pour les élèves</p>
            <div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
<h1 class="mt-6 max-w-5xl text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl">Envie d’aller plus loin à la maison&nbsp;?</h1></div>
            <p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Sur Syllabus, 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 border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white hover:bg-[#ec3013]">Coder dans l’IDE →</a><a href="{{ route('generateur') }}" class="inline-flex items-center border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-6 py-4 text-lg font-extrabold">S’entraîner au générateur de TD</a><a href="{{ route('cours.index') }}" class="inline-flex items-center border border-[#e3e5e8] rounded-2xl bg-white px-6 py-4 text-lg font-extrabold hover:bg-[#fef7e0]">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-extrabold tracking-tight">Ressources externes gratuites</h2>
        <p class="mt-3 max-w-2xl text-lg font-semibold">Elles ne font pas partie de Syllabus. 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-[#fef7e0]","bg-[#e6f4ea]","bg-[#eef0fd]","bg-[#fce8e6]","bg-white"];
            document.getElementById('ext').innerHTML = window.REFERENTIEL.plusLoin.map(function (r, i) {
                return '<li class="flex flex-col border border-[#e3e5e8] rounded-2xl ' + C[i % C.length] + ' p-6 ' + (i % 3 === 1 ? '' : '') + '"><p class="font-mono text-xs font-semibold uppercase">' + r[0] + '</p><p class="mt-2 text-2xl font-extrabold">' + 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 border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#0b57d0] hover:text-white">Ouvrir ↗</a></li>';
            }).join('');
        })();
    </script>
@endsection