@php
    $exhibitions = [
        [
            'title' => 'Living Traditions of Assam',
            'date' => 'Permanent Exhibition',
            'description' => 'A visitor-focused presentation of performance, textile, craft and manuscript traditions across the Kalakshetra campus.',
            'image' => asset('images/Kalakshetra-Profile-1/Gallery on dance form of ne India/IMG_0385-500kb.jpg'),
            'url' => url('/gallery'),
        ],
        [
            'title' => 'Mask, Manuscript and Music',
            'date' => 'Featured Gallery',
            'description' => 'A compact exhibition story linking Bhaona masks, Sanchi manuscripts and Borgeet-inspired cultural documentation.',
            'image' => asset('images/Kalakshetra-Profile-1/Gallery Manuscript Painting/IMG_9877-500kb.jpg'),
            'url' => url('/artefacts'),
        ],
    ];
@endphp

<section class="content-container my-space-xl py-space-md" id="featured-exhibitions">
    @include('frontend.partials.section-heading', [
        'eyebrow' => 'Featured Exhibitions',
        'title' => 'Curated Cultural Showcases',
        'summary' => 'Frontend exhibition highlights prepared for later CMS-backed exhibition management.',
    ])

    <div class="grid grid-cols-1 md:grid-cols-2 gap-space-lg">
        @foreach ($exhibitions as $exhibition)
            <article class="group bg-surface-container-lowest rounded-xl border border-surface-container shadow-md overflow-hidden h-full">
                <div class="h-72 overflow-hidden">
                    <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        src="{{ $exhibition['image'] }}" alt="{{ $exhibition['title'] }}">
                </div>
                <div class="p-space-md">
                    <span class="font-label-sm text-label-sm text-primary uppercase tracking-widest">{{ $exhibition['date'] }}</span>
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold mt-1">{{ $exhibition['title'] }}</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">{{ $exhibition['description'] }}</p>
                    <a class="font-title-md text-title-md text-primary font-bold inline-flex items-center gap-1"
                        href="{{ $exhibition['url'] }}">View Details <span class="material-symbols-outlined text-sm">east</span></a>
                </div>
            </article>
        @endforeach
    </div>
</section>