@php
$chooseUsInfo = $sectionData->where('section', 'chooseUs')->first();
$chooseUsInfo = (!empty($chooseUsInfo->content) ? json_decode($chooseUsInfo->content) : '');
@endphp

@if (!empty($whyUs) && $whyUs->isNotEmpty())
<section id="whyUsPage" class="z-[1] relative overflow-hidden sectionGap">
    <div class="container">
        <div class="grid lg:grid-cols-2 gap-y-8">
            <div class="relative">
                <p class="sectionSub" data-aos="fade-up" data-aos-duration="800">
                    {{ !empty($chooseUsInfo->subtitle) ? $chooseUsInfo->subtitle : '' }}
                </p>

                <h2 class="sectionTitle" data-aos="fade-up" data-aos-duration="900">
                    {!! !empty($chooseUsInfo->title) ? $chooseUsInfo->title : '' !!}</h2>


                <a href="{{url('/websites')}}" class="outline-btn mt-14" data-aos="fade-up" data-aos-duration="1000">See Our Websites
                    {!! config('icons.arrowRightLine') !!}
                </a>

                <div class="hidden lg:block absolute right-20 bottom-0 animate-float-bob-y">
                    <svg width="101" height="77" viewBox="0 0 101 77" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M1 1C4.53011 26.1547 15.254 80.3898 29.9088 46.0934C48.2272 3.22281 49.6583 110.106 64.8283 64.0051C79.9982 17.9045 84.6923 76 101 76"
                            stroke="#999950" stroke-width="2"></path>
                    </svg>
                </div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 gap-y-12 gap-x-8 items-start">
                @foreach ($whyUs as $key => $row)
                <div data-aos="fade-up" data-aos-duration="1000" class="grid gap-8 text-center px-5">
                    <div
                        class="text-2xl overflow-hidden z-[1] size-16 rounded-full relative flex items-center justify-center text-white mx-auto after:absolute after:inset-0 after:bg-gradient-to-tr after:from-primary after:to-purple-600 after:z-[-1] after:animate-spin-slow">
                        {!!$row->icon!!}
                    </div>
                    <h3 class="text-xl text-black font-bold">
                        {{ !empty($row->title) ? $row->title : '' }}
                    </h3>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif