@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => 'Facilities Available for Public Rental',
        'eyebrow' => 'Public Rental Facilities',
        'summary' => 'Kalakshetra premises facilities available for public rental enquiries.',
        'image' => asset('images/Kalakshetra-Profile-1/International Convention Centre Madhavdeva/Inside-500kb.jpg'),
        'breadcrumbs' => ['Public Rental Facilities' => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        @include('frontend.partials.section-heading', [
            'eyebrow' => 'Kalakshetra Premises',
            'title' => 'Rental Facilities by Category',
            'summary' => 'Review venue categories, available facilities and booking enquiry information.',
        ])

        @foreach ($categories as $category => $items)
            <section class="mb-space-xl" aria-labelledby="rental-category-{{ Str::slug($category) }}">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-space-sm mb-space-md">
                    <div>
                        <span class="font-label-sm text-label-sm text-primary uppercase tracking-widest">Category</span>
                        <h2 class="font-headline-lg text-headline-lg text-on-surface font-bold mb-0" id="rental-category-{{ Str::slug($category) }}">{{ $category }}</h2>
                    </div>
                    <span class="font-body-sm text-body-sm text-outline">{{ count($items) }} facilities</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
                    @foreach ($items as $facility)
                        @include('frontend.partials.rental-facility-card', ['facility' => $facility])
                    @endforeach
                </div>
            </section>
        @endforeach

        <section class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md shadow-sm">
            <span class="font-label-md text-label-md text-primary uppercase tracking-widest">Narayanpur Premises</span>
            <h2 class="font-headline-sm text-headline-sm text-on-surface font-bold mt-space-xs">Narayanpur Facility Information</h2>
            <p class="font-body-md text-body-md text-on-surface-variant mb-0">
                Narayanpur premises rental facilities will be listed here with images, capacity and rental details.
            </p>
        </section>
    </section>
@endsection