FAQ

@props([
    'heading' => 'Frequently asked questions',
    'subheading' => 'Pick a topic to see the questions that matter most. Still stuck? Our team is one message away.',
    'categories' => null,
])

@php
    $categories ??= [
        [
            'label' => 'Billing',
            'items' => [
                ['question' => 'Is there a free tier?', 'answer' => 'The open core is free and MIT licensed. Pro items require a license and unlock additional blocks and admin tooling.'],
                ['question' => 'How does billing work?', 'answer' => 'Plans are billed monthly or annually. You can upgrade, downgrade, or cancel at any time from your account settings.'],
                ['question' => 'Which payment methods do you accept?', 'answer' => 'We accept all major cards and regional payment methods through our checkout. Invoices are issued automatically for every charge.'],
            ],
        ],
        [
            'label' => 'Shipping',
            'items' => [
                ['question' => 'How long does delivery take?', 'answer' => 'Standard delivery arrives within three to five business days. Express options are available at checkout for next-day arrival.'],
                ['question' => 'Do you ship internationally?', 'answer' => 'Yes. We ship to most countries, with duties and taxes calculated at checkout so there are no surprises on arrival.'],
            ],
        ],
        [
            'label' => 'Returns',
            'items' => [
                ['question' => 'What is your return window?', 'answer' => 'You can return any unused item within thirty days of delivery for a full refund to your original payment method.'],
                ['question' => 'How do I start a return?', 'answer' => 'Open your order history, choose the item, and request a return label. Drop the package at any carrier location.'],
                ['question' => 'When will I be refunded?', 'answer' => 'Refunds are processed within five business days of us receiving the returned item and clear back to your account shortly after.'],
            ],
        ],
        [
            'label' => 'Account',
            'items' => [
                ['question' => 'How do I reset my password?', 'answer' => 'Use the reset link on the sign-in screen. We will email you a secure, single-use link to choose a new password.'],
                ['question' => 'Can I change my email address?', 'answer' => 'Yes. Update your email under account settings and confirm the change from the verification message we send you.'],
            ],
        ],
    ];
@endphp

<x-ui.section
    data-slot="faq-07"
    space="xl" {{ $attributes }}
>
    <div class="mx-auto max-w-3xl px-4">
        <div class="text-center">
            <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mx-auto mt-4 max-w-2xl text-pretty text-lg text-muted-foreground">{{ __($subheading) }}</p>
        </div>

        <x-ui.tabs default="faq-tabs-01-0" variant="pills" marker="filled" class="mt-12 sm:mt-16">
            <x-ui.tabs.list class="mx-auto flex-wrap justify-center" aria-label="{{ __('FAQ categories') }}">
                @foreach ($categories as $c => $category)
                    <x-ui.tabs.trigger :value="'faq-tabs-01-'.$c">
                        {{ __($category['label']) }}
                        <x-ui.badge variant="secondary" class="ms-2">{{ count($category['items']) }}</x-ui.badge>
                    </x-ui.tabs.trigger>
                @endforeach
            </x-ui.tabs.list>

            @foreach ($categories as $c => $category)
                <x-ui.tabs.content :value="'faq-tabs-01-'.$c" class="mt-8">
                    <x-ui.accordion>
                        @foreach ($category['items'] as $i => $item)
                            <x-ui.accordion.item :value="'faq-'.$c.'-'.$i">
                                <x-ui.accordion.trigger class="text-start">{{ __($item['question']) }}</x-ui.accordion.trigger>
                                <x-ui.accordion.content>{{ __($item['answer']) }}</x-ui.accordion.content>
                            </x-ui.accordion.item>
                        @endforeach
                    </x-ui.accordion>
                </x-ui.tabs.content>
            @endforeach
        </x-ui.tabs>
    </div>
</x-ui.section>