@php
    use App\Helpers\Helper;
@endphp

<div id="whyChooseUs-section" class='h-auto bg-brand-gradient w-full font-poppins'>
    <div class='section-y'>
        <div class='flex flex-col space-y-12 items-center'>
            <x-section-heading id="para343-title" tone="dark" align="center" class="w-full max-w-3xl px-6"
                :eyebrow="Helper::contentText('homepage.why_choose_us')" :description="Helper::contentText('homepage.why_choose_us_description')" />
            <!-- ------------------------- Cards Grid Section --------------------------- -->
            <div id="all323-box"
                class="flex overflow-x-auto snap-x snap-mandatory scroll-px-4 scrollbar-none [&::-webkit-scrollbar]:hidden sm:grid sm:overflow-visible w-full max-w-[1280px] px-4 sm:px-6 lg:px-8 sm:justify-items-center sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
                @foreach ($usps as $key => $usp)
                    <a id="para323-box{{ $key }}" href="{{ route('usp-detail', $usp->slug) }}"
                        aria-label="{{ app()->getLocale() == 'en' ? $usp->name_en : (isset($usp->name_np) ? $usp->name_np : $usp->name_en) }}"
                        class="group block shrink-0 snap-center snap-always w-full sm:max-w-sm para232box cursor-pointer min-h-[360px] rounded-[20px] bg-[#4B6860]/40 border border-transparent hover:border-accent hover:shadow-lg transition-[border-color,box-shadow] duration-300">
                        <div class='opacity-100 px-3 py-4 flex flex-col space-y-6 items-left'>
                            <h3 class='font-semibold text-base text-accent'>
                                <i class="{{ isset($usp->icon) ? $usp->icon : '' }}"></i>
                                {{ app()->getLocale() == 'en' ? $usp->name_en : (isset($usp->name_np) ? $usp->name_np : $usp->name_en) }}
                            </h3>
                            <p
                                class='font-poppins font-normal text-background-primary text-base leading-6 tracking-normal line-clamp-2'>
                                {{ app()->getLocale() == 'en' ? $usp->short_description_en : (isset($usp->short_description_np) ? $usp->short_description_np : $usp->short_description_en) }}
                            </p>

                            <div class="w-full h-52 relative">
                                <img loading="lazy" decoding="async" class="w-full h-full object-cover rounded-xl"
                                    src="{{ asset($usp->thumbnail_image) }}" alt="" />

                                {{-- <div
                                    class="absolute bottom-0 right-0 w-0 h-0 border-l-70 border-l-[#4B6860] border-t-70 border-t-transparent transform-[rotateY(541deg)] rounded-b-xl">
                                </div> --}}

                                <span aria-hidden="true"
                                    class="absolute bottom-2 right-2 w-8 h-8 flex items-center justify-center bg-accent rounded-full shadow-md transition-transform duration-200 group-hover:scale-125">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="h-5 w-5 text-primary transform -rotate-45" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <!-- Mobile slide dots -->
            <div id="usp-dots" class="flex sm:hidden items-center gap-1.5 mt-6!"></div>

            <x-see-all :href="route('usps')" tone="dark" />
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            // Mobile swipe dots (track scrolls horizontally below 640px)
            (() => {
                const track = document.getElementById("all323-box");
                const dotsEl = document.getElementById("usp-dots");
                if (!track || !dotsEl) return;
                const cards = Array.from(track.querySelectorAll(".para232box"));
                const on = "inline-block rounded-[3px] cursor-pointer transition-all duration-300 w-5 h-1.5 bg-accent";
                const off = "inline-block rounded-full cursor-pointer transition-all duration-300 w-1.5 h-1.5 bg-white/40";
                let current = 0;

                const paint = () => Array.from(dotsEl.children).forEach((d, i) => d.className = i === current ? on : off);

                cards.forEach((card, i) => {
                    const d = document.createElement("span");
                    d.addEventListener("click", () => card.scrollIntoView({
                        behavior: "smooth",
                        inline: "center",
                        block: "nearest"
                    }));
                    dotsEl.appendChild(d);
                });
                paint();

                track.addEventListener("scroll", () => {
                    const mid = track.scrollLeft + track.clientWidth / 2;
                    let best = 0, bestDist = Infinity;
                    cards.forEach((c, i) => {
                        const dist = Math.abs(c.offsetLeft + c.offsetWidth / 2 - mid);
                        if (dist < bestDist) { bestDist = dist; best = i; }
                    });
                    if (best !== current) { current = best; paint(); }
                }, { passive: true });
            })();

            gsap.registerPlugin(ScrollTrigger);

            // Respect reduced-motion: show everything immediately
            if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

            const ease = "power2.out";

            // Heading pill + description: gentle fade-up, once
            gsap.from("#para343-title", {
                y: 24,
                opacity: 0,
                duration: 0.7,
                ease,
                stagger: 0.12,
                scrollTrigger: {
                    trigger: "#whyChooseUs-section",
                    start: "top 85%",
                    once: true,
                },
            });

            // Cards: smooth staggered fade-up, revealed per row as they scroll in
            const boxes = gsap.utils.toArray(".para232box");
            gsap.set(boxes, { autoAlpha: 0, y: 40 });

            ScrollTrigger.batch(boxes, {
                start: "top 90%",
                once: true,
                onEnter: (batch) =>
                    gsap.to(batch, {
                        autoAlpha: 1,
                        y: 0,
                        duration: 0.7,
                        ease,
                        stagger: 0.12,
                        overwrite: true,
                        clearProps: "transform",
                    }),
            });
        });
    </script>
@endpush