@php
    $categories = ['All', 'Digital Banking', 'Security', 'Payments', 'Product Updates', 'Financial Tips'];
    $posts = config('site_content.blog_posts');
@endphp

@component('layouts.app', [
    'title' => 'Blog',
    'metaDescription' => 'Fintech blog — product updates, security deep-dives, payment technology, and financial tips for commuters.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Company',
        'title' => 'Stories from Fintech',
        'subtitle' => 'Product updates, security explainers, and the occasional story from the road.',
    ])

    <div class="reveal mx-auto -mt-4 mb-4 flex max-w-7xl flex-wrap justify-center gap-2 px-6 text-xs font-semibold">
        <a href="{{ route('blog') }}" class="rounded-lg bg-primary px-3 py-1.5 text-white dark:bg-secondary dark:text-ink">Blog</a>
        <a href="{{ route('news') }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-slate-600 transition hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-300 dark:hover:border-secondary dark:hover:text-secondary">News</a>
        <a href="{{ route('notice') }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-slate-600 transition hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-300 dark:hover:border-secondary dark:hover:text-secondary">Notice Board</a>
    </div>

    <section x-data="{ active: 'All', visibleCount: 6 }" class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="reveal mb-10 flex flex-wrap justify-center gap-2">
                @foreach ($categories as $cat)
                    <button type="button" @click="active = '{{ $cat }}'"
                            :class="active === '{{ $cat }}'
                                ? 'bg-primary text-white dark:bg-secondary dark:text-ink'
                                : 'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                            class="rounded-xl px-4 py-2 text-xs font-semibold transition duration-300">
                        {{ $cat }}
                    </button>
                @endforeach
            </div>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($posts as $i => $post)
                    <a href="{{ route('blog.show', $post['slug']) }}" x-show="(active === 'All' || active === '{{ $post['category'] }}') && {{ $i }} < visibleCount"
                       class="reveal group overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-panel"
                       style="transition-delay: {{ ($i % 3) * 90 }}ms">
                        <div class="aspect-[16/10] overflow-hidden">
                            <img src="https://picsum.photos/seed/{{ $post['img'] }}/500/320"
                                 srcset="https://picsum.photos/seed/{{ $post['img'] }}/500/320 500w, https://picsum.photos/seed/{{ $post['img'] }}/1000/640 1000w"
                                 sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                                 width="500" height="320" alt="{{ $post['title'] }}"
                                 class="h-full w-full object-cover transition duration-500 group-hover:scale-110" loading="lazy">
                        </div>
                        <div class="p-6">
                            <div class="mb-3 flex items-center gap-2 text-xs text-slate-400 dark:text-slate-500">
                                <span class="rounded-full bg-secondary/10 px-2.5 py-1 font-semibold text-secondary-a11y dark:text-secondary">{{ $post['category'] }}</span>
                                <span>{{ $post['date'] }}</span>
                            </div>
                            <h3 class="mb-2 font-heading text-base font-bold text-slate-900 dark:text-white">{{ $post['title'] }}</h3>
                            <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $post['excerpt'] }}</p>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-10 text-center" x-show="visibleCount < {{ count($posts) }}" x-cloak>
                <button type="button" @click="visibleCount += 6"
                        class="rounded-xl border border-slate-200 px-7 py-3 text-sm font-semibold text-slate-700 transition duration-300 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200 dark:hover:border-secondary dark:hover:text-secondary">
                    Load More Articles
                </button>
            </div>
        </div>
    </section>

    <section class="bg-slate-50 py-16 dark:bg-surface">
        <div class="mx-auto max-w-2xl px-6 text-center">
            <p class="reveal mb-2 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">Newsletter</p>
            <h2 class="reveal font-heading text-2xl font-extrabold text-slate-900 dark:text-white">Get updates in your inbox</h2>
            <form data-toast-form data-toast-title="Subscribed!" data-toast-message="You'll get our next update by email." class="reveal mt-6 flex flex-col gap-3 sm:flex-row">
                <label for="newsletter-email" class="sr-only">Email address</label>
                <input id="newsletter-email" name="email" type="email" required placeholder="you@example.com" autocomplete="email"
                       class="flex-1 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-panel dark:text-white dark:focus:border-secondary">
                <button type="submit" class="rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105 dark:bg-secondary dark:text-ink">
                    Subscribe
                </button>
            </form>
        </div>
    </section>
@endcomponent