@php
    $categories = ['All', 'Digital Banking', 'Security', 'Payments', 'Product Updates', 'Financial Tips'];
    $posts = [
        ['title' => 'How NFC Tap-to-Pay Actually Works', 'category' => 'Payments', 'date' => 'Jun 12, 2026', 'img' => 1011, 'excerpt' => 'A behind-the-scenes look at what happens in the 300 milliseconds after you tap your card.'],
        ['title' => 'Yatra Card Now Live on 500+ Buses', 'category' => 'Product Updates', 'date' => 'May 28, 2026', 'img' => 1005, 'excerpt' => 'We have crossed 500 partner buses across the Kathmandu Valley — here is what is next.'],
        ['title' => 'Keeping Your Card Data Safe', 'category' => 'Security', 'date' => 'May 14, 2026', 'img' => 1015, 'excerpt' => 'Inside the encryption and fraud detection systems protecting every transaction.'],
        ['title' => '5 Ways to Save More on Your Commute', 'category' => 'Financial Tips', 'date' => 'Apr 30, 2026', 'img' => 1025, 'excerpt' => 'Student discounts, loyalty points, and auto-reload bonuses — stacked together.'],
        ['title' => 'Why We Chose NRB Licensing First', 'category' => 'Digital Banking', 'date' => 'Apr 9, 2026', 'img' => 1035, 'excerpt' => 'The regulatory path we took before issuing a single card.'],
        ['title' => 'The Making of the Yatra Card App', 'category' => 'Product Updates', 'date' => 'Mar 22, 2026', 'img' => 1045, 'excerpt' => 'A look at the design decisions behind our most-used feature: live tap notifications.'],
        ['title' => 'What PCI-DSS Level 1 Actually Means', 'category' => 'Security', 'date' => 'Mar 5, 2026', 'img' => 1055, 'excerpt' => 'Demystifying the compliance standard behind every card transaction we process.'],
        ['title' => 'Student Discounts: How Verification Works', 'category' => 'Financial Tips', 'date' => 'Feb 20, 2026', 'img' => 1062, 'excerpt' => 'A step-by-step look at linking your student ID to a Personalized card.'],
        ['title' => 'Inside Our Auto-Reload Engine', 'category' => 'Payments', 'date' => 'Feb 8, 2026', 'img' => 1074, 'excerpt' => 'How we decide when to trigger a reload without ever overcharging your bank.'],
        ['title' => 'A Look at Nepal\'s Digital Banking Shift', 'category' => 'Digital Banking', 'date' => 'Jan 26, 2026', 'img' => 1084, 'excerpt' => 'Why cashless transit is arriving now, and what comes after buses.'],
        ['title' => 'Recharge Counters: Choosing Our First 150', 'category' => 'Product Updates', 'date' => 'Jan 11, 2026', 'img' => 1096, 'excerpt' => 'The data behind where we placed our earliest physical recharge points.'],
        ['title' => 'Budgeting Your Commute the Smart Way', 'category' => 'Financial Tips', 'date' => 'Dec 30, 2025', 'img' => 1101, 'excerpt' => 'Using spending insights to actually lower your monthly transit cost.'],
    ];
@endphp

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

    <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'
                                : '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="#" 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">{{ $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">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">
                <input type="email" required placeholder="you@example.com"
                       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">
                    Subscribe
                </button>
            </form>
        </div>
    </section>
@endcomponent