@extends('layouts.public')

@section('title', 'Frequently Asked Questions — '.setting('university_name'))
@section('description', 'Answers to common questions about applying to King Ceasor University.')

@section('content')

    <section class="border-b border-slate-200 bg-canvas">
        <div class="container-page py-12">
            <x-breadcrumb :items="[
                ['label' => 'Home', 'url' => route('home')],
                ['label' => 'Admissions', 'url' => route('admissions')],
                ['label' => 'FAQs'],
            ]" />
            <h1 class="mt-4 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">
                Frequently asked questions
            </h1>
        </div>
    </section>

    <div class="container-prose py-14">
        @forelse ($faqs as $category => $items)
            <section class="mb-12">
                <h2 class="mb-5 text-sm font-semibold uppercase tracking-wider text-brand-700">{{ $category }}</h2>

                <div class="space-y-3" x-data="{ open: null }">
                    @foreach ($items as $faq)
                        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white">
                            <button type="button"
                                    @click="open = open === {{ $faq->id }} ? null : {{ $faq->id }}"
                                    :aria-expanded="open === {{ $faq->id }}"
                                    class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition hover:bg-slate-50">
                                <span class="text-sm font-medium text-slate-900">{{ $faq->question }}</span>
                                <svg class="h-5 w-5 shrink-0 text-slate-400 transition"
                                     :class="open === {{ $faq->id }} ? 'rotate-180' : ''"
                                     fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z" clip-rule="evenodd"/>
                                </svg>
                            </button>

                            <div x-show="open === {{ $faq->id }}" x-collapse x-cloak
                                 class="border-t border-slate-100 px-5 py-4 text-sm leading-relaxed text-slate-600">
                                {{ $faq->answer }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @empty
            <x-empty-state title="No questions published yet" />
        @endforelse

        <x-card class="border-brand-200 bg-brand-50 text-center">
            <p class="text-base font-semibold text-slate-900">Still have a question?</p>
            <p class="mt-2 text-sm text-slate-600">Our admissions team will be glad to help.</p>
            <x-button :href="route('contact')" class="mt-5">Contact us</x-button>
        </x-card>
    </div>

@endsection
