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

  @endphp

  <!-- History -->
  @if (!empty($parent))
      <section class="container mx-auto space-y-6 px-2 py-10 text-[#2F2B2B] md:px-[20px] lg:px-[100px] xl:px-[169px]">
          <!-- Header -->
          <div class="mx-auto max-w-[600px] text-center">
              <h2 class="text[18px] font-bold text-[#FF4800]"> {{ $parent['title'] }}</h2>
              <h1 class="text-[35px] font-bold">
                  {{ $parent['sub title'] }}
              </h1>
          </div>
          <!-- body -->
          <div class="relative">
              <span class="absolute left-1/2 top-0 h-full w-[2px] -translate-x-1/2 bg-gray-200 sm:hidden"></span>

              @foreach ($child as $key => $value)
                  @if ($key % 2 == 0)
                      <div class="grid grid-cols-12">
                          <!-- history -->
                          <div class="relative order-2 col-span-12 border-r py-10 sm:order-none sm:col-span-6 sm:pr-20">
                              <div class="absolute right-0 top-[54px] hidden translate-x-1/2 sm:block">
                                  <div
                                      class="relative h-3 w-3 rounded-full bg-[#FF4800] before:absolute before:right-1/2 before:top-1/2 before:-z-10 before:h-[2px] before:w-[80px] before:-translate-y-1/2 before:bg-gray-200 after:absolute after:left-1/2 after:top-1/2 after:-z-10 after:h-[2px] after:w-[80px] after:-translate-y-1/2 after:bg-gray-200">
                                  </div>
                              </div>

                              <div class="mx-auto overflow-hidden rounded-md border shadow-md sm:mx-0">
                                  <h1 class="bg-[#FF4800] px-4 py-2 text-center text-[18px] font-bold text-white">
                                      {{ $value['title'] }}
                                  </h1>
                                  <p class="bg-white px-4 py-6 text-start text-[14px]">
                                      {{ $value['description'] }}
                                  </p>
                              </div>
                          </div>
                          <!-- Date -->
                          <div
                              class="relative order-1 col-span-12 mx-auto w-fit py-10 sm:order-none sm:col-span-6 sm:mx-0 sm:pl-20">
                              <div class="rounded-full bg-[#FF4800] px-4 py-2 text-white shadow-md">
                                  {{ $value['date'] }}
                              </div>
                          </div>
                      </div>
                  @else
                      <div class="grid grid-cols-12">
                          <!-- Date -->
                          <div
                              class="relative col-span-12 mx-auto w-fit py-10 sm:col-span-6 sm:mx-0 sm:ml-auto sm:border-r sm:pr-20">
                              <div class="absolute right-0 top-[54px] hidden translate-x-1/2 sm:block">
                                  <div
                                      class="relative h-3 w-3 rounded-full bg-[#FF4800] before:absolute before:right-1/2 before:top-1/2 before:-z-10 before:h-[2px] before:w-[80px] before:-translate-y-1/2 before:bg-gray-200 after:absolute after:left-1/2 after:top-1/2 after:-z-10 after:h-[2px] after:w-[80px] after:-translate-y-1/2 after:bg-gray-200">
                                  </div>
                              </div>
                              <div class="rounded-full bg-[#FF4800] px-4 py-2 text-white shadow-md">
                                  {{ $value['date'] }}
                              </div>
                          </div>
                          <!-- history -->
                          <div class="relative col-span-12 py-10 sm:col-span-6 sm:pl-20">
                              <div class="overflow-hidden rounded-md border shadow-md">
                                  <h1 class="bg-[#FF4800] px-4 py-2 text-center text-[18px] font-bold text-white">
                                      {{ $value['title'] }}
                                  </h1>
                                  <p class="bg-white px-4 py-6 text-start text-[14px]">
                                      {{ $value['description'] }}
                                  </p>
                              </div>
                          </div>
                      </div>
                  @endif
              @endforeach


              {{-- <span
                  class="absolute bottom-0 left-1/2 flex h-8 w-8 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full bg-[#FF4800] text-white"><i
                      class="fa-solid fa-angle-down"></i></span> --}}
          </div>
      </section>
  @endif
