@props(['faqs'])

@if ($faqs->isEmpty())
    <x-site.empty message="Aucune question pour le moment." />
@else
    @foreach ($faqs->groupBy('category') as $category => $group)
        <div @class(['mt-16' => ! $loop->first])>
            @if (filled($category))
                <h3 class="kicker">{{ $category }}</h3>
            @endif

            {{-- Le chevron remplace le « + » : moins mécanique, plus proche d'un sommaire. --}}
            <div @class(['divide-y divide-line border-y border-line', 'mt-6' => filled($category)])>
                @foreach ($group as $faq)
                    <details class="group">
                        <summary class="flex cursor-pointer list-none items-baseline justify-between gap-6 py-6 text-left marker:hidden">
                            <span class="font-display text-lg text-ink">{{ $faq->question }}</span>

                            <svg class="mt-1 size-4 shrink-0 text-ink-subtle transition-transform duration-300 group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                                <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </summary>

                        <div class="prose-site pb-8 text-[0.9375rem]">
                            {!! $faq->answer !!}
                        </div>
                    </details>
                @endforeach
            </div>
        </div>
    @endforeach
@endif