@php
$settings = \App\Models\SiteSetting::first();
@endphp

<!-- FAQ Accordion Section -->
<section class="py-20 bg-white">
    <div class="container mx-auto px-4 lg:px-8">
        <div class="max-w-4xl mx-auto">

            <!-- Section Header -->
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="inline-block px-4 py-2 bg-primary-100 text-primary-600 text-sm font-semibold rounded-full mb-4">
                    <i class="fas fa-question-circle mr-2"></i>FAQs
                </span>
                <h2 class="text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">
                    Frequently Asked <span class="text-[#027fc5]">Questions</span>
                </h2>
                <p class="text-lg text-gray-600">
                    Everything you need to know before starting your international caregiving journey
                </p>
            </div>

            <!-- FAQ Accordion using Alpine.js -->
            <div class="space-y-4" x-data="{ activeItem: 0 }">
                @forelse(($faqs ?? collect()) as $i => $faq)
                <div class="rounded-2xl border border-gray-200 overflow-hidden transition-all duration-300"
                     :class="activeItem === {{ $i }} ? 'border-primary-300 shadow-md' : 'hover:border-primary-200'"
                     data-aos="fade-up" data-aos-delay="{{ min($i * 50, 300) }}">

                    <!-- Question Button -->
                    <button @click="activeItem = activeItem === {{ $i }} ? null : {{ $i }}"
                            class="w-full flex items-center justify-between px-6 py-5 text-left transition-colors duration-200"
                            :class="activeItem === {{ $i }} ? 'bg-primary-50' : 'bg-white hover:bg-gray-50'"
                            :aria-expanded="activeItem === {{ $i }}">

                        <span class="flex items-start space-x-4">
                            <!-- Number badge -->
                            <span class="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold transition-all duration-200"
                                  :class="activeItem === {{ $i }} ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-500'">
                                {{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}
                            </span>
                            <span class="font-semibold text-gray-900 text-base leading-snug"
                                  :class="activeItem === {{ $i }} ? 'text-primary-700' : ''">
                                {{ $faq->question }}
                            </span>
                        </span>

                        <!-- Chevron icon -->
                        <span class="flex-shrink-0 ml-4 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300"
                              :class="activeItem === {{ $i }} ? 'bg-primary-600 text-white rotate-180' : 'bg-gray-100 text-gray-500'">
                            <i class="fas fa-chevron-down text-xs transition-transform duration-300"></i>
                        </span>
                    </button>

                    <!-- Answer -->
                    <div x-show="activeItem === {{ $i }}"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform -translate-y-2"
                         x-transition:enter-end="opacity-100 transform translate-y-0"
                         x-transition:leave="transition ease-in duration-200"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         class="px-6 pb-6 bg-primary-50 border-t border-primary-100">
                        <div class="flex space-x-4 pt-4">
                            <div class="flex-shrink-0 w-8 flex justify-center">
                                <div class="w-0.5 bg-primary-300 rounded-full"></div>
                            </div>
                            <p class="text-gray-600 leading-relaxed text-sm lg:text-base">
                                {{ $faq->answer }}
                            </p>
                        </div>
                    </div>
                </div>
                @empty
                <div class="rounded-2xl border border-dashed border-gray-300 bg-gray-50 p-10 text-center">
                    <i class="fas fa-question-circle text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-600 font-semibold">FAQs will appear here soon.</p>
                </div>
                @endforelse
            </div>

            <!-- Still have questions CTA -->
            <div class="mt-12 text-center bg-blue-50 rounded-3xl p-8 border border-primary-100" data-aos="fade-up">
                <i class="fas fa-headset text-primary-500 text-4xl mb-4"></i>
                <h3 class="text-2xl font-extrabold text-gray-900 mb-2">Still Have Questions?</h3>
                <p class="text-gray-600 mb-6">Our advisors are available 6 days a week to answer any questions about your caregiving career.</p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="tel:{{ $settings->phone }}" class="inline-flex items-center space-x-2 px-6 py-3 bg-white border-2 border-teal-500 text-teal-600 rounded-full font-semibold hover:bg-teal-500 hover:text-white transition-all duration-300 shadow-sm">
                        <i class="fas fa-phone-alt"></i>
                        <span>Call Us Now</span>
                    </a>
                    <a href="{{ route('contact') }}" class="inline-flex items-center space-x-2 px-6 py-3 bg-[#027fc5] text-white rounded-full font-semibold hover:opacity-90 transition-all duration-300 shadow-lg">
                        <i class="fas fa-comments"></i>
                        <span>Book Free Counseling</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>