{{-- Upcoming Events Widget - Warm Golden Aesthetic --}}
@if(isset($upcomingEvents) && $upcomingEvents->isNotEmpty())
<div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-stone-100 flex items-center justify-between">
        <h3 class="font-bold text-stone-800 text-sm">Upcoming Events</h3>
        <a href="{{ route('academic-calendar.index') }}" class="text-[10px] text-amber-600 hover:underline font-semibold">View All →</a>
    </div>
    @foreach($upcomingEvents as $event)
    @php
        $daysUntil = now()->startOfDay()->diffInDays($event->start_date, false);
    @endphp
    <a href="{{ route('academic-calendar.index') }}" class="flex items-center gap-3 px-5 py-3 hover:bg-stone-50 border-b border-stone-50 last:border-0 transition">
        <div class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: {{ $event->color }}"></div>
        <div class="flex-1 min-w-0">
            <p class="text-sm font-semibold text-stone-700 truncate">{{ $event->title }}</p>
            <p class="text-[11px] text-stone-400">{{ $event->start_date->format('d M, Y') }}</p>
        </div>
        <div class="flex-shrink-0">
            @if($daysUntil <= 0)
            <span class="text-[9px] font-bold bg-red-100 text-red-600 px-1.5 py-0.5 rounded">TODAY</span>
            @elseif($daysUntil === 1)
            <span class="text-[9px] font-bold bg-amber-100 text-amber-600 px-1.5 py-0.5 rounded">TOMORROW</span>
            @else
            <span class="text-[10px] font-semibold text-stone-400">{{ $daysUntil }}d</span>
            @endif
        </div>
        <i class="fas fa-chevron-right text-stone-300 text-[10px]"></i>
    </a>
    @endforeach
</div>
@endif