@if($landing->faq && count($landing->faq))
<section class="section" id="faqs">
    <div class="container text-center">
        <p class="fs-12 fw-medium text-success mb-1">
            <span class="landing-section-heading text-primary">F.A.Q 's</span>
        </p>

        <h4 class="fw-semibold mt-3 mb-2">Frequently asked questions ?</h4>

        <div class="row justify-content-center">
            <div class="col-xl-7">
                <p class="text-muted fs-14 mb-5 fw-normal">
                    We have shared some of the most frequently asked questions to help you out.
                </p>
            </div>
        </div>

        <div class="row text-start">
            {{-- Split the FAQs into two columns --}}
            @php
                $faqs = $landing->faq ?? [];
                $total = count($faqs);
                $half = (int) ceil($total / 2);
                $cols = array_chunk($faqs, $half);
                // Ensure we have exactly 2 arrays
                if (count($cols) === 1) {
                    $cols[] = [];
                }
            @endphp

            {{-- LEFT column --}}
            <div class="col-xl-6">
                <div class="accordion accordion-customicon1 accordion-primary accordions-items-seperate"
                     id="accordionFAQ_left">
                    @foreach($cols[0] as $i => $f)
                        @php
                            $idx = $i; // index within left column
                            $headingId  = "heading_left_{$idx}";
                            $collapseId = "collapse_left_{$idx}";
                            $show = ($i === 0) ? 'show' : '';
                            $expanded = ($i === 0) ? 'true' : 'false';
                        @endphp

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="{{ $headingId }}">
                                <button class="accordion-button {{ $i !== 0 ? 'collapsed' : '' }}"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#{{ $collapseId }}"
                                        aria-expanded="{{ $expanded }}"
                                        aria-controls="{{ $collapseId }}">
                                    {{ $f['q'] ?? '' }}
                                </button>
                            </h2>

                            <div id="{{ $collapseId }}"
                                 class="accordion-collapse collapse {{ $show }}"
                                 aria-labelledby="{{ $headingId }}"
                                 data-bs-parent="#accordionFAQ_left">
                                <div class="accordion-body">
                                    {!! nl2br(e($f['a'] ?? '')) !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- RIGHT column --}}
            <div class="col-xl-6">
                <div class="accordion accordion-customicon1 accordion-primary accordions-items-seperate"
                     id="accordionFAQ_right">
                    @foreach($cols[1] as $j => $f)
                        @php
                            $idx = $j; // index within right column
                            $headingId  = "heading_right_{$idx}";
                            $collapseId = "collapse_right_{$idx}";
                            // do not auto-open right column first item to avoid two open items — optional:
                            $show = '';
                            $expanded = 'false';
                        @endphp

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="{{ $headingId }}">
                                <button class="accordion-button collapsed"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#{{ $collapseId }}"
                                        aria-expanded="{{ $expanded }}"
                                        aria-controls="{{ $collapseId }}">
                                    {{ $f['q'] ?? '' }}
                                </button>
                            </h2>

                            <div id="{{ $collapseId }}"
                                 class="accordion-collapse collapse {{ $show }}"
                                 aria-labelledby="{{ $headingId }}"
                                 data-bs-parent="#accordionFAQ_right">
                                <div class="accordion-body">
                                    {!! nl2br(e($f['a'] ?? '')) !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div> {{-- /.row --}}
    </div> {{-- /.container --}}
</section>
@endif