{{--
    @intent Bloco `faq`: perguntas frequentes com resposta em AST (ADR-028).
    @description `<details>/<summary>` nativos: abre e fecha **sem JavaScript** e o leitor de tela
                 anuncia o estado. A pergunta é o rótulo do `<summary>` (sem heading extra).
--}}
@use('Services\RichText\Contracts\RichTextRenderer')

@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $renderer = app(RichTextRenderer::class);
    $title = is_string($props['title'] ?? null) ? $props['title'] : null;
    $items = [];

    foreach (is_array($props['items'] ?? null) ? $props['items'] : [] as $item) {
        if (! is_array($item) || ! is_string($item['question'] ?? null) || ! is_array($item['answer'] ?? null)) {
            continue;
        }

        $items[] = [
            'question' => $item['question'],
            'answer' => $renderer->toHtml($item['answer']),
        ];
    }

    $headingId = is_string($blockId) && $blockId !== ''
        ? preg_replace('/[^a-z0-9-]/', '', strtolower($blockId)).'-title'
        : null;
@endphp

@if ($title !== null && $items !== [])
    <section
        @if ($headingId !== null) aria-labelledby="{{ $headingId }}" @else aria-label="{{ $title }}" @endif
        class="flex flex-col gap-4"
    >
        <h2 id="{{ $headingId }}" class="text-2xl font-bold tracking-tight text-civic-ink">{{ $title }}</h2>

        <div class="flex flex-col gap-3">
            @foreach ($items as $item)
                <details class="rounded-2xl border-2 border-civic-border bg-civic-surface p-5">
                    <summary class="cursor-pointer font-bold text-civic-ink">{{ $item['question'] }}</summary>

                    @if ($item['answer'] !== '')
                        <div class="prose mt-3 text-civic-outline">
                            {!! $item['answer'] !!}
                        </div>
                    @endif
                </details>
            @endforeach
        </div>
    </section>
@endif