@php
    $promoSlides = [
        [
            'badge' => 'Launch Offer',
            'title' => '10% Bonus on Your First Recharge',
            'desc' => 'Top up your Fintech card for the first time and get 10% extra balance, on us.',
            'cta' => 'Recharge Now',
            'route' => 'recharge',
            'image' => 'yatra-promo-recharge',
        ],
        [
            'badge' => 'Refer & Earn',
            'title' => 'Invite Friends, Earn NPR 50 Each',
            'desc' => 'Share your referral code — you and your friend both get a bonus when they ride.',
            'cta' => 'View Rewards',
            'route' => 'rewards',
            'image' => 'yatra-promo-refer',
        ],
        [
            'badge' => 'Student Discount',
            'title' => '20% Off With Your Student ID',
            'desc' => 'Verified students save on every single trip, automatically.',
            'cta' => 'Check Eligibility',
            'route' => 'rewards',
            'image' => 'yatra-promo-student',
        ],
        [
            'badge' => "What's New",
            'title' => 'Get Notified the Instant You Tap In',
            'desc' => 'Live push notifications now confirm every tap, in real time.',
            'cta' => "See What's New",
            'route' => 'whats-new',
            'image' => 'yatra-promo-notify',
        ],
    ];
@endphp

<div x-data="{ open: true }"
     x-show="open"
     x-cloak
     x-effect="document.body.classList.toggle('overflow-hidden', open)"
     @keydown.escape.window="open = false"
     class="fixed inset-0 z-[100] flex items-center justify-center p-4">

    <div x-show="open"
         x-transition:enter="transition duration-300 ease-out"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition duration-200 ease-in"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="open = false"
         aria-hidden="true"
         class="absolute inset-0 bg-slate-900/70 backdrop-blur-sm"></div>

    <div x-show="open"
         x-trap="open"
         role="dialog"
         aria-modal="true"
         aria-labelledby="promo-popup-title"
         x-transition:enter="transition duration-300 ease-out"
         x-transition:enter-start="opacity-0 scale-95 translate-y-4"
         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
         x-transition:leave="transition duration-200 ease-in"
         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
         x-transition:leave-end="opacity-0 scale-95 translate-y-4"
         class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto overflow-x-hidden rounded-3xl bg-white shadow-2xl dark:bg-panel sm:max-w-xl lg:max-w-3xl">

        <h2 id="promo-popup-title" class="sr-only">Fintech offers and updates</h2>

        <button type="button" @click="open = false" aria-label="Close"
                class="absolute right-4 top-4 z-10 grid h-11 w-11 place-items-center rounded-full bg-black/30 text-white backdrop-blur transition duration-200 hover:bg-black/50 active:scale-90">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </button>

        <button type="button" data-swiper-autoplay-toggle="promo-popup-swiper" aria-pressed="false" aria-label="Pause offer carousel"
                class="swiper-autoplay-toggle absolute left-4 top-4 z-10 grid h-11 w-11 place-items-center rounded-full bg-black/30 text-white backdrop-blur transition duration-200 hover:bg-black/50 active:scale-90">
            <i class="fa-solid fa-pause text-sm swiper-autoplay-icon-pause"></i>
            <i class="fa-solid fa-play text-sm swiper-autoplay-icon-play hidden"></i>
        </button>

        <div class="swiper promo-popup-swiper [--swiper-pagination-bullet-inactive-color:rgba(255,255,255,0.5)] [--swiper-pagination-color:#ffffff]">
            <div class="swiper-wrapper">
                @foreach ($promoSlides as $slide)
                    <div class="swiper-slide">
                        <div class="relative aspect-[4/3] w-full sm:aspect-[16/10]">
                            <img src="https://picsum.photos/seed/{{ $slide['image'] }}/900/675"
                                 srcset="https://picsum.photos/seed/{{ $slide['image'] }}/900/675 900w, https://picsum.photos/seed/{{ $slide['image'] }}/1800/1350 1800w"
                                 sizes="(min-width: 1024px) 768px, (min-width: 640px) 576px, 100vw"
                                 alt=""
                                 width="900" height="675" loading="lazy"
                                 class="absolute inset-0 h-full w-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent"></div>

                            <div class="absolute inset-x-0 bottom-0 p-6 pb-14 text-white">
                                <span class="mb-2 inline-block rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide backdrop-blur">
                                    {{ $slide['badge'] }}
                                </span>
                                <h3 class="mb-1.5 font-heading text-xl font-extrabold leading-tight">{{ $slide['title'] }}</h3>
                                <p class="mb-4 text-sm leading-relaxed text-white/80">{{ $slide['desc'] }}</p>
                                <a href="{{ route($slide['route']) }}"
                                   class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 shadow-lg transition duration-300 hover:scale-105">
                                    {{ $slide['cta'] }}
                                    <i class="fa-solid fa-arrow-right text-xs" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>