@php
    $notifications = [
        ['date' => '18 Sep 2026', 'title' => 'Visitor advisory and campus timing notice', 'type' => 'Notice', 'url' => url('/contact')],
        ['date' => '12 Sep 2026', 'title' => 'Tender notice for campus services', 'type' => 'Tender', 'url' => url('/tenders')],
        ['date' => '05 Sep 2026', 'title' => 'Recruitment notification', 'type' => 'Recruitment'],
    ];
@endphp

<section class="home-pattern-section my-space-xl py-space-lg" id="latest-notifications">
    <div class="content-container grid grid-cols-1 lg:grid-cols-12 gap-space-lg items-start">
        <div class="lg:col-span-4">
            <span class="font-label-md text-label-md text-primary tracking-widest uppercase block mb-space-xs">Latest Notifications</span>
            <h2 class="font-headline-xl text-headline-xl text-on-surface font-semibold">Official Updates</h2>
            <p class="font-body-md text-body-md text-on-surface-variant mt-space-xs">
                Important visitor advisories, tender updates and institutional notifications.
            </p>
        </div>
        <div class="lg:col-span-8 grid grid-cols-1 gap-space-sm">
            @foreach ($notifications as $notification)
                <article class="bg-surface-container-lowest rounded-lg border border-surface-container shadow-sm p-space-md flex flex-col md:flex-row md:items-center justify-between gap-space-md">
                    <div>
                        <div class="flex items-center gap-2 mb-1">
                            <span class="font-label-sm text-label-sm text-primary font-bold">{{ $notification['date'] }}</span>
                            <span class="text-xs bg-surface-container px-2 py-0.5 rounded text-on-surface-variant">{{ $notification['type'] }}</span>
                        </div>
                        <h3 class="font-title-md text-title-md text-on-surface font-bold mb-0">{{ $notification['title'] }}</h3>
                    </div>
                    @if (!empty($notification['url']))
                        <a class="inline-flex items-center justify-center gap-1 px-space-md py-2 bg-primary-container text-on-primary font-label-md text-label-md rounded hover:bg-primary transition-colors"
                            href="{{ $notification['url'] }}">View</a>
                    @else
                        <button class="nav-disabled px-space-md py-2 bg-surface-container text-outline font-label-md text-label-md rounded"
                            type="button" disabled>PDF Pending</button>
                    @endif
                </article>
            @endforeach
        </div>
    </div>
</section>