@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-[105px] mb-5 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-red-500 rounded-full"></div>
            <h2 class="relative w-fit text-[14px] font-extrabold text-red-500">
              {{$parent['title']}}
            </h2>
            <h1 class="text-[35px] font-bold text-[#6d0117]">
              {{$parent['header']}}
            </h1>
          </div>

          <p class="block text-[14px] text-[#834f4f]">
            {{$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-red-700 rounded-full"></div>
                  <span class="text-2xl sm:text-3xl text-red-500"><i class="{{$value['icon']}}"></i></span>
                </div>
  
                <div class="text-center">
                  <span class="text-3xl sm:text-5xl text-[#00194c] 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>
          <a href="{{$parent['url']}}"
            class=" block w-fit uppercase bg-red-700 hover:bg-red-800 transition-colors duration-300 text-white font-semibold px-4 py-2 rounded-full">{{$parent['btn_name']}}</a>
        </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>