@php
    $events = [
        ['title' => 'All-Assam Bhaona Samaroh', 'date' => '24 Oct 2026', 'image' => asset('images/Kalakshetra-Profile-1/namghar/IMG_0501-500kb.jpg'), 'text' => 'Traditional Bhaona presentation with music, narration and devotional theatre.', 'url' => url('/events-news/bhaona-samaroh-2025')],
        ['title' => 'Memorial Music Evening', 'date' => '05 Nov 2026', 'image' => asset('images/Kalakshetra-Profile-1/Dr BK Kakoti Auditorium/DSC_8681-500kb.jpg'), 'text' => 'An evening of musical remembrance in Kalakshetra performance setting.', 'url' => url('/events-news/bhupen-hazarika-concert')],
        ['title' => 'Northeast Handloom Pavilion', 'date' => '12 Dec 2026', 'image' => asset('images/Kalakshetra-Profile-1/Artist_s-village/Artist Village 2-500kb.jpg'), 'text' => '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="home-v2-news">
    <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 uppercase block mb-space-xs">News & Events</span>
            <h2 class="font-headline-xl text-headline-xl text-on-surface font-semibold">Upcoming Programmes</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') }}">View All News & Events</a>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg">
        <div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-3 gap-space-lg">
            @foreach ($events as $event)
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container shadow-md overflow-hidden h-full">
                    <div class="h-48 overflow-hidden">
                        <img class="w-full h-full object-cover" src="{{ $event['image'] }}" alt="{{ $event['title'] }}">
                    </div>
                    <div class="p-space-md">
                        <span class="font-label-sm text-label-sm text-primary font-bold">{{ $event['date'] }}</span>
                        <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold mt-1">{{ $event['title'] }}</h3>
                        <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">{{ $event['text'] }}</p>
                        <a class="font-title-md text-title-md text-primary font-bold inline-flex items-center gap-1"
                            href="{{ $event['url'] }}">Read More <span class="material-symbols-outlined text-sm">east</span></a>
                    </div>
                </article>
            @endforeach
        </div>
        <aside class="lg:col-span-4 bg-tertiary text-on-tertiary rounded-xl p-space-lg shadow-md border border-tertiary-fixed-dim/30">
            <span class="font-label-sm text-label-sm text-tertiary-fixed uppercase block mb-space-xs">Unique Work by SSKS</span>
            <h3 class="font-headline-sm text-headline-sm text-tertiary-fixed font-bold">Life Journey of Srimanta Sankaradeva</h3>
            <p class="font-body-sm text-body-sm text-on-tertiary-container leading-relaxed">
                Illustrated interpretation of the saint-scholar reformer's life journey for public learning.
            </p>
            <a class="inline-flex items-center gap-1 px-space-md py-2 bg-tertiary-container text-tertiary-fixed font-title-md text-title-md rounded hover:bg-tertiary-fixed hover:text-on-tertiary-fixed transition-colors"
                href="{{ url('/explore-kala') }}">Explore <span class="material-symbols-outlined text-sm">east</span></a>
        </aside>
    </div>
</section>