@props([
    'testimonials', // collection of Testimonial
    'uid' => 'home', // unique per slider on a page
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'seeAll' => null, // optional URL for a "See all" button
])

{{--
    Testimonials slider: intro + dots on the left, cards on the right, image opens a modal with the full text.
    Used by the homepage and by the Testimonials page so both look the same.
    Usage: <x-testimonial-slider :testimonials="$items" uid="guardian" eyebrow="..." title="..." description="..." />
--}}
@php
    use App\Helpers\Helper;
    use App\Enum\PerspectiveFromEnum;
    $count = $testimonials->count();
@endphp

@if ($count > 0)
    <div id="testimonials-{{ $uid }}" data-motion="off"
        class="testimonial-section overflow-hidden px-4 sm:px-6 lg:px-[max(2rem,calc((100%_-_1280px)/2))] section-y flex flex-col lg:flex-row lg:gap-12">
        {{-- Intro --}}
        <div class="testimonial-desc w-full h-auto self-start lg:w-[40%]">
            <div class="flex flex-col space-y-4">
                <x-section-heading align="left" :eyebrow="$eyebrow" :title="$title" :description="$description"
                    class="!mb-0" />

                <div class="flex flex-row items-center justify-start gap-4 pt-4" aria-hidden="true">
                    <div class="testimonial-pagination flex items-center gap-2"></div>
                </div>

                @if ($seeAll)
                    <x-see-all :href="$seeAll" class="self-start mt-2" />
                @endif
            </div>
        </div>

        {{-- Cards --}}
        <div class="testimonial-cards w-full min-w-0 lg:w-[60%]">
            <div class="swiper w-full flex flex-col space-y-3 bg-transparent">
                <div class="swiper-wrapper bg-transparent py-6">
                    @foreach ($testimonials as $testimonial)
                        @php
                            $role = $testimonial->perspective_from == PerspectiveFromEnum::ALUMNI->value
                                ? __('pages.batch_of') . ' ' . optional($testimonial->alumni)->batch
                                : PerspectiveFromEnum::map($testimonial->perspective_from);
                        @endphp
                        <div
                            data-testimonial class="swiper-slide !h-auto bg-white relative flex flex-col border-none rounded-xl shadow-lg overflow-visible transition-all duration-300 ease-in-out">
                            <div class="w-full h-52 shrink-0 relative">
                                <button type="button"
                                    class="testimonial-zoom block w-full h-full rounded-tl-xl rounded-tr-xl overflow-hidden cursor-zoom-in group"
                                    data-src="{{ asset($testimonial->image) }}"
                                    data-name="{{ $testimonial->full_name }}" data-role="{{ $role }}"
                                    aria-label="View image of {{ $testimonial->full_name }}">
                                    <img loading="lazy" decoding="async"
                                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                                        src="{{ asset($testimonial->image) }}" alt="{{ $testimonial->full_name }}" />
                                </button>
                                <div
                                    class="bg-secondary absolute bottom-[-1.5rem] left-6 flex items-center justify-center w-12 h-12 rounded-full">
                                    <i class="fa-solid fa-quote-left text-accent"></i>
                                </div>
                            </div>

                            <div class="flex flex-col flex-1 justify-between px-5 pt-10 pb-6 gap-6">
                                <div class="testimonial-text font-medium text-black text-sm leading-relaxed">
                                    {!! Helper::stripInlineStyle($testimonial->testimonial_text) !!}
                                </div>

                                <div class="flex flex-col space-y-1">
                                    <p class="font-semibold text-sm text-primary">{{ $testimonial->full_name }}</p>
                                    <span class="text-black font-medium text-sm">{{ $role }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    @once
        @push('styles')
            <style>
                .testimonial-section .testimonial-bullet {
                    width: 8px;
                    height: 8px;
                    border-radius: 9999px;
                    background: #044335;
                    opacity: 0.25;
                    cursor: pointer;
                    transition: opacity 0.3s ease, width 0.3s ease;
                }

                .testimonial-section .testimonial-bullet-active {
                    opacity: 1;
                    width: 22px;
                }
            </style>
        @endpush
    @endonce

    <x-testimonial-modal />

    @push('scripts')
        <script>
            (function() {
                const root = "#testimonials-{{ $uid }}";

                if (window.gsap && window.ScrollTrigger && !window.matchMedia("(prefers-reduced-motion: reduce)")
                    .matches) {
                    gsap.registerPlugin(ScrollTrigger);
                    gsap.from(root + " .testimonial-desc, " + root + " .testimonial-cards", {
                        y: 30,
                        opacity: 0,
                        duration: 0.8,
                        ease: "power2.out",
                        stagger: 0.1,
                        scrollTrigger: {
                            trigger: root,
                            start: "top 85%",
                            once: true
                        }
                    });
                }

                new Swiper(root + " .swiper", {
                    loop: {{ $count > 2 ? 'true' : 'false' }},
                    pagination: {
                        el: root + " .testimonial-pagination",
                        clickable: true,
                        bulletClass: "testimonial-bullet",
                        bulletActiveClass: "testimonial-bullet-active"
                    },
                    watchOverflow: true,
                    autoplay: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? false : {
                        delay: 5000,
                        disableOnInteraction: false,
                        pauseOnMouseEnter: true
                    },
                    breakpoints: {
                        0: {
                            slidesPerView: 1,
                            spaceBetween: 20
                        },
                        1024: {
                            slidesPerView: 2,
                            spaceBetween: 20
                        },
                    }
                });
            })();
        </script>
    @endpush
@endif