@component('layouts.app', [
    'title' => 'Mobile App',
    'metaDescription' => 'The Fintech app — recharge, check balance, view trip history, freeze your card, and get live tap notifications.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Wallet & Rewards',
        'title' => 'Your Whole Card, In Your Pocket',
        'subtitle' => 'Everything on the physical card — balance, history, controls — lives in the app too, always in sync.',
    ])

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['icon' => 'fa-face-smile', 'title' => 'Face ID Login', 'desc' => 'Open the app instantly with biometric login.', 'theme' => 'blue'],
                    ['icon' => 'fa-bell', 'title' => 'Live Notifications', 'desc' => 'Get pinged the moment you tap in or out.', 'theme' => 'gold'],
                    ['icon' => 'fa-clock-rotate-left', 'title' => 'Transaction Timeline', 'desc' => 'Every trip and recharge, in one scrollable feed.', 'theme' => 'teal'],
                    ['icon' => 'fa-sliders', 'title' => 'Card Management', 'desc' => 'Freeze, recharge, or replace your card in seconds.', 'theme' => 'purple'],
                ] as $i => $item)
                    <div class="glow-card glow-card--{{ $item['theme'] }} glow-card--compact reveal-scale"
                         style="transition-delay: {{ $i * 90 }}ms">
                        <span class="glow-card__glow" aria-hidden="true"></span>
                        <div class="glow-card__icon">
                            <i class="fa-solid {{ $item['icon'] }}"></i>
                        </div>
                        <h3 class="glow-card__title mb-2 text-sm text-slate-900 dark:text-white">{{ $item['title'] }}</h3>
                        <p class="text-xs leading-relaxed text-slate-500 dark:text-slate-400">{{ $item['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @php
        $screens = [
            ['label' => 'Home & Balance', 'icon' => 'fa-house', 'img' => 'yatra-app-1'],
            ['label' => 'Trip History', 'icon' => 'fa-clock-rotate-left', 'img' => 'yatra-app-2'],
            ['label' => 'Card Controls', 'icon' => 'fa-sliders', 'img' => 'yatra-app-3'],
            ['label' => 'Notifications', 'icon' => 'fa-bell', 'img' => 'yatra-app-4'],
        ];
    @endphp

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="reveal mx-auto mb-14 flex max-w-2xl flex-col items-center text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">See It In Action</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    A Quick Look <span class="text-primary dark:text-secondary">Inside the App</span>
                </h2>
                <button type="button" data-swiper-autoplay-toggle="app-screens-swiper" aria-pressed="false" aria-label="Pause app screens autoplay"
                        class="swiper-autoplay-toggle mt-4 grid h-11 w-11 place-items-center rounded-full border border-slate-200 text-slate-500 transition duration-200 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-400">
                    <i class="fa-solid fa-pause text-xs swiper-autoplay-icon-pause"></i>
                    <i class="fa-solid fa-play text-xs swiper-autoplay-icon-play hidden"></i>
                </button>
            </div>

            <div class="reveal swiper app-screens-swiper pb-12">
                <div class="swiper-wrapper items-stretch">
                    @foreach ($screens as $screen)
                        <div class="swiper-slide !w-56">
                            <div class="relative overflow-hidden rounded-[2rem] border-4 border-slate-900 bg-slate-900 p-2 shadow-xl dark:border-white/10">
                                <div class="relative flex aspect-[9/19] flex-col overflow-hidden rounded-[1.5rem] p-4 text-white">
                                    <img src="https://picsum.photos/seed/{{ $screen['img'] }}/300/640"
                                         srcset="https://picsum.photos/seed/{{ $screen['img'] }}/300/640 300w, https://picsum.photos/seed/{{ $screen['img'] }}/600/1280 600w"
                                         sizes="224px"
                                         alt=""
                                         width="300" height="640" loading="lazy"
                                         class="absolute inset-0 h-full w-full object-cover">
                                    <div class="absolute inset-0 bg-gradient-to-b from-primary/80 via-primary/40 to-secondary/80"></div>

                                    <div class="relative mx-auto mb-4 h-1.5 w-10 rounded-full bg-white/40"></div>
                                    <div class="relative grid h-12 w-12 place-items-center rounded-xl bg-white/20 backdrop-blur">
                                        <i class="fa-solid {{ $screen['icon'] }} text-lg"></i>
                                    </div>
                                    <p class="relative mt-4 text-sm font-bold">{{ $screen['label'] }}</p>
                                    <div class="relative mt-4 space-y-2">
                                        <div class="h-3 w-4/5 rounded bg-white/25"></div>
                                        <div class="h-3 w-3/5 rounded bg-white/25"></div>
                                    </div>
                                    <div class="relative mt-auto space-y-2">
                                        <div class="h-10 rounded-lg bg-white/15 backdrop-blur"></div>
                                        <div class="h-10 rounded-lg bg-white/15 backdrop-blur"></div>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 text-center text-xs font-semibold text-slate-500 dark:text-slate-400">{{ $screen['label'] }}</p>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

    @include('frontend.partials.home.download-app')

    @include('frontend.partials.home.cta')
@endcomponent