@extends('frontend::layouts.master')
@section('content')
    @livewire('frontend::page-title', ['article' => $article ?? '', 'breadcrumb' => $breadcrumb])
    @if (!empty($article['text']))
        <section class="py-5 bg-white">
            <div class="container py-5">
                <div class="text-center mb-5">
                    {!! $article['text'] ?? '' !!}
                </div>
            </div>
        </section>
    @endif

    @if (!empty($reasons))
        <section class="py-5">
            <div class="container">
                <!-- Header -->
                <div class="text-center">
                    <h2 class="fs-2 fw-bold mb-3">@lang('frontend::text.title.reasons_why_people_choose_us')</h2>
                </div>
                <div class="row g-4">
                    @foreach ($reasons as $reason)
                        <div class="col-md-6">
                            <div class="sec-why-us d-flex align-items-start">
                                <div class="icn-box me-3">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2 text-break">
                                        {!! $reason['name'] ?? '' !!}
                                    </h5>
                                    <p class="text-break">
                                        {!! $reason['detail'] ?? '' !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if (!empty($sub_menu))
        <section class="py-5 bg-light border-top">
            <div class="container">
                <div class="row row-cols-1 g-4">
                    @foreach ($sub_menu as $sub)
                        <div class="col">
                            <div class="card hover-card h-auto">
                                <div class="row g-0">
                                    <div class="col-12 col-lg-4">
                                        <div class="ratio ratio-1x1">
                                            @if (!empty($sub['image']))
                                                <img class="object-fit-cover p-2 rounded-4" src="{{ $sub['image'] }}"
                                                    alt="...">
                                            @endif

                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-8">
                                        <div class="card-body d-flex flex-column">
                                            <div class="fw-bold fs-2 mb-2">
                                                {!! $sub['name'] ?? '' !!}
                                            </div>
                                            <div class="card-text">
                                                {!! $sub['desc'] ?? '' !!}
                                            </div>
                                            @if (!empty($sub['url']))
                                                <div class="mt-auto pt-3">
                                                    <a href="{{ $sub['url'] }}" class="btn btn-icn text-decoration-none">
                                                        @lang('frontend::text.btn.learn_more')
                                                        <i class="fas fa-arrow-right"></i>
                                                    </a>
                                                </div>
                                            @else
                                                <!-- No button -->
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    <x-frontend::section.contact-n-question title="" description="{!! $questions['detail'] ?? '' !!}"
        image="{!! $questions['image'] ?? '' !!}" :toggleBtnContactUs=false :toggleBtnFindAnswers=true :toggleBtnGetInTouch=true :url="$page_init['url']" />
@endsection