@php
    $faqs = $data['faqs'] ?? collect();
@endphp

<div class="site-section site-section--alt">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'الأسئلة الشائعة' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        @if($faqs->count())
            <div class="space-y-3" x-data="{ open: null }">
                @foreach($faqs as $faq)
                    <div class="faq-item reveal reveal--delay-{{ min($loop->index + 1, 4) }}"
                         :data-open="open === {{ $faq->id }} ? 'true' : 'false'">
                        <button @click="open = open === {{ $faq->id }} ? null : {{ $faq->id }}"
                                class="w-full flex items-center justify-between p-5 text-start">
                            <span class="text-gray-900 font-medium pe-4">{{ $faq->question }}</span>
                            <svg class="w-5 h-5 text-[var(--site-accent)] shrink-0 transition-transform duration-300"
                                 :class="open === {{ $faq->id }} ? 'rotate-180' : ''"
                                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div x-show="open === {{ $faq->id }}"
                             x-collapse
                             class="px-5 pb-5">
                            <p class="text-gray-600 leading-relaxed">{{ $faq->answer }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="space-y-3">
                @for($i = 0; $i < 3; $i++)
                    <div class="skeleton-card p-5 flex items-center justify-between">
                        <div class="skeleton-block h-5 w-2/3"></div>
                        <div class="skeleton-block h-5 w-5 !rounded-full"></div>
                    </div>
                @endfor
            </div>
            <div class="empty-state mt-4">
                <p class="text-sm">لم تُضف أسئلة شائعة بعد</p>
            </div>
        @endif
    </div>
</div>
