@php
    $faqShow = App\Models\HomepageSetting::get('faq_show', true);
    $faqLabel = App\Models\HomepageSetting::get('faq_label', 'FAQ');
    $faqHeading = App\Models\HomepageSetting::get('faq_heading', 'Questions? We Have Answers.');
    $faqContactShow = App\Models\HomepageSetting::get('faq_contact_show', true);
    $faqContactLabel = App\Models\HomepageSetting::get('faq_contact_label', 'Have more questions? Contact Us →');
    $faqContactUrl = App\Models\HomepageSetting::get('faq_contact_url', '/contact');
    $faqItems = App\Models\HomepageSetting::get('faq_items_json', []);
    $faqDefaultOpen = App\Models\HomepageSetting::get('faq_default_open', 'None');
    $faqAnimationSpeed = App\Models\HomepageSetting::get('faq_animation_speed', 'Medium');
@endphp

@if($faqShow)
<div id="section-faq" class="py-24 bg-slate-50/50 relative {{ isset($activeEditingSection) && $activeEditingSection === 'faq' ? 'ring-4 ring-amber-500' : '' }}">
    @if(isset($activeEditingSection) && $activeEditingSection === 'faq')
        <div class="absolute top-4 left-4 z-50 bg-amber-500 text-white font-bold text-xs uppercase px-3 py-1 rounded-full shadow-lg">Editing: FAQ</div>
    @endif
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16 space-y-4">
            <span class="inline-block text-xs font-semibold text-accent uppercase tracking-widest" style="color: var(--accent);">{{ $faqLabel }}</span>
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                {{ $faqHeading }}
            </h2>
        </div>

        @php
            $visibleFaqs = collect($faqItems)->filter(fn($item) => $item['visible'] ?? true);
        @endphp

        <!-- Accordion FAQ list -->
        <div class="space-y-4" x-data="{ activeIndex: {{ $faqDefaultOpen === 'First' ? 0 : 'null' }} }">
            @foreach($visibleFaqs as $index => $faq)
                <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden transition-all duration-300">
                    <button 
                        type="button"
                        @click="activeIndex = (activeIndex === {{ $index }} ? null : {{ $index }})" 
                        class="w-full flex items-center justify-between p-6 text-left focus:outline-none"
                    >
                        <span class="text-sm font-bold text-slate-800">{{ $faq['question'] ?? '' }}</span>
                        <span class="ml-4 flex-shrink-0 text-accent font-extrabold text-lg transition-transform duration-200" :class="activeIndex === {{ $index }} ? 'rotate-45' : ''" style="color: var(--accent);">
                            +
                        </span>
                    </button>
                    
                    <div 
                        x-show="activeIndex === {{ $index }}" 
                        x-collapse
                        class="border-t border-slate-50 bg-slate-50/30 p-6 text-xs font-light text-slate-500 leading-relaxed"
                    >
                        {{ $faq['answer'] ?? '' }}
                    </div>
                </div>
            @endforeach
        </div>

        @if($faqContactShow)
            <div class="text-center mt-12">
                <a href="{{ $faqContactUrl }}" class="inline-flex items-center text-sm font-bold text-accent hover:text-accent/80 transition-colors uppercase tracking-wider" style="color: var(--accent);">
                    {{ $faqContactLabel }}
                </a>
            </div>
        @endif
    </div>
</div>
@endif