@extends('layouts.vitrine')

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

@section('contenu')
    <section style="padding:112px 20px 96px;background:#fff"><div style="max-width:900px;margin:0 auto"><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0;text-align:center">Gratuit, sans compte</p><h1 style="margin:20px 0 0;font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:#0b1220;text-align:center;text-wrap:balance">99 cours gratuits, calés sur vos référentiels.</h1><p style="margin:24px auto 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-align:center;text-wrap:pretty">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><p style="margin:28px 0 0;text-align:center;font-size:15px;font-weight:700;color:#5f6368">99 cours · 45 TD · 59 TP sur VM · 98 QCM corrigés</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="#nsi" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Choisir mon cursus</a></div><nav aria-label="Cursus" style="margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px"><a href="#nsi" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Lycée NSI</a><a href="#sio" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">BTS SIO SISR</a><a href="#ciel" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">BTS CIEL</a><a href="#but" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">BUT R&amp;T</a><a href="#tssr" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Titre pro TSSR</a><a href="#prog" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Programmation</a></nav></div></section>
    <section id="{{ $c['id'] }}" class="scroll-mt-24" style="border-top:1px solid #e3e5e8" 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 ? '' : '' }} border border-[#e3e5e8] rounded-2xl {{ $c['couleur'] }} px-4 py-1 text-5xl font-extrabold tracking-tight 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 border-[#e3e5e8] rounded-2xl bg-white {{ $loop->even ? '' : '' }}">
                    <h3 class="border-b border-[#e3e5e8] {{ $c['couleur'] }} px-5 py-3 text-lg font-extrabold">{{ $b['titre'] }}</h3>
                    <ul class="divide-y divide-[#e3e5e8]">
                        @foreach ($b['cours'] as $k)
                        <li data-types="{{ implode(' ', $k['types']) }}"><a href="{{ isset($k['exercice']) ? route('ide', ['ex' => $k['exercice']]) : route('cours.fiche', ['chapitre' => $k['titre'] ?? '']) }}" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#f8f9fa]"><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 border-[#dadce0] rounded-lg {{ $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