@component('layouts.app', [
    'title' => $notice['title'],
    'metaDescription' => $notice['summary'],
])
    @include('partials.page-hero', [
        'eyebrow' => $notice['category'] . ' · ' . $notice['number'],
        'title' => $notice['title'],
        'subtitle' => $notice['summary'],
    ])

    <section class="pb-20 dark:bg-ink lg:pb-28">
        <div class="mx-auto max-w-3xl px-6">
            <a href="{{ route('notice') }}" class="reveal mb-8 inline-flex items-center gap-2 text-sm font-semibold text-slate-500 transition hover:text-primary dark:text-slate-400 dark:hover:text-secondary">
                <i class="fa-solid fa-arrow-left text-xs" aria-hidden="true"></i> Back to Notice Board
            </a>

            @if ($notice['urgent'])
                <div class="reveal mb-6 flex items-start gap-3 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-400">
                    <i class="fa-solid fa-triangle-exclamation mt-0.5" aria-hidden="true"></i>
                    <p><span class="font-semibold">Urgent Notice</span> — this update requires immediate customer attention.</p>
                </div>
            @endif

            <div class="reveal mb-8 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-panel">
                <div>
                    <p class="text-[10px] font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">Notice Number</p>
                    <p class="font-mono text-sm font-semibold text-slate-800 dark:text-white">{{ $notice['number'] }}</p>
                </div>
                <div>
                    <p class="text-[10px] font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">Category</p>
                    <p class="text-sm font-semibold text-slate-800 dark:text-white">{{ $notice['category'] }}</p>
                </div>
                <div>
                    <p class="text-[10px] font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">Published</p>
                    <p class="text-sm font-semibold text-slate-800 dark:text-white">{{ $notice['date'] }}</p>
                </div>
                <button type="button"
                        onclick="window.showToast && window.showToast('Download Started', 'The official PDF copy of this notice is downloading.', 'fa-file-arrow-down')"
                        class="inline-flex items-center gap-2 rounded-xl border border-slate-200 px-4 py-2.5 text-xs 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">
                    <i class="fa-solid fa-file-pdf text-red-500" aria-hidden="true"></i> Download PDF
                </button>
            </div>

            <article class="reveal prose prose-slate max-w-none dark:prose-invert">
                @foreach ($notice['body'] as $paragraph)
                    <p class="mb-5 text-[15px] leading-relaxed text-slate-600 dark:text-slate-300">{{ $paragraph }}</p>
                @endforeach
            </article>

            <div class="reveal mt-10 flex items-start gap-3 rounded-2xl border border-slate-100 bg-slate-50 p-5 text-sm text-slate-600 dark:border-white/10 dark:bg-surface dark:text-slate-300">
                <i class="fa-solid fa-circle-question mt-0.5 text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>
                <p>Questions about this notice? Contact our <a href="{{ route('contact') }}" class="font-semibold text-primary underline dark:text-secondary">Grievance Officer</a> or visit the <a href="{{ route('faq') }}" class="font-semibold text-primary underline dark:text-secondary">FAQ page</a>.</p>
            </div>
        </div>
    </section>

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