FAQ

@props([
    'eyebrow'  => 'Support',
    'heading'  => 'Frequently asked questions',
    'lead'     => 'Everything you need to know about the product and billing. Can\'t find the answer you\'re looking for? Chat with our support team.',
    'faqs'     => null,
    'agents'   => null,
    'chatHref' => '#',
    'emailHref'=> '#',
])

@php
    $faqs ??= [
        ['question' => 'Do I own the code that gets installed?', 'answer' => 'Yes. Every component and block is copied into your project as plain, editable Blade. There is no runtime dependency on this registry — once installed it is yours to modify freely.'],
        ['question' => 'How do I update components after installing them?', 'answer' => 'Run the update command to pull upstream changes. Files you have edited are never overwritten; they produce a reviewable diff so you can merge only what you want.'],
        ['question' => 'Can I customise the look and feel?', 'answer' => 'The entire system is driven by CSS design tokens. You can re-theme light, dark, and per-surface variants by editing a handful of CSS variables — no component files need to change.'],
        ['question' => 'Is it accessible?', 'answer' => 'Components target WCAG 2.2 AA: full keyboard support, focus-visible states, correct ARIA wiring, reduced-motion alternatives, and RTL-safe logical properties throughout.'],
        ['question' => 'Does it work with an existing Laravel app?', 'answer' => 'Yes. The installer writes into standard resource paths and requires no special service providers or configuration. It works alongside any Laravel app from version 10 onwards.'],
        ['question' => 'Is there a free tier?', 'answer' => 'The open-core tier — covering all primitives and a large set of marketing and application blocks — is MIT-licensed and free forever. Pro items require a licence and unlock advanced dashboard shells and team features.'],
    ];

    $agents ??= [
        ['src' => null, 'fallback' => 'EA', 'alt' => __('Emma — Support agent')],
        ['src' => null, 'fallback' => 'JR', 'alt' => __('James — Support agent')],
        ['src' => null, 'fallback' => 'SP', 'alt' => __('Sofia — Support agent')],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-3xl px-4">
        <div class="text-center">
            <p class="text-sm font-semibold uppercase tracking-widest text-primary">{{ __($eyebrow) }}</p>
            <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-sm leading-relaxed text-muted-foreground sm:text-base">{{ __($lead) }}</p>
        </div>

        <x-ui.accordion class="mt-12" :multiple="false">
            @foreach ($faqs as $i => $faq)
                <x-ui.accordion.item :value="'faq-contact-'.$i">
                    <x-ui.accordion.trigger>{{ __($faq['question']) }}</x-ui.accordion.trigger>
                    <x-ui.accordion.content>{{ __($faq['answer']) }}</x-ui.accordion.content>
                </x-ui.accordion.item>
            @endforeach
        </x-ui.accordion>

        <x-ui.card class="mt-12 bg-muted/40 text-center">
            <x-ui.card.content class="flex flex-col items-center px-6 py-10 sm:px-10">
                <x-ui.avatar-group :avatars="array_map(fn ($agent) => ['src' => $agent['src'] ?? null, 'name' => $agent['alt'], 'initials' => $agent['fallback'] ?? null], $agents)" :max="count($agents)" :label="__('Support team')" class="justify-center" />
                <h3 class="mt-6 text-xl font-semibold">{{ __('Still have questions?') }}</h3>
                <p class="mt-2 max-w-sm text-sm leading-relaxed text-muted-foreground">{{ __("Can't find the answer you're looking for? Our friendly support team is here to help.") }}</p>
                <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                    <x-ui.button :href="$chatHref" variant="default">
                        <x-slot:icon>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                            </svg>
                        </x-slot:icon>
                        {{ __('Chat to support') }}
                    </x-ui.button>
                    <x-ui.button :href="$emailHref" variant="ghost">
                        <x-slot:icon>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
                                <rect width="20" height="16" x="2" y="4" rx="2" />
                                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                            </svg>
                        </x-slot:icon>
                        {{ __('Send an email') }}
                    </x-ui.button>
                </div>
            </x-ui.card.content>
        </x-ui.card>
    </div>
</x-ui.section>