@inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')

@php
    // Maillage automatique vers les fiches du glossaire, comme sur les fiches.
    $renderer->linkGlossaryTerms(true);
@endphp

<x-layout :title="$guide->title" :description="$guide->meta_description" og-type="article"
    :published-time="optional($guide->created_at)->toIso8601String()"
    :modified-time="optional($guide->updated_at)->toIso8601String()">
    <x-slot:jsonld>
        @php
            $clean = fn ($t) => strip_tags((string) preg_replace(['/\[\[[^\]]+\]\]/', '/\*\*/'], '', (string) $t));
            $jsonld = \App\Support\StructuredData::graph(
                array_merge(\App\Support\StructuredData::article(
                    $guide->title,
                    $guide->meta_description,
                    route('guides.show', $guide),
                    $guide->created_at,
                    $guide->updated_at,
                ), ['image' => asset('img/og-default.png')]),
                [
                    '@type' => 'HowTo',
                    'name' => $guide->title,
                    'description' => $guide->meta_description,
                    'inLanguage' => 'fr-FR',
                    'step' => collect($guide->steps)->values()->map(fn ($s, $i) => [
                        '@type' => 'HowToStep',
                        'position' => $i + 1,
                        'name' => $s['title'] ?? '',
                        'text' => $clean($s['body'] ?? ''),
                    ])->all(),
                ],
                \App\Support\StructuredData::breadcrumb([
                    'Guides pratiques' => route('guides.index'),
                    $guide->title => route('guides.show', $guide),
                ]),
                \App\Support\StructuredData::faq($guide->faq ?? []),
            );
        @endphp
        <x-jsonld :graph="$jsonld" />
    </x-slot:jsonld>

    <div class="mx-auto max-w-3xl 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>
            <a href="{{ route('guides.index') }}" class="link-blue">Guides</a> <span aria-hidden="true">›</span>
            <span class="text-ink">{{ $guide->title }}</span>
        </nav>

        <span class="tricolore-tick"></span>
        <h1 class="mt-3 font-sans text-3xl font-bold leading-tight text-title">{{ $guide->title }}</h1>
        @if ($guide->audience)
            <p class="mt-2 text-[12px] font-bold uppercase tracking-wide text-rep-blue">{{ $guide->audience }}</p>
        @endif
        <p class="mt-2 text-sm text-muted">
            Par <a href="{{ route('page.apropos') }}" class="link-blue">Alexandre Baumberger</a>, ancien juge au tribunal de commerce de Bordeaux (2018-2026) et juge-commissaire en procédures collectives
            · publié le {{ $guide->created_at?->translatedFormat('j F Y') }}
            @if ($guide->updated_at && ! $guide->updated_at->isSameDay($guide->created_at))
                · mis à jour le {{ $guide->updated_at->translatedFormat('j F Y') }}
            @endif
        </p>
        <p class="mt-4 text-lg leading-relaxed text-muted">{{ $renderer->html($guide->intro) }}</p>

        {{-- Étapes (HowTo) --}}
        <ol class="mt-10 space-y-8">
            @foreach ($guide->steps as $step)
                <li class="relative rounded-2xl border border-line bg-surface p-6">
                    <div class="flex items-start gap-4">
                        <span class="grid h-9 w-9 flex-none place-items-center rounded-full bg-primary font-sans text-lg font-bold text-white" aria-hidden="true">{{ $loop->iteration }}</span>
                        <div>
                            <h2 class="font-sans text-xl font-bold text-title">{{ $step['title'] ?? '' }}</h2>
                            <p class="mt-2 leading-relaxed text-ink">{{ $renderer->html($step['body'] ?? '') }}</p>
                        </div>
                    </div>
                </li>
            @endforeach
        </ol>

        {{-- Vigilance --}}
        @if ($guide->warning)
            <div class="mt-10 rounded-lg border border-line bg-surface p-5">
                <h2 class="flex items-center gap-2 font-sans text-lg font-bold text-rep-red">
                    <span class="grid h-7 w-7 place-items-center rounded-md bg-alert-urgence text-xs font-bold text-white" aria-hidden="true">!</span>
                    Point de vigilance
                </h2>
                <p class="mt-2 leading-relaxed text-ink">{{ $renderer->html($guide->warning) }}</p>
            </div>
        @endif

        {{-- CTA --}}
        @if (!empty($guide->ctas))
            <div class="mt-10 rounded-2xl border border-line bg-paper p-6">
                <h2 class="font-sans text-lg font-bold text-title">Et maintenant&nbsp;?</h2>
                <div class="mt-4 flex flex-wrap gap-3">
                    @foreach ($guide->ctas as $cta)
                        <a href="{{ $cta['href'] ?? '#' }}"
                           class="{{ !empty($cta['primary']) ? 'bg-rep-red text-white hover:opacity-90' : 'border border-line text-ink hover:border-rep-blue' }} rounded-md px-4 py-2.5 text-sm font-semibold no-underline">
                            {{ $cta['label'] ?? '' }}
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- FAQ --}}
        @if (!empty($guide->faq))
            <section class="mt-10">
                <h2 class="font-sans text-xl font-bold text-rep-red">Questions fréquentes</h2>
                <div class="mt-3 divide-y divide-line rounded-lg border border-line">
                    @foreach ($guide->faq as $qa)
                        <details class="group px-4 py-3">
                            <summary class="flex cursor-pointer items-center justify-between gap-3 font-semibold text-ink marker:content-none">
                                {{ $qa['q'] ?? '' }}
                                <span class="text-rep-blue transition group-open:rotate-45" aria-hidden="true">+</span>
                            </summary>
                            <p class="mt-2 text-[15px] leading-relaxed text-muted">{{ $renderer->html($qa['a'] ?? '') }}</p>
                        </details>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- Notions liées --}}
        @if (!empty($guide->related_terms))
            @php $related = \App\Domains\Reference\Models\GlossaryTerm::whereIn('slug', $guide->related_terms)->where('status', 'publie')->get(['term', 'slug']); @endphp
            @if ($related->isNotEmpty())
                <section class="mt-10">
                    <h2 class="font-sans text-xl font-bold text-rep-red">Pour aller plus loin</h2>
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach ($related as $rel)
                            <a href="{{ route('glossaire.show', $rel) }}" class="inline-flex items-center gap-1 rounded-full border border-line bg-paper px-3 py-1 text-sm text-ink no-underline hover:border-rep-blue hover:text-rep-blue">{{ $rel->term }} <span aria-hidden="true">→</span></a>
                        @endforeach
                    </div>
                </section>
            @endif
        @endif

        <div class="mt-12 border-t border-line pt-5 text-xs text-muted">
            Contenu informatif et pédagogique, adossé aux textes du Livre VI du Code de commerce (survolez les références pour lire le texte exact). Il ne remplace pas un conseil personnalisé.
        </div>

        <div class="mt-6"><x-error-report :context="'Guide : '.$guide->title" /></div>
    </div>
</x-layout>