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

  @endphp


  <!-- Company History -->
  <section class="container mx-auto px-2 text-[#424242] md:px-[20px] lg:px-[100px] xl:px-[169px]">

      <!-- Header -->
      @if (!empty($parent))
          <div class="text-center">
              <h1 class="text-[18px] font-semibold text-[#F06728]">
                  {{ $parent['title'] }}
              </h1>
              <h2 class="text-[40px] font-semibold">{{ $parent['sub title'] }}</h2>
          </div>
      @endif

      <!-- body -->
      <div class="flex flex-col-reverse items-center gap-4 md:flex-row">
          <!-- left -->
          <div class="w-full space-y-4 md:w-[55%]">
              <div class="swiper swiperHistory">
                  <div class="swiper-wrapper">
                      <!-- 2005 -->
                      @foreach ($child as $key => $value)
                          <div class="swiper-slide">
                              <button fade="fade-trigger-{{ $key }}"
                                  class="fade-trigger cursor-pointer rounded-[9px] bg-[#F06728] px-3 py-1.5 text-sm font-semibold uppercase text-white hover:bg-[#F06728] hover:text-white sm:px-6 sm:py-3.5 sm:text-[16px]">
                                  {{ $value['year'] }}
                              </button>
                          </div>
                      @endforeach
                  </div>
              </div>
              <!-- Content -->
              <div class="fade-container">
                  @foreach ($child as $key => $value)
                      <div class="fade-trigger-{{ $key }} space-y-4 {{ $key == 0 ? '' : 'hidden' }}">
                          <p class="line-clamp-6">
                              {{ $value['description'] }}
                          </p>
                          @if (strlen($value['description']) >= 440)
                              <button class="learn-more-btn inline-block text-[14px] font-semibold text-[#F06728]">
                                  Learn More
                              </button>
                          @endif
                      </div>
                  @endforeach
              </div>
          </div>
          <!-- right -->
          <div class="image-container h-[400px] w-full md:w-[45%]">
              @foreach ($child as $key => $value)
                  <img src="{{ asset('images/' . (isset($value['image']) ? $value['image'] : '')) }}"
                      alt="company-history"
                      class="fade-trigger-{{ $key }} h-full w-full object-cover sm:object-contain {{ $key == 0 ? '' : 'hidden' }}" />
              @endforeach
          </div>
      </div>
  </section>

  {{-- <!-- Company History -->
  <section class="container mx-auto px-2 text-[#424242] md:px-[20px] lg:px-[100px] xl:px-[169px]">
      <!-- Header -->
      @if (!empty($parent))
          <div class="text-center">
              <h1 class="text-[18px] font-semibold text-[#F06728]">
                  {{ $parent['title'] }}
              </h1>
              <h2 class="text-[40px] font-semibold">{{ $parent['sub title'] }}</h2>
          </div>
      @endif
      <!-- body -->
      <div class="flex flex-col-reverse items-center gap-4 md:flex-row">
          <!-- left -->
          <div class="w-full space-y-4 md:w-[55%]">
              <!-- years -->
              <ul class="flex flex-wrap items-center gap-2 sm:flex-nowrap">
                  @foreach ($child as $key => $value)
                      <li fade="#fade-trigger-{{ $key }}"
                          class="fade-trigger cursor-pointer rounded-[9px] bg-[#F06728] px-3 py-1.5 text-sm font-semibold uppercase text-white hover:bg-[#F06728] hover:text-white sm:px-6 sm:py-3.5 sm:text-[16px]">
                          {{ $value['year'] }}
                      </li>
                  @endforeach


              </ul>
              <!-- Content -->
              <div class="fade-container">
                  @foreach ($child as $key => $value)
                      <div id="fade-trigger-{{ $key }}" class="space-y-4 {{ $key == 0 ? '' : 'hidden' }} ">
                          <p class="line-clamp-8">
                              {{ $value['description'] }}
                          </p>

                          <a href="#" class="inline-block text-[14px] font-semibold text-[#F06728]">Learn More</a>
                      </div>
                  @endforeach

              </div>
          </div>
          <!-- right -->
          @if (!empty($parent))
              <div class="h-[400px] w-full md:w-[45%]">
                  <img src="{{ asset('images/' . $parent['image']) }}" alt="company-history"
                      class="h-full w-full object-cover sm:object-contain" />
              </div>
          @endif
      </div>

  </section> --}}