@extends('layouts.public')

@section('public-content')
<section class="mx-auto max-w-3xl px-4 py-12 sm:px-6 lg:px-8">
    <h1 class="font-display text-3xl font-bold text-gray-900 mb-8">Frequently Asked Questions</h1>

    @if($faqs->count())
        <div class="space-y-3">
            @foreach($faqs as $faq)
                <details class="group rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5">
                    <summary class="flex cursor-pointer items-center justify-between p-5 text-sm font-medium text-gray-900 select-none">
                        <span class="pr-4">{{ $faq->question }}</span>
                        <svg class="h-5 w-5 shrink-0 text-gray-500 group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </summary>
                    <div class="px-5 pb-5 text-sm text-gray-600 leading-relaxed">{{ $faq->answer }}</div>
                </details>
            @endforeach
        </div>
    @else
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center">
            <p class="text-gray-500">No FAQs available yet.</p>
        </div>
    @endif
</section>
@endsection