@php
    $chooseContent = getContent('why_choose_us.content', true);
    $chooseElement = getContent('why_choose_us.element', false, 4, true);
@endphp
<section class="why-choose my-120">
    <div class="container">
        <div class="section-heading">
            <span class="section-heading__tagline" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">{{ __($chooseContent?->data_values?->title ?? '') }}</span>
            <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
                {{ __($chooseContent?->data_values?->heading ?? '') }}
            </h2>
            <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                {{ __($chooseContent?->data_values?->subheading ?? '') }}
            </p>
        </div>
        <div class="row gy-4">
            @foreach ($chooseElement as $key => $element)
                <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
                    <div class="why-choose-card wcc-card-{{ $key + 1 }}">
                        <div class="why-choose-card__icon">
                            <div class="mask-img" data-mask-image="{{ frontendImage('why_choose_us', $element?->data_values?->icon ?? '', '130x130') }}">
                            </div>
                        </div>
                        <div class="why-choose-card__content">
                            <h6 class="why-choose-card__title">
                                {{ __($element?->data_values?->title ?? '') }}
                            </h6>
                            <p class="why-choose-card__desc">
                                {{ __($element?->data_values?->details ?? '') }}
                            </p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
