@component('layouts.app', [
    'title' => "What's New",
    'metaDescription' => 'The latest Fintech app updates — new features, improvements, and fixes in every release.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Changelog',
        'title' => "What's New",
        'subtitle' => 'Every update we ship to the Fintech app, in one place.',
    ])

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-3xl px-6">
            <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('frontend.partials.home.cta')
@endcomponent