@php $isEn = app()->getLocale() == 'en'; @endphp

<div class="space-y-3" id="faq-container">
    @forelse ($faqs as $faq)
        <details class="faq-item group bg-white border border-gray-200 rounded-xl transition-shadow duration-300"
            @if ($loop->first) open @endif>
            <summary
                class="flex items-center justify-between gap-4 cursor-pointer p-4 md:p-5 rounded-xl font-semibold text-gray-900 text-base md:text-lg hover:text-primary focus-visible:outline-2 focus-visible:outline-primary">
                <span>{{ $isEn ? $faq->question_en : $faq->question_np ?? $faq->question_en }}</span>

                <span
                    class="faq-icon shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center"
                    aria-hidden="true">
                    <i class="fa-solid fa-plus text-sm"></i>
                </span>
            </summary>

            <div class="faq-answer px-4 md:px-5 pb-5 text-gray-700 leading-7 text-[0.95rem] md:text-base">
                {!! $isEn ? $faq->answer_en : $faq->answer_np ?? $faq->answer_en !!}
            </div>
        </details>
    @empty
        <div class="text-center text-gray-600 py-12">
            <i class="fa-regular fa-circle-question text-4xl text-gray-300 mb-3" aria-hidden="true"></i>
            <p>{{ $isEn ? 'No FAQs available for this category.' : 'यस श्रेणीमा कुनै प्रश्न उपलब्ध छैन।' }}</p>
        </div>
    @endforelse
</div>