@php
    $items = [
        ['title' => 'Museums', 'text' => 'Museum spaces presenting cultural memory and heritage displays.', 'image' => asset('images/Kalakshetra-Profile-1/Museum Srimanta Sankardeva/IMG_0318-500kb.jpg'), 'url' => url('/museums')],
        ['title' => 'Attractions', 'text' => 'Campus highlights, gardens and cultural visitor experiences.', 'image' => asset('images/Kalakshetra-Profile-1/Heritage park important fotos/IMG_1235.jpg'), 'url' => url('/explore-kala')],
        ['title' => 'Performances', 'text' => 'Performance spaces connected with music, theatre and festivals.', 'image' => asset('images/Kalakshetra-Profile-1/Gallery on dance form of ne India/IMG_0385-500kb.jpg'), 'url' => url('/events-news')],
        ['title' => 'Heritage', 'text' => 'Built spaces and cultural settings rooted in Assam heritage.', 'image' => asset('images/Kalakshetra-Profile-1/namghar/IMG_0501-500kb.jpg'), 'url' => url('/explore-kala')],
        ['title' => 'Art & Literature', 'text' => 'Art, manuscripts, library resources and literary traditions.', 'image' => asset('images/Kalakshetra-Profile-1/Gallery Manuscript Painting/IMG_9877-500kb.jpg'), 'url' => url('/books')],
    ];
@endphp

<section class="content-container my-space-xl py-space-md" id="home-v2-explore">
    @include('frontend.partials.section-heading', [
        'eyebrow' => 'Explore Kalakshetra',
        'title' => 'A Glimpse of the Campus',
        'summary' => 'Preview key visitor experiences and continue to the relevant detailed pages.',
    ])

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