@extends('layouts.app')

@section('title', __('app.faq.title'))
@section('meta_description', __('app.faq.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.faq')],
        ],
        'title' => __('app.faq.h1'),
        'lead' => __('app.faq.lead'),
    ])

    <section class="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        <div class="space-y-4">
            @foreach (__('app.faq.items') as $item)
                <details class="group rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold text-brand-deep [&::-webkit-details-marker]:hidden">
                        {{ $item['q'] }}
                        <svg class="h-5 w-5 shrink-0 text-ink-soft transition group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                    </summary>
                    <p class="mt-3 text-sm leading-relaxed text-ink-soft">{{ $item['a'] }}</p>
                </details>
            @endforeach
        </div>
    </section>

    <script type="application/ld+json">{!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'FAQPage',
        'mainEntity' => array_map(fn (array $item) => [
            '@type' => 'Question',
            'name' => $item['q'],
            'acceptedAnswer' => ['@type' => 'Answer', 'text' => $item['a']],
        ], __('app.faq.items')),
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP) !!}</script>

    @include('partials.cta')
@endsection