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

<section style="background-image: url({{ asset('images/' . $parent['background_image']) }});"
    class=" bg-no-repeat bg-cover min-h-screen">
    <div class="xl:container xl:mx-auto relative space-y-16 px-2 py-16  md:px-[20px] lg:px-[60px]">
        <!-- Services Header -->
        <div class="w-[60%] mx-auto text-[#0298c0] text-center space-y-2">
            <div class="w-12 h-1 bg-[#0298c0] mx-auto rounded-full"></div>
            <h2 class="text-[16px] text-gray-600 font-medium">
                {{ $parent['section_title'] }}
            </h2>
            <p class="text-[14px]">
                {{ $parent['description'] }}
            </p>
        </div>
        @if (!empty($child[0]))
        <div class="grid grid-cols-12">
            @foreach ($child as $value)
                <!-- Image -->
                <div class="col-span-1 border border-gray-300">   
                    <a href="{{$value['url']}}" class=" bg-green-500">
                        <img src="{{ asset('images/' . $value['client_image']) }}" alt="service"
                            class="w-full h-28 object-cover object-center">
                    </a>
                </div>
                
            @endforeach
        </div>
        @endif
    </div>
</section>