@if(!empty($faqs))
<section class="py-3">
    <div class="container">
        <div class="row">
            <div class="col-xl-10 mx-auto text-center">
                <span class="d-block h2 mb-2 fw-bold text-center">Frequently Asked Questions</span>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-5 text-center">
                <div>
                    <img src="{{ asset('assets/images/home-faq.webp') }}" alt="faq"
                        class="img-fluid" width="300" height="300" />
                </div>
                <div class="row">
                    <div class="col-xl-10 mx-auto mt-3">
                        <div class="bdr-purple p-2 text-center  rounded-3">
                            <span class="d-block fw-bold ">Have any further questions?</span>
                            <a href="{{ url('contact-us') }}" title="contact us"
                                class="purple-btn small-btn rounded-2 mt-2">Contact us</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-7 mt-2">
                <div class="accordion-container">
                    <div class="accordion" id="purpleAccordion">

                        @foreach($faqs as $index => $faq)
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading{{ $index }}">
                                <button class="accordion-button {{ $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="#purpleAccordion">
                                <div class="accordion-body">
                                    {{ $faq['answer'] ?? '' }}
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif