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

@endphp


<section class="2xl:container 2xl:mx-auto space-y-6 px-2 text-[#2F2B2B] md:px-[20px] lg:px-[60px] mt-20">
    <!-- who we are -->
    <div class="flex flex-col-reverse gap-12 md:flex-row md:items-center">
        <!-- left -->
        <div class="container mx-auto w-full space-y-8 md:w-1/2">
            <!-- Header -->
            <div class="space-y-4">
                <div class="space-y-3">
                    <div class="w-10 h-1 bg-[#0298c0] rounded-full"></div>
                    <h2 class="relative w-fit text-[14px] font-extrabold text-[#0298c0]">
                        {{ $parent['title'] }}
                    </h2>
                    <h1 class="text-[35px] font-bold text-[#113a5e]">
                        {{ $parent['header'] }}
                    </h1>
                </div>

                <p class="block text-[14px] text-[#4f5f83]">
                    {{ $parent['description1'] }}
                </p>

                <!-- numbers -->
                <div class="flex flex-wrap sm:flex-nowrap items-center justify-between gap-2">
                    @if (!empty($child))
                        @foreach ($child as $value)
                            <div class="flex items-center gap-4 flex-1">
                                <div class="flex items-center gap-3">
                                    <div class="h-5 w-0.5 bg-[#0861a7] rounded-full"></div>
                                    <span class="text-2xl sm:text-3xl text-[#0298c0]"><i
                                            class="{{ $value['icon'] }}"></i></span>
                                </div>

                                <div class="text-center">
                                    <span
                                        class="text-3xl sm:text-5xl text-[#113a5e] font-bold">{{ $value['value'] }}</span>
                                    <p class="text-sm">{{ $value['text'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                <p class="text-[14px] text-[#4f5f83]">
                    {{ $parent['description2'] }}
                </p>
                <div class="flex items-center gap-2">
                    <a href="{{ $parent['url'] }}"
                    class=" block w-fit uppercase bg-[#0861a7] hover:bg-[#113a5e] transition-colors duration-300 text-white font-semibold px-4 py-2 rounded-full">{{ $parent['btn_name'] }}</a>
                    <a href="{{ asset('files/Profile.pdf') }}"
                        class=" block w-fit uppercase bg-[#055734] hover:bg-[#084b2e] transition-colors duration-300 text-white font-semibold px-4 py-2 rounded-full">Download Profile</a>
                </div>
                
            </div>
        </div>
        <!-- right -->
        <div class="space-y-2 md:w-1/2">
            <!-- Body -->
            <div class="relative mx-auto w-fit">
                <img src="{{ asset('images/' . $parent['image']) }}" alt="choose-us"
                    class="max-h-[600px] w-full object-contain" />
            </div>
        </div>
    </div>
</section>