@props([
    'faqs',
    'heading' => 'Frequently Asked Questions',
    'subheading' => null,
    'id' => 'faqAccordion',
])

{{--
    Shared FAQ accordion (PRD 6.8, 4.13, 4.18) — one component reused by the
    homepage, services page and contact page so the three never drift into
    different accordion behaviours or heading styles (PRD 3.31, UI consistency).

    Built on Bootstrap's own collapse component rather than hand-rolled JS: it
    already handles the ARIA wiring (aria-expanded, aria-controls, region
    semantics) that PRD 14.18's WCAG target requires, and Bootstrap is already
    in the bundle.

    The $id prop exists because two accordions can legitimately appear on one
    page (e.g. a service's own FAQ plus the global one); duplicate DOM ids
    would make the collapse targets ambiguous.
--}}
@if($faqs->isNotEmpty())
    <section class="section" {{ $attributes }}>
        <div class="container-site">
            <div class="text-center mb-5" data-reveal>
                <p class="section-eyebrow">FAQ</p>
                <h2 class="section-title mb-3" data-split-text>{{ $heading }}</h2>
                @if($subheading)
                    <p class="mx-auto mb-0" style="max-width: 640px; color: var(--color-paragraph);">{{ $subheading }}</p>
                @endif
            </div>

            <div class="accordion mx-auto" id="{{ $id }}" style="max-width: 820px;" data-reveal-group>
                @foreach($faqs as $faq)
                    @php $itemId = $id.'-item-'.$faq->id; @endphp
                    <div class="accordion-item mb-3" style="border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; background: var(--color-card-background, #fff);">
                        <h3 class="accordion-header" id="{{ $itemId }}-heading">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#{{ $itemId }}"
                                aria-expanded="false"
                                aria-controls="{{ $itemId }}"
                                style="font-weight: 600; color: var(--color-heading); background: transparent; box-shadow: none;"
                            >
                                {{ $faq->question }}
                            </button>
                        </h3>
                        <div
                            id="{{ $itemId }}"
                            class="accordion-collapse collapse"
                            aria-labelledby="{{ $itemId }}-heading"
                            data-bs-parent="#{{ $id }}"
                        >
                            <div class="accordion-body pt-0" style="color: var(--color-paragraph);">
                                {!! nl2br(e($faq->answer)) !!}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif