@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Frequently Asked Logic';
    $subtitle = $settings['subtitle'] ?? 'Immediate answers to common protocol queries.';
    
    $faqs = [
        ['q' => 'How do I download my assets?', 'a' => 'Once your transmission (payment) is verified, all assets are instantly available in your dashboard under the Downloads node.'],
        ['q' => 'Are lifetime updates included?', 'a' => 'Yes, all premium protocols in our matrix come with lifetime updates and full architectural support.'],
        ['q' => 'What is the refund protocol?', 'a' => 'Given the digital nature of our assets, we only offer refunds for technical malfunctions that our support architects cannot resolve within 48 hours.'],
        ['q' => 'Can I use assets for client work?', 'a' => 'Absolutely. The standard license allows use in unlimited client projects, provided the central source protocol is not redistributed.'],
    ];
@endphp

<section class="py-24 bg-[#0a0a0f] border-t border-white/5">
    <div class="container mx-auto px-6">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-16 space-y-4">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-brand-500/10 border border-brand-500/20 rounded-full">
                    <i data-lucide="help-circle" class="w-3.5 h-3.5 text-brand-400"></i>
                    <span class="text-[9px] font-black text-brand-400 uppercase tracking-[0.2em]">Logic Support</span>
                </div>
                <h2 class="text-3xl md:text-5xl font-black text-white uppercase tracking-tight">{{ $title }}</h2>
                <p class="text-slate-500 font-medium leading-relaxed">{{ $subtitle }}</p>
            </div>

            <div class="space-y-4" x-data="{ active: null }">
                @foreach($faqs as $i => $faq)
                    <div class="rounded-[2rem] bg-[#111827] border border-white/5 overflow-hidden transition-all duration-300"
                         :class="active === {{ $i }} ? 'border-brand-500/30 shadow-[0_20px_40px_-15px_rgba(124,58,237,0.1)]' : ''">
                        <button @click="active = active === {{ $i }} ? null : {{ $i }}" 
                                class="w-full p-8 flex items-center justify-between text-left group">
                            <span class="text-lg font-black text-white group-hover:text-brand-400 transition-colors uppercase tracking-tight">{{ $faq['q'] }}</span>
                            <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center transition-all"
                                 :class="active === {{ $i }} ? 'rotate-180 bg-brand-500 text-white' : 'text-slate-500 grupo-hover:text-white'">
                                <i data-lucide="chevron-down" class="w-5 h-5"></i>
                            </div>
                        </button>
                        <div x-show="active === {{ $i }}" x-collapse x-cloak>
                            <div class="p-8 pt-0 text-slate-400 font-medium leading-relaxed border-t border-white/5">
                                {{ $faq['a'] }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>