@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <section class="faq-page py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold display-6 animate__animated animate__fadeInDown">Frequently Asked Questions</h2>
                <p class="text-muted">Got questions? We've got answers.</p>
            </div>

            <!-- FAQ Accordion -->
            <div class="accordion animated-accordion" id="faqAccordion">
                @foreach($faqs as $index => $faq)
                    <div class="accordion-item shadow-sm border-0 rounded-3 mb-3 wow fadeInUp" data-wow-delay="{{ $index * 0.1 }}s">
                        <h2 class="accordion-header" id="heading{{ $index }}">
                            <button class="accordion-button fw-semibold {{ $index != 0 ? 'collapsed' : '' }}" type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapse{{ $index }}"
                                    aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                                    aria-controls="collapse{{ $index }}">
                                {{ $faq->question }}
                            </button>
                        </h2>
                        <div id="collapse{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}"
                            aria-labelledby="heading{{ $index }}" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                {!! $faq->answer !!}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@endsection