@extends('layouts.app')

@section('content')
<section class="py-16 md:py-24 bg-[#1a1614]">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-4xl font-light text-white mb-12">{{ __('faq') }}</h1>

        @php
            $grouped = $faqs->groupBy(fn($faq) => $faq->category ?: __('general'));
        @endphp

        @foreach($grouped as $category => $items)
            <div class="mb-10">
                @if($category)
                    <h2 class="text-xl text-[#c77d4a] mb-4">{{ $category }}</h2>
                @endif
                <div class="space-y-3">
                    @foreach($items as $faq)
                        <details class="group bg-[#231e1b] rounded-lg open:bg-[#2a2522] transition">
                            <summary class="flex justify-between items-center cursor-pointer p-5 text-white font-medium list-none">
                                {{ $faq->question }}
                                <span class="ml-4 text-white/40 group-open:rotate-180 transition">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                                    </svg>
                                </span>
                            </summary>
                            <div class="px-5 pb-5 text-white/70 leading-relaxed">
                                {!! nl2br(e($faq->answer)) !!}
                            </div>
                        </details>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</section>
@endsection