@extends('layouts.app')

@section('title', 'FAQ')

@section('content')
<div class="hero-section">
    <div class="container">
        <h1 class="display-4 fw-bold">Frequently Asked Questions</h1>
        <p class="lead">Find answers to common questions</p>
    </div>
</div>

<div class="container mb-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="accordion" id="faqAccordion">
                @forelse($faqs as $key => $faq)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button @if($key > 0) collapsed @endif" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $key }}">
                                {{ $faq['question'] }}
                            </button>
                        </h2>
                        <div id="faq{{ $key }}" class="accordion-collapse collapse @if($key == 0) show @endif" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                {{ $faq['answer'] }}
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="alert alert-info">No FAQs available</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection