@php
    $highlights = [
        ['title' => 'Purbajyoti Museum', 'type' => 'Museum', 'text' => 'A digital entry point to tribal life, textiles, royal heritage and sacred objects.', 'url' => url('/facilities'), 'icon' => 'museum'],
        ['title' => 'Artefact Catalogue', 'type' => 'Artefacts', 'text' => 'Selected objects from ritual brass, manuscript and mask traditions prepared for deeper discovery.', 'url' => url('/artefacts'), 'icon' => 'view_in_ar'],
        ['title' => 'Photo Gallery', 'type' => 'Gallery', 'text' => 'Campus images, performances and museum displays organised for public browsing.', 'url' => url('/gallery'), 'icon' => 'photo_library'],
    ];
@endphp

<section class="content-container my-space-xl py-space-md text-on-surface" id="digital-museum-highlights">
    <div>
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center">
            <div class="lg:col-span-5">
                <span class="font-label-md text-label-md text-primary tracking-widest uppercase block mb-space-xs">Digital Museum Highlights</span>
                <h2 class="font-headline-xl text-headline-xl text-on-surface font-semibold">Explore Kalakshetra Digitally</h2>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed mt-space-sm">
                    Explore selected museums, artefacts and gallery experiences through a focused digital doorway.
                </p>
            </div>
            <div class="lg:col-span-7 grid grid-cols-1 md:grid-cols-3 gap-space-md">
                @foreach ($highlights as $highlight)
                    <a class="bg-tertiary-container text-tertiary-fixed rounded-xl border border-tertiary-fixed-dim/30 p-space-md h-full hover:bg-tertiary-fixed hover:text-on-tertiary-fixed transition-colors"
                        href="{{ $highlight['url'] }}">
                        <span class="material-symbols-outlined mb-space-sm">{{ $highlight['icon'] }}</span>
                        <span class="font-label-sm text-label-sm uppercase block opacity-80">{{ $highlight['type'] }}</span>
                        <h3 class="font-headline-sm text-headline-sm font-bold mt-1">{{ $highlight['title'] }}</h3>
                        <p class="font-body-sm text-body-sm mb-0">{{ $highlight['text'] }}</p>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</section>