@php
    $downloadUrl = route('download');
    $stores = [
        [
            'key' => 'google',
            'icon' => 'fa-google-play',
            'eyebrow' => 'Get it on',
            'label' => 'Google Play',
            'caption' => 'Launching soon on Google Play.',
            'scanCaption' => 'Scan for Google Play',
            'alt' => 'Fintech app preview styled for Google Play',
            'image' => asset('images/brandings/android.png'),
        ],
        [
            'key' => 'apple',
            'icon' => 'fa-app-store-ios',
            'eyebrow' => 'Download on the',
            'label' => 'App Store',
            'caption' => 'Launching soon on the App Store.',
            'scanCaption' => 'Scan for the App Store',
            'alt' => 'Fintech app preview styled for the App Store',
            'image' => asset('images/brandings/ios.png'),
        ],
    ];
@endphp

<section class="relative overflow-hidden bg-gradient-to-br from-primary via-primary to-secondary py-20 lg:py-28"
    x-data="{
        store: 'google',
        storeUrls: { google: @js($setting->android_app_url), apple: @js($setting->ios_app_url) },
        get storeUrl() { return this.storeUrls[this.store] || @js($downloadUrl); },
    }">
    <div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-white/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-black/10 blur-3xl"></div>

    <div class="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-16 px-6 lg:grid-cols-2">
        <div class="reveal text-white">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-white/70">Download App</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight sm:text-4xl">
                Manage Your Card <br class="hidden sm:block" />From Your Pocket
            </h2>
            <p class="mt-5 max-w-md text-base leading-relaxed text-white/80">
                Recharge, check balance, view trip history, and freeze your card instantly with the
                Fintech mobile app — available on Android and iOS.
            </p>

            <div
                class="mt-8 grid grid-cols-1 gap-2 rounded-2xl bg-white/10 p-1.5 shadow-lg backdrop-blur sm:inline-flex sm:flex-wrap">
                @foreach ($stores as $s)
                    <button type="button" @click="store = '{{ $s['key'] }}'"
                        :aria-pressed="store === '{{ $s['key'] }}'"
                        class="group flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left transition duration-300 sm:w-auto sm:px-5"
                        :class="store === '{{ $s['key'] }}' ? 'bg-white text-slate-900 shadow-lg' :
                            'text-white hover:bg-white/10'">
                        <i class="fa-brands {{ $s['icon'] }} flex-shrink-0 text-xl transition-transform duration-300 group-hover:scale-110 sm:text-2xl"
                            :class="store === '{{ $s['key'] }}' ? 'text-primary' : 'text-white'"></i>
                        <span class="text-sm">
                            <span class="block text-[10px] transition-colors duration-300"
                                :class="store === '{{ $s['key'] }}' ? 'text-slate-500' : 'text-white/60'">{{ $s['eyebrow'] }}</span>
                            <span class="block font-semibold">{{ $s['label'] }}</span>
                        </span>
                    </button>
                @endforeach
            </div>

            {{-- @foreach ($stores as $s)
                <p x-show="store === '{{ $s['key'] }}'" x-cloak
                   x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                   class="mt-3 text-xs text-white/60">{{ $s['caption'] }}</p>
            @endforeach --}}
        </div>

        <div class="reveal flex flex-col items-center gap-5 [transition-delay:150ms]">
            <div class="flex items-end gap-8">
                <!-- App screenshot: only shown once there's room for it alongside the QR card -->
                <div class="relative hidden w-72 lg:block">
                    <div
                        class="relative aspect-[9/19.5] w-full overflow-hidden rounded-2xl shadow-2xl transition duration-500 hover:-translate-y-1 hover:shadow-[0_35px_65px_-15px_rgba(0,0,0,0.45)]">
                        @foreach ($stores as $s)
                            <img src="{{ $s['image'] }}" {{-- srcset="https://picsum.photos/seed/yatra-app-{{ $s['key'] }}/380/820 380w, https://picsum.photos/seed/yatra-app-{{ $s['key'] }}/760/1640 760w" --}} sizes="288px"
                                alt="{{ $s['alt'] }}" width="380" height="820" loading="lazy"
                                class="absolute inset-0 h-full w-full object-cover"
                                x-show="store === '{{ $s['key'] }}'"
                                x-transition:enter="transition duration-500 ease-out"
                                x-transition:enter-start="opacity-0 scale-105"
                                x-transition:enter-end="opacity-100 scale-100"
                                x-transition:leave="transition duration-300 ease-in"
                                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
                        @endforeach
                    </div>
                    <div class="pointer-events-none absolute -bottom-3 left-1/2 h-5 w-44 -translate-x-1/2 rounded-full bg-black/30 blur-md"></div>
                </div>

                <!-- QR card + CTA: primary visual on mobile, sits alongside the app screenshot on larger screens -->
                <div class="flex flex-col items-center gap-4">
                    <!-- Direct CTA above the QR — lets mobile visitors (who can't scan their own screen) tap straight through -->
                    <a :href="storeUrl" target="_blank" rel="noopener"
                        class="inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-primary shadow-lg transition duration-300 hover:scale-105 hover:shadow-xl">
                        <i class="fa-solid fa-qrcode" aria-hidden="true"></i>
                        Get It Now
                    </a>

                    <div class="rounded-2xl bg-white p-4 shadow-xl transition duration-500 hover:-translate-y-1 sm:p-5">
                        <div class="relative grid h-36 w-36 place-items-center sm:h-40 sm:w-40">
                            @foreach ($stores as $s)
                                <img src="{{ asset('images/qr-fintech.png') }}"
                                    alt="QR code to download the Fintech app from {{ $s['label'] }}" width="160"
                                    height="160" loading="lazy" class="absolute inset-0 h-full w-full rounded-xl"
                                    x-show="store === '{{ $s['key'] }}'" x-cloak
                                    x-transition:enter="transition duration-300 ease-out"
                                    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                            @endforeach
                            {{-- <span
                                class="relative grid h-10 w-10 place-items-center rounded-full bg-white shadow-md ring-4 ring-white">
                                <i class="fa-brands text-lg"
                                    :class="store === 'google' ? 'fa-google-play text-primary' : 'fa-apple text-slate-900'"></i>
                            </span> --}}
                        </div>
                        @foreach ($stores as $s)
                            <p x-show="store === '{{ $s['key'] }}'" x-cloak
                                class="mt-3 text-center text-xs font-medium text-slate-500">{{ $s['scanCaption'] }}</p>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>