@component('layouts.app', [
    'title' => 'News',
    'metaDescription' => 'Company announcements, partnerships, and press coverage from Fintech.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Company',
        'title' => 'Fintech News',
        'subtitle' => 'Announcements, partnerships, and milestones from the team building cashless transit for Nepal.',
    ])

    <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 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">Blog</a>
        <a href="{{ route('news') }}" class="rounded-lg bg-primary px-3 py-1.5 text-white dark:bg-secondary dark:text-ink">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 class="py-16 dark:bg-ink lg:py-24">
        <div class="mx-auto max-w-5xl px-6">
            <div class="space-y-6">
                @foreach ($items as $i => $item)
                    <a href="{{ route('news.show', $item['slug']) }}"
                       class="reveal group flex flex-col gap-5 overflow-hidden rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-panel sm:flex-row"
                       style="transition-delay: {{ ($i % 4) * 90 }}ms">
                        <div class="aspect-[16/10] w-full flex-shrink-0 overflow-hidden rounded-xl sm:w-56">
                            <img src="https://picsum.photos/seed/{{ $item['img'] }}/450/280"
                                 srcset="https://picsum.photos/seed/{{ $item['img'] }}/450/280 450w, https://picsum.photos/seed/{{ $item['img'] }}/900/560 900w"
                                 sizes="(min-width: 640px) 224px, 100vw"
                                 width="450" height="280" alt="{{ $item['title'] }}" loading="lazy"
                                 class="h-full w-full object-cover transition duration-500 group-hover:scale-110">
                        </div>
                        <div class="flex flex-1 flex-col justify-center">
                            <div class="mb-2 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">{{ $item['category'] }}</span>
                                <span><i class="fa-regular fa-calendar mr-1" aria-hidden="true"></i>{{ $item['date'] }}</span>
                            </div>
                            <h2 class="mb-1.5 font-heading text-lg font-bold text-slate-900 dark:text-white">{{ $item['title'] }}</h2>
                            <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $item['excerpt'] }}</p>
                            <span class="mt-3 inline-flex items-center gap-1.5 text-xs font-semibold text-primary dark:text-secondary">
                                Read Full Story <i class="fa-solid fa-arrow-right text-[10px]" aria-hidden="true"></i>
                            </span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

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