@extends('frontend.layouts.master')

@section('title', 'Frequently Asked Questions | FBA UK LTD')
@section('meta_description', 'Answers to common questions about UK university admissions, Student Finance, courses and international study with FBA UK LTD.')
@section('meta_keywords', 'FAQ, UK university admissions, student finance, FBA UK LTD')
@section('canonical', route('faq'))

@section('content')
@include('frontend.partials.page-hero', [
  'currentPage' => 'FAQ',
  'title' => 'Frequently Asked <span class="text-gradient">Questions</span>',
  'subtitle' => 'Quick answers about admissions, finance, courses and studying in the UK.',
])

<section class="course-details-section" aria-labelledby="faq-page-heading">
  <div class="container course-details-wrap">
    <h2 id="faq-page-heading" class="visually-hidden">FAQ</h2>
    @forelse($grouped as $category => $items)
      <div class="course-details-faq reveal-up mb-4">
        <h3 class="course-details-panel__title">{{ $category }}</h3>
        <div class="accordion faq-accordion course-faq-accordion" id="faqAccordion-{{ \Illuminate\Support\Str::slug($category) }}">
          @foreach($items as $index => $faq)
            @php $faqId = 'faq-item-' . $faq->id; @endphp
            <div class="accordion-item">
              <h4 class="accordion-header">
                <button class="accordion-button {{ $loop->parent->first && $index === 0 ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $faqId }}" aria-expanded="{{ $loop->parent->first && $index === 0 ? 'true' : 'false' }}" aria-controls="{{ $faqId }}">
                  <span class="faq-q-icon" aria-hidden="true"><i class="fas fa-circle-question"></i></span>
                  <span class="faq-q-text">{{ $faq->question }}</span>
                </button>
              </h4>
              <div id="{{ $faqId }}" class="accordion-collapse collapse {{ $loop->parent->first && $index === 0 ? 'show' : '' }}" data-bs-parent="#faqAccordion-{{ \Illuminate\Support\Str::slug($category) }}">
                <div class="accordion-body">{!! $faq->answer !!}</div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    @empty
      <p class="text-center text-muted py-5">FAQs will appear here soon.</p>
    @endforelse
  </div>
</section>
@endsection