@props(['settings'])

@if($settings['faq_enabled'] ?? true)
<section class="py-12 relative overflow-hidden">
    <div class="max-w-4xl mx-auto px-6 relative z-10">
        <div class="text-center mb-16 space-y-4">
            <h2 class="text-4xl lg:text-5xl font-black text-text-base dark:text-white font-bricolage tracking-tight leading-tight">
                {{ $settings['faq_title'] ?? 'Frequently Asked Questions' }}
            </h2>
            <p class="text-text-dim font-medium text-lg leading-relaxed">
                {{ $settings['faq_subtitle'] ?? 'Everything you need to know about our partner program.' }}
            </p>
        </div>

        <div class="space-y-6" x-data="{ active: null }">
            @php
            $defaultFaqs = [
            ['question' => 'How much can I earn?', 'answer' => 'There are no earning caps. You earn a percentage of
            every sale made through your referral link. The more you refer, the more you earn.'],
            ['question' => 'When do I get paid?', 'answer' => 'Payouts are processed monthly once you reach the minimum
            payout threshold ($50). We support PayPal, Wire, and Crypto.'],
            ['question' => 'How long do cookies last?', 'answer' => 'Our referral cookies last for 90 days. If a user
            clicks your link and buys anything within 90 days, you get the commission.'],
            ['question' => 'Do I need a website?', 'answer' => 'Not necessarily. You can promote via social media, email
            newsletters, or even offline, as long as your promotion methods follow our terms.'],
            ];
            $faqs = !empty($settings['faqs']) ? $settings['faqs'] : $defaultFaqs;
            @endphp

            @foreach ($faqs as $index => $faq)
            <div class="bg-neutral-900/40 border border-border-subtle rounded-[2rem] overflow-hidden transition-all duration-500 backdrop-blur-xl"
                :class="active === {{ $index }} ? 'border-indigo-500/40 bg-neutral-900/80 shadow-3xl shadow-indigo-500/10' : 'hover:border-border-subtle hover:bg-neutral-900/60'">
                <button @click="active = (active === {{ $index }} ? null : {{ $index }})"
                    class="w-full px-10 py-8 text-left flex items-center justify-between group">
                    <span
                        class="text-xl font-black text-text-base dark:text-white group-hover:text-indigo-400 transition-colors tracking-tight">{
                        { $faq['question'] }}</span>
                    <div class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center transition-all duration-500 group-hover:bg-indigo-600/20"
                        :class="active === {{ $index }} ? 'rotate-180 bg-indigo-600' : ''">
                        <svg class="w-5 h-5 text-text-dim transition-all duration-500"
                            :class="active === {{ $index }} ? 'text-white' : 'group-hover:text-indigo-400'" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </button>
                <div x-show="active === {{ $index }}" x-collapse>
                    <div
                        class="px-10 pb-10 text-text-dim leading-relaxed font-medium text-lg border-t border-border-subtle pt-6">
                        {{ $faq['answer'] }}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif