@aware(['page'])
<div>

    <div class="theme-max-w mx-auto px-5 my-10">
        <div class="text-center mb-10">
            <h2 class="text-4xl font-bold text-zinc-900 lg:w-2/4 mx-auto mb-3">{{$title}}</h2>
            <p class="text-lg text-zinc-400 lg:w-2/4 mx-auto">{!! $description !!}</p>
        </div>
        <div class="swiper team-swiper">
            <div class="swiper-wrapper">
                @foreach(array_reverse($members) as $member)
                    <div class="swiper-slide">
                        <div class="bg-white rounded-lg shadow border border-neutral-300 text-center">
                            <a href="{{asset('storage/'.$member['image'])}}" data-lightbox="our-team">
                                <img src="{{asset('storage/'.$member['image'])}}" alt="Team Member" class="rounded-t-lg mb-3 w-full object-cover" />
                            </a>
                            <div class="text-xl font-bold text-zinc-900 mb-2">{{$member['name']}}</div>
                            <p class="text-lg font-semibold theme-text-blue mb-2">{{$member['designation']}}</p>
                            <p class="text-md text-zinc-400 mb-2">{{$member['description']}}</p>
                            <div class="flex justify-center space-x-3 mb-2">
                                @foreach($member['socialmedia'] as $media)
                                    <a href="{{$media['link']}}" target="_blank" class="text-blue-500 hover:text-blue-600">
                                        <i class="{{$media['media']}} fa-lg"></i>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="swiper-pagination mt-6 text-center"></div>
            <!-- <div class="swiper-button-prev custom-swiper-btn"></div>
            <div class="swiper-button-next custom-swiper-btn"></div> -->

        </div>
    </div>
    @push('inlinescript')
    <script>
        new Swiper(".team-swiper", {
            slidesPerView: 1,
            spaceBetween: 20,
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                },
                768: {
                    slidesPerView: 3,
                },
                1024: {
                    slidesPerView: 4,
                },
                1280: {
                    slidesPerView: 4,
                },
            },
        });
    </script>
    @endpush
</div>