@extends('layouts.public')

@section('title', 'प्रायः पूछे जाने वाले प्रश्न (FAQs) | Vishwas Bank')

@section('content')
<div class="bg-navy text-white py-14 border-b-2 border-gold relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <span class="text-xs uppercase tracking-widest text-gold font-bold">समाधान एवं स्पष्टीकरण</span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading mt-2">प्रायः पूछे जाने वाले प्रश्न (FAQs)</h1>
        <p class="text-gray-300 text-sm sm:text-base mt-2 max-w-2xl">
            विश्वास बैंक की सेवाओं, ब्याज दरों, तीर्थयात्रा नियमों और समाज कल्याण योजनाओं से जुड़े सभी सामान्य प्रश्नों के उत्तर।
        </p>
    </div>
</div>

<div class="py-16 bg-[#FAF7F2]">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
        
        <!-- Category Filter Pills -->
        <div class="flex flex-wrap gap-2 justify-center">
            <a href="{{ route('faq') }}" class="px-4 py-2 rounded-xl text-xs font-bold {{ !$category ? 'bg-navy text-white shadow' : 'bg-white text-gray-700 hover:bg-gold/10 border border-gray-200' }}">सभी प्रश्न</a>
            <a href="{{ route('faq', ['category' => 'banking']) }}" class="px-4 py-2 rounded-xl text-xs font-bold {{ $category === 'banking' ? 'bg-navy text-white shadow' : 'bg-white text-gray-700 hover:bg-gold/10 border border-gray-200' }}">बैंकिंग व खाता</a>
            <a href="{{ route('faq', ['category' => 'loans']) }}" class="px-4 py-2 rounded-xl text-xs font-bold {{ $category === 'loans' ? 'bg-navy text-white shadow' : 'bg-white text-gray-700 hover:bg-gold/10 border border-gray-200' }}">ऋण योजनाएं</a>
            <a href="{{ route('faq', ['category' => 'deposits']) }}" class="px-4 py-2 rounded-xl text-xs font-bold {{ $category === 'deposits' ? 'bg-navy text-white shadow' : 'bg-white text-gray-700 hover:bg-gold/10 border border-gray-200' }}">सावधि/आवर्ती जमा</a>
            <a href="{{ route('faq', ['category' => 'teerth_yatra']) }}" class="px-4 py-2 rounded-xl text-xs font-bold {{ $category === 'teerth_yatra' ? 'bg-navy text-white shadow' : 'bg-white text-gray-700 hover:bg-gold/10 border border-gray-200' }}">निःशुल्क तीर्थयात्रा</a>
            <a href="{{ route('faq', ['category' => 'ambulance']) }}" class="px-4 py-2 rounded-xl text-xs font-bold {{ $category === 'ambulance' ? 'bg-navy text-white shadow' : 'bg-white text-gray-700 hover:bg-gold/10 border border-gray-200' }}">एम्बुलेंस सेवा</a>
        </div>

        <!-- FAQ Accordion -->
        <div class="space-y-4" x-data="{ active: null }">
            @forelse($faqs as $f)
            <div class="bg-white rounded-2xl border border-gold/30 shadow-sm overflow-hidden">
                <button @click="active = (active === {{ $f->id }} ? null : {{ $f->id }})" class="w-full p-5 text-left font-bold text-navy flex justify-between items-center text-sm sm:text-base hover:bg-gold/5 transition">
                    <span>{{ $f->question }}</span>
                    <i class="fa-solid text-gold" :class="active === {{ $f->id }} ? 'fa-minus' : 'fa-plus'"></i>
                </button>
                <div x-show="active === {{ $f->id }}" x-cloak class="p-5 pt-0 text-xs sm:text-sm text-gray-600 leading-relaxed border-t border-gray-100">
                    {{ $f->answer }}
                </div>
            </div>
            @empty
            <div class="text-center py-12 bg-white rounded-2xl border border-gray-200">
                <p class="text-sm text-gray-500">इस श्रेणी में कोई प्रश्न उपलब्ध नहीं है।</p>
            </div>
            @endforelse
        </div>

    </div>
</div>
@endsection