@extends('layouts.public')

@section('title', 'FAQ')

@section('content')
    <x-inner-hero kicker="FAQ" title="Frequently asked questions" subtitle="Everything delegates ask us before the symposium." />

    <section class="mesh-light py-14 sm:py-20">
        <div class="mx-auto max-w-3xl space-y-3 px-4 sm:px-6 lg:px-8">
            @forelse ($faqs as $faq)
                <details class="surface group p-5" @if ($loop->first) open @endif>
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-semibold text-navy-900">
                        {{ $faq->question }}
                        <svg class="h-5 w-5 shrink-0 text-emerald-500 transition group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </summary>
                    <p class="mt-3 leading-relaxed text-navy-500">{{ $faq->answer }}</p>
                </details>
            @empty
                <p class="surface p-8 text-center text-navy-500">No questions have been published yet.</p>
            @endforelse

            <div class="surface mt-10 flex flex-col items-start gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 class="font-display text-xl font-semibold text-navy-900">Still have a question?</h2>
                    <p class="text-sm text-navy-500">Our team replies within one working day.</p>
                </div>
                <a href="{{ route('contact') }}" class="btn-primary">Contact us</a>
            </div>
        </div>
    </section>
@endsection