@extends('layouts.vitrine')

@section('titre', 'Cours gratuits')

@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="zigzag absolute right-10 top-16 h-4 w-40"></span><span class="etoile flotte absolute right-[22%] bottom-24 h-10 w-10 bg-[#C4B5FD] [--r:12deg]"></span><span class="flotte absolute right-[8%] bottom-10 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-16 pt-14 lg:px-10 lg:pt-20">
            <p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit, sans compte</p>
            <h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">99 cours gratuits, calés sur vos référentiels.</h1>
            <p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.</p>
            <dl class="mt-12 grid max-w-3xl grid-cols-2 border-4 border-black sm:grid-cols-4">
                <div class="border-b-4 border-r-4 border-black bg-white p-4 sm:border-b-0"><dt class="font-mono text-sm font-semibold">Cours</dt><dd class="text-4xl font-black">99</dd></div>
                <div class="border-b-4 border-black bg-[#C4B5FD] p-4 sm:border-b-0 sm:border-r-4"><dt class="font-mono text-sm font-semibold">TD</dt><dd class="text-4xl font-black">45</dd></div>
                <div class="border-r-4 border-black bg-[#7CF2C0] p-4"><dt class="font-mono text-sm font-semibold">TP sur VM</dt><dd class="text-4xl font-black">59</dd></div>
                <div class="bg-[#FFD23F] p-4"><dt class="font-mono text-sm font-semibold">QCM corrigés</dt><dd class="text-4xl font-black">98</dd></div>
            </dl>
            <div class="mt-8 flex flex-wrap gap-4"><a href="{{ route('bibliotheque') }}" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013]">Bibliothèque complète · 225 fiches →</a><a href="{{ route('generateur') }}" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Générateur de TD</a><a href="{{ route('ide') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">IDE en ligne</a></div>
        </div>
    </section>
    <nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Filtres des cours">
        <div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-5 py-4 lg:px-10">
            <span class="mr-1 font-extrabold">Cursus</span>
            <a href="#nsi" class="border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Lycée NSI</a>
            <a href="#sio" class="border-2 border-black bg-[#7CF2C0] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS SIO SISR</a>
            <a href="#ciel" class="border-2 border-black bg-[#C4B5FD] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS CIEL</a>
            <a href="#but" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BUT R&amp;T</a>
            <a href="#tssr" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Titre pro TSSR</a>
            <a href="#prog" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Programmation</a>
            <div class="ml-auto flex flex-wrap items-center gap-2" role="group" aria-label="Filtrer par type">
                <span class="mr-1 font-extrabold">Contient</span>
                <button type="button" data-filtre="Tout" aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">Tout</button>
                <button type="button" data-filtre="TD" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TD</button>
                <button type="button" data-filtre="TP" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TP</button>
                <button type="button" data-filtre="QCM" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">QCM</button>
                <button type="button" data-filtre="IDE" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">IDE</button>
            </div>
        </div>
    </nav>
    <div class="border-b-4 border-black bg-white">
        <div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 text-sm font-semibold lg:px-10">
            <span class="flex items-center gap-2"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span> Cours magistral</span>
            <span class="flex items-center gap-2"><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span> Travaux dirigés, corrigés</span>
            <span class="flex items-center gap-2"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span> Travaux pratiques sur VM</span>
            <span class="flex items-center gap-2"><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span> Quiz à correction expliquée</span>
            <span class="flex items-center gap-2"><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span> Exercice de code dans l’IDE</span>
        </div>
    </div>
    @php
        $cursus = config('cours');
        $fond = ['CM' => 'bg-white', 'TD' => 'bg-[#C4B5FD]', 'TP' => 'bg-[#7CF2C0]', 'QCM' => 'bg-[#FFD23F]', 'IDE' => 'bg-[#13233A] text-white'];
    @endphp
    @foreach ($cursus as $c)
    <section id="{{ $c['id'] }}" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-{{ $c['id'] }}">
        <div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
            <div class="flex flex-wrap items-end gap-x-8 gap-y-3">
                <h2 id="t-{{ $c['id'] }}" class="inline-block {{ $loop->odd ? '-rotate-1' : 'rotate-1' }} border-4 border-black {{ $c['couleur'] }} px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">{{ $c['nom'] }}</h2>
                <p class="text-lg font-semibold">{{ $c['sous_titre'] }} · {{ collect($c['blocs'])->sum(fn ($b) => count($b['cours'])) }} cours</p>
            </div>
            <div class="mt-12 grid gap-10 lg:grid-cols-2">
                @foreach ($c['blocs'] as $b)
                <div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] {{ $loop->even ? 'lg:translate-y-6' : '' }}">
                    <h3 class="border-b-4 border-black {{ $c['couleur'] }} px-5 py-3 text-lg font-black">{{ $b['titre'] }}</h3>
                    <ul class="divide-y-2 divide-black">
                        @foreach ($b['cours'] as $k)
                        <li data-types="{{ implode(' ', $k['types']) }}"><a href="{{ isset($k['exercice']) ? route('ide', ['ex' => $k['exercice']]) : route('cours.show') }}" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">{{ $k['titre'] }}</span><span class="flex gap-1">@foreach ($k['types'] as $t)<span class="border-2 border-black {{ $fond[$t] }} px-1.5 font-mono text-xs font-semibold">{{ $t }}</span>@endforeach</span><span class="w-10 text-right font-mono text-sm font-semibold">{{ $k['heures'] }} h</span></a></li>
                        @endforeach
                    </ul>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endforeach
    <script>
        document.querySelectorAll('[data-filtre]').forEach(function (b) {
            b.addEventListener('click', function () {
                var f = b.dataset.filtre;
                document.querySelectorAll('[data-filtre]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
                document.querySelectorAll('[data-types]').forEach(function (li) {
                    li.hidden = f !== 'Tout' && li.dataset.types.split(' ').indexOf(f) === -1;
                });
                document.querySelectorAll('[data-bloc]').forEach(function (b) { b.hidden = !b.querySelector('[data-types]:not([hidden])'); });
                document.querySelectorAll('section[id]').forEach(function (s) { if (s.querySelector('[data-bloc]')) s.hidden = !s.querySelector('[data-bloc]:not([hidden])'); });
            });
        });
    </script>
@endsection