<x-public-layout>
    <div class="min-h-screen bg-gray-50 py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                {{-- Header --}}
                <div class="text-center mb-12">
                    <div class="flex justify-center mb-4">
                        <div class="p-4 bg-blue-100 rounded-full">
                            {{-- Help Circle --}}
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-blue-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                            </svg>
                        </div>
                    </div>
                    <h1 class="text-4xl font-bold text-gray-900 mb-4">الأسئلة الشائعة</h1>
                    <p class="text-xl text-gray-600">
                        الإجابة على الأسئلة الأكثر شيوعاً حول خدماتنا ومنتجاتنا
                    </p>
                </div>

                <div class="space-y-8">
                    @forelse($faqs as $category => $categoryFaqs)
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6 border-b border-gray-100 bg-gray-50/50">
                            <h2 class="flex items-center gap-3 text-xl font-bold text-gray-900">
                                @switch($category)
                                    @case('Vehicles') <x-icon name="Car" class="h-6 w-6 text-blue-600" /> @break
                                    @case('Maintenance') <x-icon name="Wrench" class="h-6 w-6 text-blue-600" /> @break
                                    @case('Finance') <x-icon name="CreditCard" class="h-6 w-6 text-blue-600" /> @break
                                    @case('Procedures') 
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-blue-600">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                        </svg> 
                                        @break
                                    @default <x-icon name="HelpCircle" class="h-6 w-6 text-blue-600" />
                                @endswitch
                                {{ $category == 'Vehicles' ? 'عن السيارات' : ($category == 'Maintenance' ? 'الضمان والصيانة' : ($category == 'Finance' ? 'التمويل والدفع' : ($category == 'Procedures' ? 'الإجراءات والتوثيق' : $category))) }}
                            </h2>
                        </div>
                        <div class="p-6 space-y-6">
                            @foreach($categoryFaqs as $faq)
                                <div class="border-b border-gray-100 pb-4 last:border-0 last:pb-0">
                                    <h3 class="font-semibold text-gray-900 mb-2">{{ $faq->question }}</h3>
                                    <p class="text-gray-600 leading-relaxed">{{ $faq->answer }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    @empty
                    <div class="text-center text-gray-500 py-12">
                        لا توجد أسئلة شائعة حالياً.
                    </div>
                    @endforelse
                </div>

                {{-- Contact CTA --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8 mt-12 text-center">
                    <div class="flex justify-center mb-4">
                        {{-- Phone icon --}}
                        <div class="p-3 bg-blue-50 rounded-full">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-blue-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                            </svg>
                        </div>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">هل لم تجد إجابة سؤالك؟</h2>
                    <p class="text-gray-600 mb-6 max-w-lg mx-auto">
                        إذا لم تجد إجابة لسؤالك هنا، فلا تتردد في التواصل معنا مباشرة وسيسعد فريقنا بمساعدتك.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="tel:{{ $contactInfo->primary_phone }}" class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold shadow-sm hover:shadow-md">
                            اتصل بنا
                        </a>
                        <a href="{{ route('contact') }}" class="bg-white border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors font-semibold">
                            أرسل استفسار
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-public-layout>
