FAQ

@props([
    'heading'    => 'Frequently asked questions',
    'subheading' => 'Can\'t find the answer you\'re looking for? Browse the topics below or reach out to our support team.',
    'hint'       => 'e.g. billing, refunds, API limits',
    'items'      => null,
])

@php
    $items ??= [
        ['question' => 'Is there a free plan?', 'answer' => 'Yes — our Starter tier is free forever with no credit card required. It includes up to 3 projects, 5 team members, and 1 GB of storage. You can upgrade at any time from your account dashboard.'],
        ['question' => 'How does billing work?', 'answer' => 'We bill monthly or annually. Annual plans include a 20% discount compared to month-to-month pricing. Your card is charged on the same calendar day each cycle, and you receive a receipt by email.'],
        ['question' => 'Can I get a refund?', 'answer' => 'We offer a 30-day money-back guarantee on all paid plans. If you are not satisfied for any reason, contact support within 30 days of your initial purchase and we will issue a full refund.'],
        ['question' => 'What are the API rate limits?', 'answer' => 'Rate limits depend on your plan tier. Starter accounts are limited to 100 requests per minute; Pro accounts to 1,000; Enterprise accounts have custom limits negotiated during onboarding.'],
        ['question' => 'How do I add or remove team members?', 'answer' => 'Navigate to Settings then Team in your dashboard. From there you can invite people by email, assign roles, and remove members instantly. Changes take effect immediately.'],
        ['question' => 'Is my data encrypted?', 'answer' => 'All data is encrypted in transit with TLS 1.3 and at rest with AES-256. We are SOC 2 Type II certified and undergo annual third-party penetration tests.'],
        ['question' => 'Can I export my data?', 'answer' => 'Yes. Go to Settings then Data & Privacy and click Export everything. You will receive a compressed archive containing your projects, assets, and activity logs in open formats.'],
    ];
@endphp

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

        <form role="search" action="#" method="GET" class="mt-10">
            <div class="mx-auto max-w-xl">
                <label for="faq-search-input" class="sr-only">{{ __('Search frequently asked questions') }}</label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 start-3 flex items-center text-muted-foreground" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
                            <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
                        </svg>
                    </span>
                    <x-ui.input id="faq-search-input" type="search" name="q" class="ps-10" :placeholder="__('Search for answers…')" aria-label="{{ __('Search frequently asked questions') }}" autocomplete="off" />
                </div>
                <p class="mt-2 text-center text-sm text-muted-foreground">{{ __($hint) }}</p>
            </div>
        </form>

        <p class="mt-8 text-sm text-muted-foreground">{{ trans_choice(':count article|:count articles', count($items), ['count' => count($items)]) }}</p>

        <x-ui.accordion class="mt-4">
            @foreach ($items as $i => $item)
                <x-ui.accordion.item :value="'faq-search-'.$i">
                    <x-ui.accordion.trigger>{{ __($item['question']) }}</x-ui.accordion.trigger>
                    <x-ui.accordion.content>{{ __($item['answer']) }}</x-ui.accordion.content>
                </x-ui.accordion.item>
            @endforeach
        </x-ui.accordion>
    </div>
</x-ui.section>