@props([
    'service',
    'locationSuffix' => '',
    'localizedRoute',
])

@if(!empty($service['faqs']))
@php
    $faqItems = array_values($service['faqs']);
    $faqSplitAt = (int) ceil(count($faqItems) / 2);
    $faqColumns = [
        array_slice($faqItems, 0, $faqSplitAt),
        array_slice($faqItems, $faqSplitAt),
    ];
@endphp
<section id="faq" class="svc-section svc-section--white scroll-mt-24" aria-labelledby="svc-faq-heading">
    <div class="site-container">
        <div itemscope itemtype="https://schema.org/FAQPage">
            <x-service-detail.section-intro
                :eyebrow="__('messages.service_detail.faq_section_label')"
                :title="__('messages.service_detail.questions_answered', ['service' => $service['name'], 'location_suffix' => $locationSuffix])"
                :description="__('messages.service_detail.questions_answered_desc', ['service' => strtolower($service['name']), 'location_suffix' => $locationSuffix])"
                heading-id="svc-faq-heading"
            />

            <div class="svc-faq svc-reveal">
                @foreach($faqColumns as $columnFaqs)
                @if(count($columnFaqs) > 0)
                <div class="svc-faq__col">
                    @foreach($columnFaqs as $faq)
                    <details class="svc-faq__item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                        <summary class="svc-faq__summary" itemprop="name">
                            <span class="svc-faq__question">{{ $faq['question'] }}</span>
                            <span class="svc-faq__icon" aria-hidden="true">+</span>
                        </summary>
                        <div class="svc-faq__answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                            <div itemprop="text">{{ $faq['answer'] }}</div>
                        </div>
                    </details>
                    @endforeach
                </div>
                @endif
                @endforeach
            </div>

            <p class="svc-faq__footer svc-reveal">
                {{ __('messages.service_detail.still_have_questions', ['service' => strtolower($service['name']), 'location_suffix' => '']) }}
                <a href="{{ $localizedRoute('contact.index') }}" class="svc-faq__footer-link">
                    {{ __('messages.service_detail.talk_to_specialist', ['service' => '', 'location_suffix' => '']) }}
                </a>
            </p>
        </div>
    </div>
</section>
@endif