@extends($defaultLayout)

@section('content')
    <div class="hero-faq">
        {{ block('faq-hero') }}
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-10">
                @livewire('faq-search', [])
            </div>
        </div>
    </div>
    @if(count($popular))
        <section class="container pt-8 mt-8">
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    <div class="py-6 py-md-8 py-lg-10 border-bottom-dark">
                        <h2 class="h4 mb-4">{{ __('faq.most popular title') }}</h2>
                        <div class="row">
                            @foreach($popular as $faq)
                                <div class="col-md-6">
                                    @include(getView('components.faq_item'), ['heading' => 'h3'])
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <section class="container pt-6 pt-md-8 pt-lg-10">
        <div class="row justify-content-center">
            <div class="col-xl-10">
                <h2 class="h4 mb-4">{{ __('faq.choose a theme title') }}</h2>
                <div class="row">
                    @forelse ($categories as $category)
                        <div class="col-md-6 mb-3">
                            @include(getView('components.card.faq-category'), [
                                'item' => $category,
                                'heading' => 'h3'
                            ])
                        </div>
                    @empty
                        <div class="col">
                            <p>{{ __('faq.no faq categories found') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    {{ block('faq-index') }}
    <div class="container py-8 py-lg-13">
        <div class="row">
            <div class="col-lg-4">{{ block('cta-1') }}</div>
            <div class="col-lg-4">{{ block('cta-2') }}</div>
            <div class="col-lg-4">{{ block('cta-3') }}</div>
        </div>
    </div>
@endsection