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

@endphp
{{-- Mission --}}
<section class="2xl:container 2xl:mx-auto space-y-6 px-2 text-skin-base md:px-[20px] lg:px-[60px] my-10">
  <!-- body -->
  <div class="flex flex-col-reverse items-center gap-8 md:flex-row">
    <!-- left -->
    <div class="w-full space-y-6 ">
      <!-- Header -->
      <div class="space-y-4">
        <div>
          <h2 class="text-[18px] font-semibold text-skin-hover">
              {{$parent['subtitle']}}
          </h2>
          <h1 class="text-[35px] font-bold">
              {{$parent['parent_title']}}
          </h1>
        </div>
        <p class="text-[14px]">
          {{$parent['short_description']}}
        </p>
      </div>
      <div class="swiper swiperHistory">
        <div class="swiper-wrapper border-b">
          {{-- @dd($child) --}}
          @if (!empty($child))
              @foreach ($child as $key => $value)
                  <!-- Mission -->
                  <div class="swiper-slide">
                      <button
                      fade="fade-trigger-{{$key}}"
                      class="fade-trigger relative cursor-pointer rounded-[9px] py-1.5 text-sm font-semibold uppercase {{$key == 0?'text-skin-hover before:w-full':'before:w-0'}} transition-colors duration-500 before:absolute before:left-0 before:top-full before:h-[6px] before:bg-skin-highlight before:transition-[width] before:duration-500 hover:text-[#0890b6] hover:before:w-full sm:py-3.5 sm:text-[16px]"
                      >{{ $value['title'] }}</button>
                  </div>
              @endforeach
          @endif
          {{-- <!-- Mission -->
          <div class="swiper-slide">
            <button
              fade="fade-trigger-1"
              class="fade-trigger relative cursor-pointer rounded-[9px] py-1.5 text-sm font-semibold uppercase text-[#FF4800] transition-colors duration-500 before:absolute before:left-0 before:top-full before:h-[6px] before:w-full before:bg-[#FF4800] before:transition-[width] before:duration-500 hover:text-[#FF4800] hover:before:w-full sm:py-3.5 sm:text-[16px]"
            >
              Our Mission
            </button>
          </div>
          <!-- Vission -->
          <div class="swiper-slide">
            <button
              fade="fade-trigger-2"
              class="fade-trigger relative cursor-pointer rounded-[9px] py-1.5 text-sm font-semibold uppercase transition-colors duration-500 before:absolute before:left-0 before:top-full before:h-[6px] before:w-0 before:bg-[#FF4800] before:transition-[width] before:duration-500 hover:text-[#FF4800] hover:before:w-full sm:py-3.5 sm:text-[16px]"
            >
              Our Vission
            </button>
          </div>
          <!-- Principle -->
          <div class="swiper-slide">
            <button
              fade="fade-trigger-3"
              class="fade-trigger relative cursor-pointer rounded-[9px] py-1.5 text-sm font-semibold uppercase transition-colors duration-500 before:absolute before:left-0 before:top-full before:h-[6px] before:w-0 before:bg-[#FF4800] before:transition-[width] before:duration-500 hover:text-[#FF4800] hover:before:w-full sm:py-3.5 sm:text-[16px]"
            >
              Our Principle
            </button>
          </div> --}}
        </div>
      </div>
      <!-- Content -->
      <div class="fade-container">
          @if (!empty($child))
              @foreach ($child as $key => $value)
                  <!-- Mission Content -->
                  <div class="fade-trigger-{{$key}} space-y-4 {{$key==0?'':'hidden space-y-4'}}">
                      <div class="flex flex-col-reverse gap-4 sm:flex-row">
                        <div class="">
                          <p class="line-clamp-6">{{ $value['des'] }}</p>
                          <button
                            class="learn-more-btn inline-block text-[14px] font-semibold text-skin-hover"
                          >
                            Learn More
                          </button>
                        </div>
                      </div>
                    </div>
              @endforeach
          @endif
        {{-- <div class="fade-trigger-1 space-y-4">
          <div class="flex flex-col-reverse gap-4 sm:flex-row">
            <div class="">
              <p class="line-clamp-6">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Dolorum, explicabo dicta eaque iure numquam, vitae rem
                ipsa nesciunt ipsum dolore est eius eos! Blanditiis
                officiis fuga inventore mollitia quis placeat sed
                voluptatibus quaerat repellendus, iure asperiores labore
                quasi. Voluptas obcaecati officia provident eos temporibus
                vero earum, iusto optio in debitis architecto aperiam
                fugiat eius cum illo quisquam voluptatibus, adipisci,
                perspiciatis sit. Est, et. A nostrum aut ab quae explicabo
                accusamus labore blanditiis, suscipit corrupti aspernatur
                aperiam ipsa architecto amet iure quod dolore sapiente
                commodi mollitia illo! Quae deleniti amet quisquam, magni
                sequi porro alias molestiae doloribus pariatur aspernatur,
                doloremque cumque!
              </p>
              <button
                class="learn-more-btn inline-block text-[14px] font-semibold text-[#F06728]"
              >
                Learn More
              </button>
            </div>
          </div>
        </div>
        <div class="fade-trigger-2 fade-content hidden space-y-4">
          <div class="flex flex-col-reverse gap-4 sm:flex-row">
            <div>
              <p class="line-clamp-6">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Dolorum, explicabo dicta eaque iure numquam, vitae rem
                ipsa nesciunt ipsum dolore est eius eos! Blanditiis
                officiis fuga inventore mollitia quis placeat sed
                voluptatibus quaerat repellendus, iure asperiores labore
                quasi. Voluptas obcaecati officia provident eos temporibus
                vero earum, iusto optio in debitis architecto aperiam
                fugiat eius cum illo quisquam voluptatibus, adipisci,
                perspiciatis sit. Est, et. A nostrum aut ab quae explicabo
                accusamus labore blanditiis, suscipit corrupti aspernatur
                aperiam ipsa architecto amet iure quod dolore sapiente
                commodi mollitia illo! Quae deleniti amet quisquam, magni
                sequi porro alias molestiae doloribus pariatur aspernatur,
                doloremque cumque!
              </p>
              <button
                class="learn-more-btn inline-block text-[14px] font-semibold text-[#F06728]"
              >
                Learn More
              </button>
            </div>
          </div>
        </div>
        <div class="fade-trigger-3 fade-content hidden space-y-4">
          <div class="flex flex-col-reverse gap-4 sm:flex-row">
            <div>
              <p class="line-clamp-6">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Dolorum, explicabo dicta eaque iure numquam, vitae rem
                ipsa nesciunt ipsum dolore est eius eos! Blanditiis
                officiis fuga inventore mollitia quis placeat sed
                voluptatibus quaerat repellendus, iure asperiores labore
                quasi. Voluptas obcaecati officia provident eos temporibus
                vero earum, iusto optio in debitis architecto aperiam
                fugiat eius cum illo quisquam voluptatibus, adipisci,
                perspiciatis sit. Est, et. A nostrum aut ab quae explicabo
                accusamus labore blanditiis, suscipit corrupti aspernatur
                aperiam ipsa architecto amet iure quod dolore sapiente
                commodi mollitia illo! Quae deleniti amet quisquam, magni
                sequi porro alias molestiae doloribus pariatur aspernatur,
                doloremque cumque!
              </p>
              <button
                class="learn-more-btn inline-block text-[14px] font-semibold text-[#F06728]"
              >
                Learn More
              </button>
            </div>
          </div>
        </div> --}}
      </div>
    </div>
    <!-- right -->
    {{-- <div class="image-container w-full md:w-[45%] ">
      <img
        src="{{ asset('images/' . $parent['main_image']) }}"
        alt="company-history"
        class="max-h-[600px] min-h-[300px] w-full object-contain object-cover"
      />
    </div> --}}
  </div>
</section>