@php
    $faq = [
        [
            'q' => "Par quel guide commencer ?",
            'a' => "Par celui qui correspond à votre situation d'aujourd'hui, pas au début du parcours. Si vous avez déjà reçu une assignation, la station « Le point de bascule » vous concerne davantage que la prévention. Les cases à cocher, en haut de page, réduisent le parcours aux guides qui vous concernent.",
        ],
        [
            'q' => "Pourquoi le coût de la procédure arrive-t-il à la fin ?",
            'a' => "Parce qu'on se le demande une fois la décision prise, rarement avant. Placer cette question au début laisserait croire qu'elle commande le choix de la procédure, alors que ce choix dépend de la situation, et souvent du tribunal.",
        ],
        [
            'q' => "Ces guides remplacent-ils un avocat ?",
            'a' => "Non. Ils expliquent le cadre, les délais et les options pour que vous arriviez préparé chez un professionnel, non pour vous en dispenser. Chaque étape renvoie au texte applicable afin que vous puissiez vérifier.",
        ],
    ];
@endphp

<x-layout title="Guides pratiques" description="Des réponses pas à pas aux situations que vivent les dirigeants, rangées selon le moment où vous vous trouvez : anticiper, basculer, tenir, décider, se protéger."
    :modified-time="optional($guides->max('updated_at'))->toIso8601String() ?: \App\Support\StructuredData::revision('guides')">
    <x-slot:jsonld>
        {{-- La date de la collection suit le guide le plus récemment révisé :
             elle reste juste sans intervention manuelle. --}}
        <x-jsonld :graph="\App\Support\StructuredData::graph(
            \App\Support\StructuredData::article(
                'Guides pratiques : le parcours du dirigeant en difficulté',
                'Cinq moments, de la première tension au rebond. Chaque guide répond à une question concrète et renvoie au texte applicable.',
                route('guides.index'),
                optional($guides->min('created_at'))->toIso8601String() ?: \App\Support\StructuredData::revision('guides'),
                optional($guides->max('updated_at'))->toIso8601String() ?: \App\Support\StructuredData::revision('guides'),
            ),
            \App\Support\StructuredData::breadcrumb(['Guides pratiques' => route('guides.index')]),
            \App\Support\StructuredData::faq($faq),
            [
                '@type' => 'ItemList',
                'name' => 'Guides pratiques',
                'numberOfItems' => $guides->count(),
                'itemListElement' => $guides->values()->map(fn ($guide, $rang) => [
                    '@type' => 'ListItem',
                    'position' => $rang + 1,
                    'name' => $guide->title,
                    'url' => route('guides.show', $guide),
                ])->all(),
            ],
        )" />
    </x-slot:jsonld>

    <div class="mx-auto max-w-5xl px-4 py-12">
        <nav class="mb-4 text-sm text-muted" aria-label="Fil d'Ariane">
            <a href="{{ route('home') }}" class="link-blue">Accueil</a> <span aria-hidden="true">›</span>
            <span class="text-ink">Guides pratiques</span>
        </nav>

        <span class="tricolore-tick"></span>
        <h1 class="mt-3 font-sans text-3xl font-bold text-title">Guides pratiques</h1>
        <p class="mt-2 max-w-2xl text-[17px] leading-relaxed text-muted">
            Les difficultés d'une entreprise suivent un ordre. Ces {{ $guides->count() }} guides sont rangés
            selon <strong class="text-ink">le moment où vous vous trouvez</strong>, et non par thème
            juridique&nbsp;: on ne cherche pas une procédure, on cherche quoi faire maintenant.
        </p>

        {{-- La frise : repère du parcours, et navigation directe vers une étape. --}}
        <nav class="mt-8" aria-label="Les cinq moments">
            <ol class="grid gap-2 sm:grid-cols-5">
                @foreach ($stations as $station)
                    <li>
                        <a href="#station-{{ $station['cle'] }}"
                           class="lift flex h-full flex-col rounded-xl border border-line bg-surface p-4 no-underline hover:border-rep-blue">
                            <span class="flex items-center gap-2">
                                <span class="grid h-7 w-7 flex-none place-items-center rounded-lg bg-rep-red font-sans text-sm font-bold text-white" aria-hidden="true">{{ $station['numero'] }}</span>
                                <span class="h-px flex-1 bg-line" aria-hidden="true"></span>
                            </span>
                            <span class="mt-2 font-sans text-sm font-bold uppercase tracking-wide text-title">{{ $station['titre'] }}</span>
                            <span class="mt-1 flex-1 text-xs leading-relaxed text-muted">{{ $station['question'] }}</span>
                            <span class="mt-2 text-[11px] tabular-nums text-muted">{{ $station['lot']->count() }} guide{{ $station['lot']->count() > 1 ? 's' : '' }}</span>
                        </a>
                    </li>
                @endforeach
            </ol>
        </nav>

        {{-- Entrée transversale : un dirigeant qui coche « ma banque me lâche » ne
             sait pas encore à quelle station il se trouve. Le filtre s'applique
             dans le navigateur, aucune requête, la page reste cacheable. --}}
        <section class="mt-6 rounded-xl border border-line bg-surface p-5" aria-labelledby="signaux" data-filtre-guides>
            <h2 id="signaux" class="font-sans text-xs font-bold uppercase tracking-wider text-title-2">Où en êtes-vous&nbsp;?</h2>
            <p class="mt-1 text-sm text-muted">Cochez ce que vous constatez&nbsp;: le parcours se réduit aux guides concernés.</p>

            <div class="mt-3 flex flex-wrap gap-2">
                @foreach ($signaux as $signal)
                    <label class="cursor-pointer rounded-full border border-line px-3.5 py-1.5 text-sm font-semibold text-ink transition hover:border-rep-blue has-[:checked]:border-rep-red has-[:checked]:bg-rep-red has-[:checked]:text-white">
                        <input type="checkbox" class="sr-only" value="{{ $signal['cle'] }}" data-signal>
                        {{ $signal['libelle'] }}
                    </label>
                @endforeach
            </div>

            <p class="mt-3 hidden text-sm text-muted" data-filtre-actif>
                <span data-filtre-compte></span> -
                <button type="button" class="font-semibold link-blue" data-filtre-reset>↺ Tout afficher</button>
            </p>
        </section>

        {{-- Le parcours, station par station. --}}
        <div class="mt-10 space-y-10">
            @foreach ($stations as $station)
                <section id="station-{{ $station['cle'] }}" class="scroll-mt-24" data-station aria-labelledby="titre-{{ $station['cle'] }}">
                    <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                        <span class="grid h-9 w-9 flex-none place-items-center rounded-lg bg-rep-red font-sans text-lg font-bold text-white" aria-hidden="true">{{ $station['numero'] }}</span>
                        <h2 id="titre-{{ $station['cle'] }}" class="font-sans text-xl font-bold uppercase tracking-wide text-title">{{ $station['titre'] }}</h2>
                        <span class="text-[15px] text-muted">{{ $station['question'] }}</span>
                    </div>
                    <p class="mt-2 max-w-3xl text-[15px] leading-relaxed text-muted">{{ $station['note'] }}</p>

                    @if ($station['lot']->isEmpty())
                        <p class="mt-4 rounded-lg border border-dashed border-line px-5 py-4 text-sm text-muted">
                            Aucun guide publié à cette étape pour l'instant.
                        </p>
                    @else
                        <div class="mt-4 grid gap-4 sm:grid-cols-2">
                            @foreach ($station['lot'] as $guide)
                                <article class="lift flex flex-col rounded-2xl border border-line bg-surface p-5"
                                         data-guide data-signaux="{{ implode(' ', \App\Support\ParcoursGuides::signauxDuGuide($guide->slug)) }}">
                                    <h3 class="font-sans text-lg font-bold leading-snug text-title">
                                        <a href="{{ route('guides.show', $guide) }}" class="no-underline hover:text-rep-blue">{{ $guide->title }}</a>
                                    </h3>
                                    @if ($guide->audience)
                                        <div class="mt-1 text-[11px] font-bold uppercase tracking-wide text-rep-blue">{{ $guide->audience }}</div>
                                    @endif
                                    @if ($guide->meta_description)
                                        <p class="mt-2 flex-1 text-sm leading-relaxed text-muted">{{ \App\Support\ApercuArticle::nettoyer($guide->meta_description) }}</p>
                                    @endif
                                    <a href="{{ route('guides.show', $guide) }}" class="mt-4 text-sm font-semibold link-blue">Lire le guide →</a>
                                </article>
                            @endforeach
                        </div>
                    @endif
                </section>
            @endforeach
        </div>

        <p class="mt-10 rounded-lg border-l-[3px] border-rep-blue bg-surface px-5 py-4 text-[15px] leading-relaxed text-ink">
            Le parcours s'étoffe&nbsp;: de nouveaux guides viennent compléter chaque étape.
            Votre situation n'y figure pas&nbsp;?
            <a href="{{ route('urgence') }}" class="link-blue font-semibold">Le diagnostic d'urgence</a>
            vous oriente en cinq minutes.
        </p>

        <section class="mt-12" aria-labelledby="faq-guides">
            <span class="tricolore-tick"></span>
            <h2 id="faq-guides" class="mt-3 font-sans text-2xl font-bold text-title">Questions fréquentes</h2>
            <div class="mt-5 space-y-3">
                @foreach ($faq as $qa)
                    <details class="accordeon">
                        <summary class="font-semibold text-title">{{ $qa['q'] }}</summary>
                        <div class="mt-2 text-[15px] leading-relaxed text-ink">{{ $qa['a'] }}</div>
                    </details>
                @endforeach
            </div>
        </section>

        <x-signature class="mt-8" :date="\App\Support\StructuredData::revision('guides')" />
    </div>

    @push('scripts')
    <script>
        // Filtrage par signal, entièrement côté navigateur : la page ne pose aucun
        // cookie et reste servie depuis le cache. Sans JavaScript, tous les guides
        // restent visibles, le filtre est un confort, jamais un passage obligé.
        (function () {
            const zone = document.querySelector('[data-filtre-guides]');
            if (!zone) return;

            const cases = zone.querySelectorAll('[data-signal]');
            const guides = document.querySelectorAll('[data-guide]');
            const stations = document.querySelectorAll('[data-station]');
            const bandeau = zone.querySelector('[data-filtre-actif]');
            const compte = zone.querySelector('[data-filtre-compte]');

            function appliquer() {
                const actifs = [...cases].filter(c => c.checked).map(c => c.value);
                let visibles = 0;

                guides.forEach(function (guide) {
                    const siens = (guide.dataset.signaux || '').split(' ').filter(Boolean);
                    const garde = actifs.length === 0 || actifs.some(a => siens.includes(a));
                    guide.hidden = !garde;
                    if (garde) visibles++;
                });

                // Une station dont tous les guides sont masqués disparaît : laisser
                // une étape vide donnerait à croire qu'elle ne contient rien.
                stations.forEach(function (station) {
                    const restants = station.querySelectorAll('[data-guide]:not([hidden])').length;
                    station.hidden = actifs.length > 0 && restants === 0;
                });

                bandeau.classList.toggle('hidden', actifs.length === 0);
                compte.textContent = visibles + (visibles > 1 ? ' guides correspondent' : ' guide correspond');
            }

            cases.forEach(c => c.addEventListener('change', appliquer));
            zone.querySelector('[data-filtre-reset]').addEventListener('click', function () {
                cases.forEach(c => { c.checked = false; });
                appliquer();
            });
        })();
    </script>
    @endpush
</x-layout>