@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', 'url' => null],
    ];
@endphp

<section class="home-pattern-section my-space-xl py-space-lg" id="home-v2-notifications">
    <div class="content-container">
        @include('frontend.partials.section-heading', [
            'eyebrow' => 'Latest Notifications',
            'title' => 'Official Updates',
            'summary' => 'Static notices reused from the existing frontend presentation.',
        ])

        <div class="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 ($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
                        <span class="font-label-md text-label-md text-outline">Details pending</span>
                    @endif
                </article>
            @endforeach
        </div>
    </div>
</section>