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

    @endphp

    <!-- FAQ -->
    <section class="container mx-auto px-2 text-[#2F2B2B] md:px-[20px] lg:px-[100px] xl:px-[169px]">
        <!-- body -->
        @if (!empty($parent))
            <div class="flex flex-col-reverse items-center gap-8 md:flex-row">
                <!-- left -->
                <div class="w-full space-y-6 md:w-[55%]">
                    <!-- Header -->
                    <div class="space-y-4">
                        <div>
                            <h2 class="text-[18px] font-semibold text-[#FF4800]">
                                {{ $parent['title'] }}
                            </h2>
                            <h1 class="text-[35px] font-bold">
                                {{ $parent['sub title'] }}
                            </h1>
                        </div>
                        <p class="text-[14px]">
                            {{ $parent['description'] }}
                        </p>
                    </div>
                    <div class="swiper swiperHistory">
                        <div class="swiper-wrapper border-b">
                            @foreach ($child as $key => $value)
                                <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-[#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]">
                                        {{ $value['header'] }}
                                    </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 ? '' : 'fade-content hidden' }}">
                                <div class="flex flex-col-reverse gap-4 sm:flex-row">
                                    <div class="sm:w-[50%]">
                                        <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>
                                    <div class="sm:w-[50%]">
                                        <img src="{{ 'images/' . $value['image'] }}" alt="mission"
                                            class="max-h-[200px] min-h-[150px] object-contain" />
                                    </div>
                                </div>
                            </div>
                        @endforeach



                    </div>
                </div>
                <!-- right -->
                <div class="image-container w-full md:w-[45%]">
                    <img src="{{ 'images/' . $parent['image'] }}" alt="company-history"
                        class="max-h-[600px] min-h-[300px] w-full object-contain" />
                </div>
            </div>
        @endif

    </section>