@extends('layouts.guest')

@section('title', $seo['title'])

@section('content')
<div class="max-w-3xl mx-auto py-12">
    <h1 class="text-3xl font-bold text-center mb-4">{{ __('Frequently Asked Questions') }}</h1>
    <p class="text-center text-gray-500 mb-12">{{ __('Everything you need to know about our services') }}</p>

    @foreach($faqs as $category => $questions)
        <h2 class="text-xl font-bold mt-10 mb-4 first:mt-0">{{ $category }}</h2>
        <div class="space-y-3">
            @foreach($questions as $faq)
                <details class="group bg-white rounded-xl border border-gray-200 p-4">
                    <summary class="flex items-center justify-between cursor-pointer font-medium text-sm">
                        {{ $faq->question }}
                        <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition" 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>
                    </summary>
                    <p class="mt-3 text-sm text-gray-600 whitespace-pre-line">{{ $faq->answer }}</p>
                </details>
            @endforeach
        </div>
    @endforeach

    @if($faqs->isEmpty())
        <p class="text-center text-gray-500">{{ __('No FAQs available yet.') }}</p>
    @endif
</div>
@endsection