@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'Frequently Asked Questions';
$items = $settings['items'] ?? [
    ['question' => 'How do I download my digital assets?', 'answer' => 'You can download them immediately from your dashboard under the "Purchases" tab. A secondary set of links is also sent to your registered email.'],
    ['question' => 'What is your elite license policy?', 'answer' => 'All theme assets include a standard multi-project license. For commercial resale or redistribution, please contact our Enterprise Licensing team.'],
    ['question' => 'Can I request custom modifications?', 'answer' => 'Yes, our Platinum support tier allows for direct architect requests for specific modifications or integrations.'],
];

$titleAlignment = $settings['title_alignment'] ?? 'center';
@endphp

<section class="py-12 md:py-16 bg-[#050816] relative overflow-hidden mb-0!" id="section-{{ $section->id }}">
    {{-- Subtle background atmosphere --}}
    <div class="absolute left-[-10%] top-[-10%] w-[40%] h-[40%] bg-brand-500/5 blur-[150px] rounded-full pointer-events-none opacity-30"></div>
    <div class="absolute right-[-10%] bottom-[-10%] w-[30%] h-[30%] bg-brand-600/5 blur-[120px] rounded-full pointer-events-none opacity-20"></div>

    <div class="max-w-4xl mx-auto px-6 relative z-10">
        {{-- Section Header --}}
        <div class="text-center max-w-2xl mx-auto mb-10 md:mb-12">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/05 border border-white/10 text-brand-400 text-[9px] font-black tracking-[0.25em] uppercase mb-4">
                <span class="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse"></span>
                Support Center
            </div>
            <h2 class="text-3xl md:text-5xl font-display font-black text-white tracking-tighter leading-tight mb-4">
                {{ $title }}
            </h2>
            <div class="w-12 h-1 bg-gradient-to-r from-transparent via-brand-500/40 to-transparent mx-auto"></div>
        </div>

        {{-- FAQ Items --}}
        <div class="space-y-4" x-data="{ active: null }">
            @foreach($items as $index => $item)
                <div class="reveal-item anim-fade-in-up bg-white/[0.015] border border-white/05 rounded-3xl overflow-hidden transition-all duration-500 hover:bg-white/[0.035] hover:border-white/10"
                    :class="{ 'bg-white/[0.04] border-brand-500/20 shadow-2xl' : active === {{ $index }} }" 
                    style="--anim-duration: 0.6s; --anim-delay: {{ $index * 0.08 }}s;">
                    
                    <button @click="active = active === {{ $index }} ? null : {{ $index }}" 
                        class="w-full text-left px-7 py-6 md:px-8 md:py-7 flex items-center justify-between group outline-none">
                        <span class="text-lg md:text-xl font-bold text-white/90 group-hover:text-white transition-colors tracking-tight">
                            {{ $item['question'] }}
                        </span>
                        <div class="shrink-0 ml-4 w-10 h-10 rounded-xl bg-white/05 border border-white/05 flex items-center justify-center text-white/20 group-hover:text-brand-500 group-hover:border-brand-500/20 transition-all duration-500"
                             :class="{ 'rotate-180 bg-brand-500/10 text-brand-500 border-brand-500/20' : active === {{ $index }} }">
                            <i data-lucide="chevron-down" class="w-5 h-5 stroke-[2.5]"></i>
                        </div>
                    </button>
                    
                    <div x-show="active === {{ $index }}" 
                         x-collapse
                         class="px-7 pb-8 md:px-8 md:pb-10">
                        <div class="h-px w-10 bg-brand-500/30 mb-6"></div>
                        <p class="text-base md:text-lg text-white/40 font-medium leading-relaxed max-w-3xl">
                            {{ $item['answer'] }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Optional Footer --}}
        <div class="mt-12 text-center reveal-item anim-fade-in" style="--anim-delay: 0.4s;">
            <p class="text-[11px] font-black text-white/20 uppercase tracking-[0.2em] mb-4">Still have questions?</p>
            <a href="/contact" class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-white/05 border border-white/10 text-white text-[10px] font-black uppercase tracking-widest hover:bg-white/10 hover:border-white/20 transition-all">
                <i data-lucide="message-square" class="w-3.5 h-3.5"></i>
                Contact Support
            </a>
        </div>
    </div>
</section>