@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => 'Explore Kala',
        'eyebrow' => 'Cultural Hub of Assam',
        'summary' => 'A static visitor gateway to the museums, galleries, performance spaces and cultural experiences of Srimanta Sankaradeva Kalakshetra.',
        'image' => $heroImage,
        'breadcrumbs' => ['Explore Kala' => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        @include('frontend.partials.section-heading', [
            'eyebrow' => 'Explore Kala',
            'title' => 'Discover the Kalakshetra Experience',
            'summary' => 'Use this page as a focused starting point for the cultural spaces that are already available in the current static frontend.',
        ])

        <div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg mb-space-xl">
            <article class="bg-surface-container-lowest rounded-xl p-space-md shadow-sm border border-surface-container">
                <span class="material-symbols-outlined text-primary mb-space-sm">museum</span>
                <h2 class="font-headline-sm text-headline-sm text-on-surface font-bold">Museums</h2>
                <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mb-space-md">
                    Explore museum pages dedicated to cultural memory, Sankaradeva heritage, portraits, literature and collection displays.
                </p>
                <a class="inline-flex items-center gap-1 px-space-md py-2 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors"
                    href="{{ url('/museums') }}">
                    <span>View Museums</span>
                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                </a>
            </article>

            <article class="bg-surface-container-lowest rounded-xl p-space-md shadow-sm border border-surface-container">
                <span class="material-symbols-outlined text-tertiary mb-space-sm">theater_comedy</span>
                <h2 class="font-headline-sm text-headline-sm text-on-surface font-bold">Facilities</h2>
                <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mb-space-md">
                    Find major venues and visitor facilities, including the International Convention Centre and event-ready spaces.
                </p>
                <a class="inline-flex items-center gap-1 px-space-md py-2 bg-tertiary-container text-on-tertiary font-title-md text-title-md rounded hover:bg-tertiary transition-colors"
                    href="{{ url('/facilities') }}">
                    <span>View Facilities</span>
                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                </a>
            </article>

            <article class="bg-surface-container-lowest rounded-xl p-space-md shadow-sm border border-surface-container">
                <span class="material-symbols-outlined text-primary mb-space-sm">event_seat</span>
                <h2 class="font-headline-sm text-headline-sm text-on-surface font-bold">Halls & Auditorium</h2>
                <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mb-space-md">
                    Browse confirmed auditorium content already available in the current static frontend.
                </p>
                <a class="inline-flex items-center gap-1 px-space-md py-2 bg-secondary text-on-secondary font-title-md text-title-md rounded hover:bg-primary transition-colors"
                    href="{{ url('/facilities/halls-auditorium') }}">
                    <span>View Halls</span>
                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                </a>
            </article>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-space-xl">
            <div>
                @include('frontend.partials.section-heading', [
                    'eyebrow' => 'Museum Highlights',
                    'title' => 'Start With Existing Museum Pages',
                    'summary' => 'These are reused from the current approved static museum content.',
                ])
                <div class="grid grid-cols-1 gap-space-md">
                    @foreach ($museums as $museum)
                        @include('frontend.partials.cards', ['item' => $museum + ['button' => 'Explore']])
                    @endforeach
                </div>
            </div>

            <div>
                @include('frontend.partials.section-heading', [
                    'eyebrow' => 'Facilities',
                    'title' => 'Visitor and Venue Spaces',
                    'summary' => 'Existing facility pages are reused here without adding backend functionality.',
                ])
                <div class="grid grid-cols-1 gap-space-md">
                    @foreach ($facilities as $facility)
                        @include('frontend.partials.cards', ['item' => $facility + ['button' => 'Know More']])
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection