{{-- Tout doit rester DANS cet élément racine : une directive Blade placée
     avant lui empêche Livewire d'hydrater le composant, et les boutons du
     diagnostic cessent silencieusement de répondre. C'est arrivé en production. --}}
<div class="mx-auto max-w-2xl px-4 py-10">
    @inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')

    @php
        // Questions posées avant même de commencer le diagnostic : elles lèvent les
        // freins (peur d'être fiché, crainte de perdre l'entreprise) qui font perdre
        // aux dirigeants les semaines les plus précieuses.
        $faq = [
            [
                'q' => "Demander de l'aide au tribunal, est-ce déjà perdre mon entreprise ?",
                'a' => "Non. La sauvegarde s'adresse au dirigeant qui n'est pas en cessation des paiements et qui rencontre des difficultés qu'il ne peut surmonter seul ([[L620-1]]) : l'activité continue, le dirigeant reste en fonction et les poursuites sont suspendues. Statistiquement, ce sont les dossiers ouverts tôt qui débouchent sur un plan ; ceux qui arrivent au bout de la trésorerie n'ont souvent plus que la liquidation comme issue.",
            ],
            [
                'q' => "Puis-je négocier avec mes créanciers sans que cela se sache ?",
                'a' => "Oui. Le mandat ad hoc ([[L611-3]]) et la conciliation ([[L611-4]]) sont des procédures amiables et confidentielles : aucune publicité, aucune mention au registre, un mandataire désigné par le président du tribunal vous aide à négocier des délais avec vos principaux créanciers. C'est l'outil le plus sous-utilisé du Livre VI alors qu'il est celui qui préserve le mieux la relation commerciale.",
            ],
            [
                'q' => "Mes salariés seront-ils payés ?",
                'a' => "Les créances salariales bénéficient d'une garantie par l'AGS et d'un privilège qui les place en tête des paiements ([[L625-8]]). Le mandataire judiciaire établit les relevés de créances salariales et l'AGS avance les sommes dues dans les limites de son plafond. La question du paiement des salaires ne doit donc pas, à elle seule, retarder l'ouverture d'une procédure.",
            ],
            [
                'q' => "Suis-je personnellement responsable des dettes de ma société ?",
                'a' => "En principe non : les dettes sont celles de la personne morale. La responsabilité personnelle du dirigeant ne peut être engagée qu'en cas de faute de gestion ayant contribué à une insuffisance d'actif, et le tribunal peut alors mettre tout ou partie de cette insuffisance à sa charge ([[L651-2]]). Une simple négligence ne suffit pas. En revanche, les cautions personnelles que vous avez signées, elles, restent dues.",
            ],
            [
                'q' => "Ce diagnostic est-il enregistré quelque part ?",
                'a' => "Non. Vos réponses restent dans votre navigateur le temps de la session, elles ne sont ni stockées, ni transmises, ni rattachées à votre identité. Le résultat est une orientation générale : il ne constitue pas un conseil juridique personnalisé et ne remplace pas l'analyse d'un professionnel sur pièces.",
            ],
        ];
    @endphp

    @push('jsonld')
        <x-jsonld :graph="\App\Support\StructuredData::graph(
            \App\Support\StructuredData::article(
                'Diagnostic d\'urgence : où en est votre entreprise ?',
                'Une auto-évaluation gratuite et anonyme pour situer la difficulté de votre entreprise et connaître les options encore ouvertes.',
                route('urgence'),
                \App\Support\StructuredData::revision('urgence'),
            ),
            \App\Support\StructuredData::breadcrumb(['Urgence dirigeant' => route('urgence')]),
            \App\Support\StructuredData::faq($faq),
        )" />
    @endpush

    @php
        $palette = [
            'information' => ['bg-teal-50','text-teal-900','ring-teal-200','bg-teal-600'],
            'vigilance' => ['bg-amber-50','text-amber-900','ring-amber-200','bg-amber-500'],
            'action_rapide' => ['bg-orange-50','text-orange-900','ring-orange-200','bg-orange-500'],
            'urgence' => ['bg-red-50','text-red-900','ring-red-200','bg-red-600'],
            'echeance_critique' => ['bg-red-100','text-red-950','ring-red-300','bg-red-700'],
        ];
        $current = $questions[$step] ?? null;
        $total = count($questions);
    @endphp

    <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> Urgence dirigeant
    </nav>

    @if ($result)
        {{-- RÉSULTAT --}}
        @php $c = $palette[$result['level']] ?? $palette['information']; @endphp
        <div class="rounded-xl border border-line bg-surface p-6 shadow-sm">
            <div class="text-xs font-bold uppercase tracking-wider text-muted">Niveau d'alerte</div>
            <div class="mt-2 inline-flex items-center gap-2 rounded-full {{ $c[0] }} {{ $c[1] }} px-3 py-1.5 text-sm font-bold ring-1 {{ $c[2] }}">
                <span class="h-2.5 w-2.5 rounded-full {{ $c[3] }}" aria-hidden="true"></span>
                {{ $result['level_label'] }}
            </div>

            <h1 class="mt-4 font-sans text-2xl font-bold text-title">{{ $result['title'] }}</h1>

            <div class="mt-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                <strong>Orientation indicative, pas une qualification juridique.</strong>
                Ce résultat repose sur des éléments déclaratifs et incomplets&nbsp;; il ne remplace pas l'analyse d'un professionnel.
            </div>

            <p class="prose-legal mt-4 text-[15px]">{{ $result['situation'] }}</p>

            @if (!empty($result['demarches']))
                <h2 class="mt-5 font-sans text-lg font-bold text-title">Démarches à envisager</h2>
                <ul class="mt-2 space-y-1.5">
                    @foreach ($result['demarches'] as $d)
                        <li class="flex gap-2 text-[15px]"><span class="mt-1 text-rep-blue" aria-hidden="true">→</span><span>{{ $d }}</span></li>
                    @endforeach
                </ul>
            @endif

            @if (!empty($result['missing']))
                <h2 class="mt-5 font-sans text-lg font-bold text-title">Éléments manquants à préciser</h2>
                <ul class="mt-2 list-disc space-y-1 pl-5 text-sm text-muted">
                    @foreach ($result['missing'] as $m)<li>{{ $m }}</li>@endforeach
                </ul>
            @endif

            <div class="mt-6 flex flex-wrap items-center gap-3 border-t border-line pt-4 text-sm text-muted">
                <span>Diagnostic du {{ now()->format('d/m/Y') }} · version {{ $result['rules_version'] }}</span>
            </div>

            <div class="mt-4 flex flex-wrap gap-3">
                <a href="{{ route('encyclopedie.index') }}" class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-white no-underline hover:opacity-90">Comprendre ma procédure</a>
                <button type="button" wire:click="restart" class="rounded-md border border-line px-4 py-2 text-sm font-semibold text-ink hover:bg-paper">Recommencer</button>
            </div>
        </div>

        <p class="mt-4 text-center text-xs text-muted">L'export PDF et l'enregistrement dans un dossier arriveront avec les comptes (Phase 2).</p>

    @elseif ($current)
        {{-- QUESTIONNAIRE --}}
        <div class="mb-6">
            <div class="flex items-center justify-between text-xs text-muted">
                <span>Question {{ $step + 1 }} / {{ $total }}</span>
                <span>{{ round(($step) / $total * 100) }}%</span>
            </div>
            <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-paper-2">
                <div class="h-full rounded-full bg-primary transition-all" style="width: {{ max(6, round($step / $total * 100)) }}%"></div>
            </div>
        </div>

        <div class="rounded-xl border border-line bg-surface p-6 shadow-sm" wire:key="q-{{ $step }}">
            <h1 class="font-sans text-xl font-bold text-title">{{ $current['label'] }}</h1>
            @if (!empty($current['help']))<p class="mt-1 text-sm text-muted">{{ $current['help'] }}</p>@endif

            <div class="mt-5 space-y-2.5">
                @foreach ($current['options'] as $value => $label)
                    <button type="button"
                            wire:click="choose('{{ $current['field'] }}', '{{ $value }}')"
                            class="flex w-full items-center justify-between rounded-lg border px-4 py-3 text-left text-[15px] font-medium transition
                                {{ ($answers[$current['field']] ?? null) === $value ? 'border-rep-blue bg-paper text-title' : 'border-line bg-surface text-ink hover:border-rep-blue hover:bg-paper' }}">
                        <span>{{ $label }}</span>
                        <span class="text-rep-blue" aria-hidden="true">→</span>
                    </button>
                @endforeach
            </div>

            <div class="mt-5 flex items-center justify-between">
                <button type="button" wire:click="previous" @disabled($step === 0)
                        class="text-sm font-medium text-muted hover:text-ink disabled:opacity-40">← Précédent</button>
                <span class="text-xs text-muted">Vos réponses restent anonymes.</span>
            </div>
        </div>

        <div class="mt-6"><x-deontology compact /></div>
    @endif

    {{-- Visible quel que soit l'état du diagnostic : ces questions sont celles
         qui retiennent le dirigeant d'agir, il faut y répondre avant. --}}
    <section class="mt-12" aria-labelledby="faq-urgence">
        <span class="tricolore-tick"></span>
        <h2 id="faq-urgence" class="mt-3 font-sans text-2xl font-bold text-title">Ce que les dirigeants demandent en premier</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">{!! $renderer->html($qa['a']) !!}</div>
                </details>
            @endforeach
        </div>
    </section>

    <nav class="mt-10 border-t border-line pt-6" aria-labelledby="suite-urgence">
        <h2 id="suite-urgence" class="text-xs font-bold uppercase tracking-wider text-muted">Pour aller plus loin</h2>
        <ul class="mt-3 grid gap-2 sm:grid-cols-2">
            <li><a href="{{ route('tuteur') }}" class="link-blue text-sm">Se faire guider pas à pas par le tuteur →</a></li>
            <li><a href="{{ route('simulateurs.45-jours') }}" class="link-blue text-sm">Calculer ma date limite de déclaration →</a></li>
            <li><a href="{{ route('comparateur') }}" class="link-blue text-sm">Comparer les procédures possibles →</a></li>
            <li><a href="{{ route('avocats') }}" class="link-blue text-sm">Trouver un avocat près de chez moi →</a></li>
        </ul>
    </nav>

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