@php
    $collections = [
        ['title' => 'Artefacts', 'text' => 'Selected cultural objects and heritage catalogue entries.', 'image' => asset('images/Kalakshetra-Profile-1/Gallery Manuscript Painting/DSC_8643-500kb.jpg'), 'url' => url('/artefacts')],
        ['title' => 'Digital Museum', 'text' => 'A focused digital doorway into museum and gallery highlights.', 'image' => asset('images/Kalakshetra-Profile-1/Museum Srimanta Sankardeva/DSC_8791-500kb.jpg'), 'url' => url('/explore-kala')],
        ['title' => 'Gallery', 'text' => 'Campus images, exhibitions, spaces and cultural moments.', 'image' => asset('images/Kalakshetra-Profile-1/Heritage park important fotos/IMG_1232.jpg'), 'url' => url('/gallery')],
        ['title' => 'Publications', 'text' => 'Books and e-publications connected with Kalakshetra resources.', 'image' => asset('images/Kalakshetra-Profile-1/Library/LIBRARY001-500kb.jpg'), 'url' => url('/books')],
    ];
@endphp

<section class="home-pattern-section my-space-xl py-space-lg" id="home-v2-collections">
    <div class="content-container">
        @include('frontend.partials.section-heading', [
            'eyebrow' => 'Explore Our Collections',
            'title' => 'Collections at a Glance',
            'summary' => 'A short preview of collection-led pages already available in the static frontend.',
        ])

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-space-lg">
            @foreach ($collections as $item)
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container shadow-md overflow-hidden h-full group">
                    <div class="h-48 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'] }}">View More <span class="material-symbols-outlined text-sm">east</span></a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>