@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

@endphp

<!-- We Provide -->
<section class="container mx-auto flex items-center gap-4 px-2 md:px-[20px] lg:px-[100px] xl:px-[169px]">
    <!-- left -->
    <section class="container mx-auto w-full space-y-2 text-[#424242] md:w-1/2">
        <!-- Header -->
        @if (!empty($parent))
            <div>
                <h2 class="text-[22px]">{{ $parent['title'] }}</h2>
                <h1 class="text-[30px] font-semibold">{{ $parent['sub title'] }}</h1>
                <p class="mb-3 text-[14px] font-light">
                    {{ $parent['description'] }}
                </p>

            </div>
        @endif
        <!-- Body -->
        <ul class="grid-cols-12 gap-4 text-[14px] sm:grid sm:space-y-0">
            @foreach ($child as $value)
                <li class="col-span-12 flex w-full items-center gap-2 font-light sm:col-span-6">
                    <span
                        class="flex h-[16.67px] w-[16.67px] items-center justify-center rounded-full bg-[#F06728] text-[7px] text-white"><i
                            class="{{ $value['icone'] }}"></i>
                    </span>
                    <p>{{ $value['title'] }}</p>
                </li>
            @endforeach


        </ul>
    </section>
    <!-- right -->
    @if (!empty($parent))
        <section class="hidden w-1/2 md:block">
            <img src="{{ asset('images/' . $parent['image']) }}" alt="choose-us"
                class="h-[400px] w-full object-contain" />
        </section>
    @endif
</section>
