@php
    $faqContent = getContent('faq.content', true);
    $faqElement = getContent('faq.element', orderById: true);
    $faqs = $faqElement->chunk(round(count($faqElement) / 2));
@endphp

<section class="faq-section my-120">
    <div class="container position-relative">
        <div class="faq-shape">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="section-title text-center">
                    <span class="btn btn--base btn--section animate" data-direction="down"> {{ __($faqContent?->data_values?->heading ?? '') }}</span>
                    <h2 class="main-title animate" data-direction="down"> {{ __($faqContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down"> {{ __($faqContent?->data_values?->short_details ?? '') }}</p>
                </div>
            </div>
        </div>
        <div class="row gy-4 mt-60">
            <div class="col-lg-6">
                <div class="accordion custom--accordion" id="accordionLeft">
                    @foreach ($faqs[0] as $key => $faq)
                        <div class="accordion-item animate">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqLeft{{ $key }}" aria-expanded="false" aria-controls="faqLeft{{ $key }}">
                                    {{ __($faq?->data_values?->question ?? '') }}
                                </button>
                            </h2>
                            <div id="faqLeft{{ $key }}" class="accordion-collapse collapse" data-bs-parent="#accordionLeft">
                                <div class="accordion-body">
                                    <p>{{ __($faq?->data_values?->answer ?? '') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="col-lg-6">
                <div class="accordion custom--accordion" id="accordionRight">
                    @foreach ($faqs[1] as $key => $faq)
                        <div class="accordion-item animate">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqLeft{{ $key }}" aria-expanded="false" aria-controls="faqLeft{{ $key }}">
                                    {{ __($faq?->data_values?->question ?? '') }}
                                </button>
                            </h2>
                            <div id="faqLeft{{ $key }}" class="accordion-collapse collapse" data-bs-parent="#accordionLeft">
                                <div class="accordion-body">
                                    <p>{{ __($faq?->data_values?->answer ?? '') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>