@extends('layouts.app')
@section('title', 'FAQ')

@section('content')
<section class="bg-gradient-to-br from-brand-600 to-brand-800 text-white">
    <div class="max-w-4xl mx-auto px-4 py-14 text-center">
        <h1 class="text-3xl lg:text-4xl font-extrabold">Pusat Bantuan</h1>
        <p class="text-brand-100 mt-2">Pertanyaan yang sering diajukan seputar {{ $brandName }}.</p>
    </div>
</section>

<div class="max-w-3xl mx-auto px-4 py-10" x-data="{ open: null }">
    @forelse ($faqs as $group => $items)
        <h2 class="text-lg font-extrabold mt-8 mb-3">{{ \App\Models\Setting::brandify($group) }}</h2>
        <div class="space-y-3">
            @foreach ($items as $idx => $qa)
                @php
                    $key = $loop->parent->index . '-' . $idx;
                    $question = \App\Models\Setting::brandify(is_array($qa) ? $qa[0] : $qa->question);
                    $answer = \App\Models\Setting::brandify(is_array($qa) ? $qa[1] : $qa->answer);
                @endphp
                <div class="bg-white border border-slate-100 rounded-2xl overflow-hidden">
                    <button type="button" @click="open = open === '{{ $key }}' ? null : '{{ $key }}'" class="w-full flex items-center justify-between px-5 py-4 text-left font-semibold hover:bg-slate-50">
                        <span>{{ $question }}</span>
                        <svg class="w-5 h-5 text-slate-400 transition-transform shrink-0 ml-3" :class="open === '{{ $key }}' ? 'rotate-180' : ''" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div x-show="open === '{{ $key }}'" x-collapse x-cloak class="px-5 pb-4 text-sm text-slate-600 leading-relaxed whitespace-pre-line">{{ $answer }}</div>
                </div>
            @endforeach
        </div>
    @empty
        <p class="text-center text-slate-400 py-12">Belum ada FAQ.</p>
    @endforelse

    <div class="mt-10 bg-brand-50 rounded-2xl p-6 text-center">
        <p class="font-semibold">Masih butuh bantuan?</p>
        <a href="{{ route('page.contact') }}" class="inline-block mt-3 bg-brand-600 text-white px-5 py-2.5 rounded-full text-sm font-semibold">Hubungi CS</a>
    </div>
</div>
@push('scripts')<script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" defer></script>@endpush
@endsection