@component('layouts.app', [
    'title' => 'Mobile App',
    'metaDescription' => 'The Yatra Card 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.'],
                    ['icon' => 'fa-bell', 'title' => 'Live Notifications', 'desc' => 'Get pinged the moment you tap in or out.'],
                    ['icon' => 'fa-clock-rotate-left', 'title' => 'Transaction Timeline', 'desc' => 'Every trip and recharge, in one scrollable feed.'],
                    ['icon' => 'fa-sliders', 'title' => 'Card Management', 'desc' => 'Freeze, recharge, or replace your card in seconds.'],
                ] as $i => $item)
                    <div class="reveal-scale rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 90 }}ms">
                        <div class="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                            <i class="fa-solid {{ $item['icon'] }}"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-sm font-bold 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 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest 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>
            </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('partials.home.download-app')

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-3xl px-6">
            <div class="reveal mx-auto mb-12 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Changelog</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    What's New
                </h2>
            </div>

            <div class="reveal space-y-6">
                @foreach ([
                    ['version' => 'v2.4.0', 'date' => 'Jun 2026', 'notes' => ['Added live tap notifications', 'Faster balance sync', 'Bug fixes for Android 14']],
                    ['version' => 'v2.3.0', 'date' => 'Apr 2026', 'notes' => ['Introduced auto-reload thresholds', 'Redesigned transaction timeline']],
                    ['version' => 'v2.2.0', 'date' => 'Feb 2026', 'notes' => ['Face ID login support', 'Card freeze/unfreeze from home screen']],
                ] as $release)
                    <div class="flex gap-5 border-l-2 border-slate-100 pl-6 dark:border-white/10">
                        <div class="flex-1">
                            <div class="mb-1 flex items-center gap-3">
                                <span class="font-heading text-sm font-bold text-primary dark:text-secondary">{{ $release['version'] }}</span>
                                <span class="text-xs text-slate-400 dark:text-slate-500">{{ $release['date'] }}</span>
                            </div>
                            <ul class="space-y-1">
                                @foreach ($release['notes'] as $note)
                                    <li class="text-sm text-slate-600 dark:text-slate-300">&middot; {{ $note }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

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