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

<section class="bg-no-repeat bg-cover"  style="background-image: url({{asset('images/'.$parent['background_img'])}})">
    <div
      class="2xl:container 2xl:mx-auto flex flex-col-reverse gap-12 px-4 py-10 md:flex-row md:items-center md:px-[20px] lg:px-[105px]">
      <!-- left -->
      <section class=" w-full space-y-5 text-[30px] text-[#2F2B2B] md:w-1/2">
        <!-- Header -->
        <div class="space-y-5">
          <div class="w-12 h-1 bg-red-500 rounded-full"></div>
          <h2 class="text-[16px] font-extrabold text-red-500 lg:text-[18px]">
            {{$parent['title']}}
          </h2>
          <h1 class="text-[25px] text-[#6d0117] font-extrabold leading-10 lg:text-[35px]">
            {{$parent['header']}}
          </h1>
          <p class="text-[12px] lg:text-[16px] text-[#834f4f] font-semibold">
           {{$parent['description']}}
          </p>  
        </div>
        
        <!-- Body -->
        
        {{-- <ul class="grid grid-cols-12 pb-4 border-b gap-y-4 text-[16px] font-medium text-[#4f5f83]">
        @if (!@empty($child))
        @foreach ($child as $value)
        <li class="col-span-12 sm:col-span-6 flex items-start w-full gap-1">
            <div
              class="relative flex-shrink-0 inline-block h-[16px] w-[16px] rounded-full bg-red-600 before:content-['\2713'] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:text-white mt-1">
            </div>
            <p>{{$value['icon_text']}}</p>
          </li>    
          @endforeach 
          @endif
        </ul> --}}


        <div
          class="relative text-[16px] before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-red-600">
          <div class="ml-2.5">
            
            <p>
             {{$parent['support_text']}}
            </p>

            {{-- <p>
              <span class="font-extrabold"> {{$parent['owner_name']}}</span>,  {{$parent['owner_position']}}
            </p> --}}
          </div>
        </div>
        <a href="{{$parent['url']}}"
          class="rounded-[9px] bg-red-500 px-4 py-2.5 text-[14px] font-semibold text-white transition-colors duration-300 hover:bg-red-600">
          {{$parent['number']}}
    </a>
      </section>
      <!-- right -->
      <section class="space-y-2 text-[#424242] md:w-1/2 2xl:w-1/2">
        <!-- Body -->
        <div class="relative mx-auto w-fit">
          <img src="{{ asset('images/'.$parent['about_us_img']) }}" alt="choose-us"
            class="max-h-[600px] min-h-[400px] w-full object-contain" />
          <div
            class="absolute left-4 top-1/2 inline -translate-y-1/2 rounded-[18px] bg-red-600 px-6 py-2 text-white">
            <p class="flex flex-col items-center text-center lg:w-28">
              <span class="text-[30px] font-semibold sm:text-[45px] md:text-[36px] lg:text-[45px]">{{$parent['year_value']}}</span>
              <span class="text-[10px] font-semibold leading-5 sm:text-[18px] md:text-[14px] lg:text-[18px]">{{$parent['year_text']}}</span>
            </p>
          </div>
        </div>
      </section>
    </div>
  </section>