@component('layouts.app', [
    'title' => 'Notice Board',
    'metaDescription' => 'Official notices, circulars, and public disclosures from Fintech Pvt. Ltd., a Nepal Rastra Bank licensed Payment Service Provider.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Regulatory',
        'title' => 'Notice Board',
        'subtitle' => 'Official notices, circulars, and public disclosures published by Fintech Pvt. Ltd.',
    ])

    <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 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 bg-primary px-3 py-1.5 text-white dark:bg-secondary dark:text-ink">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="reveal mb-8 flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
                <i class="fa-solid fa-circle-info mt-0.5 text-amber-500" aria-hidden="true"></i>
                <p>This board carries official notices required to be disclosed by Fintech Pvt. Ltd. as an NRB-licensed Payment Service Provider. Notices marked <span class="font-semibold">Urgent</span> require immediate customer attention.</p>
            </div>

            <div class="space-y-4">
                @foreach ($notices as $i => $notice)
                    <a href="{{ route('notice.show', $notice['slug']) }}"
                       class="reveal group flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-panel sm:flex-row sm:items-center sm:justify-between"
                       style="transition-delay: {{ ($i % 6) * 70 }}ms">
                        <div class="flex items-start gap-4">
                            <span class="mt-0.5 grid h-11 w-11 flex-shrink-0 place-items-center rounded-xl {{ $notice['urgent'] ? 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400' : 'bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary' }}">
                                <i class="fa-solid {{ $notice['urgent'] ? 'fa-triangle-exclamation' : 'fa-file-lines' }}" aria-hidden="true"></i>
                            </span>
                            <div>
                                <div class="mb-1 flex flex-wrap items-center gap-2 text-xs text-slate-400 dark:text-slate-500">
                                    <span class="font-mono font-semibold text-slate-500 dark:text-slate-400">{{ $notice['number'] }}</span>
                                    <span class="rounded-full bg-slate-100 px-2 py-0.5 font-semibold text-slate-600 dark:bg-white/10 dark:text-slate-300">{{ $notice['category'] }}</span>
                                    @if ($notice['urgent'])
                                        <span class="rounded-full bg-red-100 px-2 py-0.5 font-semibold text-red-700 dark:bg-red-500/15 dark:text-red-400">Urgent</span>
                                    @endif
                                </div>
                                <h2 class="font-heading text-base font-bold text-slate-900 dark:text-white">{{ $notice['title'] }}</h2>
                                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $notice['summary'] }}</p>
                            </div>
                        </div>
                        <div class="flex flex-shrink-0 items-center gap-2 pl-14 text-xs font-semibold text-slate-400 dark:text-slate-500 sm:pl-0">
                            <i class="fa-regular fa-calendar" aria-hidden="true"></i> {{ $notice['date'] }}
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

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