@php
    $upcomingEvents = [
        [
            'title' => 'All-Assam Bhaona Samaroh',
            'date' => '24 Oct 2026',
            'type' => 'Dance Drama',
            'location' => 'Ranghar Bakori',
            'image' => asset('images/Kalakshetra-Profile-1/namghar/IMG_0501-500kb.jpg'),
            'description' => 'Traditional Bhaona presentation with music, narration and devotional theatre.',
            'url' => url('/events-news/bhaona-samaroh-2025'),
        ],
        [
            'title' => 'Memorial Music Evening',
            'date' => '05 Nov 2026',
            'type' => 'Concert',
            'location' => 'Open Air Theatre',
            'image' => asset('images/Kalakshetra-Profile-1/Dr BK Kakoti Auditorium/DSC_8681-500kb.jpg'),
            'description' => 'An evening of musical remembrance in Kalakshetra’s performance setting.',
            'url' => url('/events-news/bhupen-hazarika-concert'),
        ],
        [
            'title' => 'Northeast Handloom Pavilion',
            'date' => '12 Dec 2026',
            'type' => 'Expo',
            'location' => 'Artist Village',
            'image' => asset('images/Kalakshetra-Profile-1/Artist_s-village/Artist Village 2-500kb.jpg'),
            'description' => 'A cultural pavilion celebrating handloom, craft and community traditions.',
            'url' => url('/events-news/handloom-pavilion'),
        ],
    ];
@endphp

<section class="content-container my-space-xl py-space-md" id="upcoming-events">
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-space-lg gap-space-md">
        <div>
            <span class="font-label-md text-label-md text-primary tracking-widest uppercase block mb-space-xs">Upcoming Events</span>
            <h2 class="font-headline-xl text-headline-xl text-on-surface font-semibold">Programmes Coming Up</h2>
        </div>
        <a class="inline-flex items-center gap-2 px-space-lg py-2.5 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors"
            href="{{ url('/events-news') }}">
            <span>View All Events</span>
            <span class="material-symbols-outlined text-sm">east</span>
        </a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg upcoming-events-grid">
        @foreach ($upcomingEvents as $event)
            <article class="upcoming-event-card bg-surface-container-lowest rounded-xl border border-surface-container shadow-md overflow-hidden flex flex-col h-full">
                <div class="upcoming-event-media overflow-hidden">
                    <img class="w-full h-full object-cover" src="{{ $event['image'] }}" alt="{{ $event['title'] }}">
                </div>
                <div class="upcoming-event-body p-space-md flex flex-col flex-1">
                    <div class="flex items-center justify-between gap-2 mb-space-xs">
                        <span class="px-3 py-1 rounded bg-primary-fixed text-primary font-label-sm text-label-sm font-bold">{{ $event['date'] }}</span>
                        <span class="text-xs bg-surface-container px-2 py-0.5 rounded text-on-surface-variant font-medium">{{ $event['type'] }}</span>
                    </div>
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">{{ $event['title'] }}</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mt-2 mb-space-sm">{{ $event['description'] }}</p>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mt-auto mb-0">Venue: {{ $event['location'] }}</p>
                    <a class="font-title-md text-title-md text-primary font-bold inline-flex items-center gap-1 mt-space-sm"
                        href="{{ $event['url'] }}">View Details <span class="material-symbols-outlined text-sm">east</span></a>
                </div>
            </article>
        @endforeach
    </div>
</section>