@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $facility['title'],
        'eyebrow' => $facility['category'],
        'summary' => $facility['summary'],
        'image' => asset($facility['image']),
        'breadcrumbs' => ['Public Rental Facilities' => url('/public-rental-facilities'), $facility['title'] => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center">
            <div class="lg:col-span-7">
                <img class="w-full h-[450px] object-cover rounded-xl shadow-lg" src="{{ asset($facility['image']) }}" alt="{{ $facility['title'] }}">
            </div>
            <div class="lg:col-span-5">
                <span class="font-label-md text-label-md text-primary uppercase tracking-widest">{{ $facility['premises'] }}</span>
                <h2 class="font-headline-lg text-headline-lg text-on-surface font-bold mt-space-xs">{{ $facility['title'] }}</h2>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">{{ $facility['description'] }}</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-space-sm mb-space-md">
                    <div class="bg-surface-container-lowest rounded-lg border border-surface-container p-space-sm">
                        <span class="text-xs text-outline uppercase block">{{ $facility['capacity_label'] }}</span>
                        <strong class="font-title-md text-title-md text-on-surface">{{ $facility['capacity'] }}</strong>
                    </div>
                    <div class="bg-surface-container-lowest rounded-lg border border-surface-container p-space-sm">
                        <span class="text-xs text-outline uppercase block">Category</span>
                        <strong class="font-title-md text-title-md text-on-surface">{{ $facility['category'] }}</strong>
                    </div>
                </div>
                <div class="flex flex-wrap gap-space-sm">
                    <a class="inline-flex items-center gap-2 px-space-lg py-2.5 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors"
                        href="{{ url('/booking') }}">
                        <span>Booking Enquiry</span>
                        <span class="material-symbols-outlined text-sm">east</span>
                    </a>
                    <a class="inline-flex items-center gap-2 px-space-lg py-2.5 bg-surface-container text-on-surface font-title-md text-title-md rounded hover:bg-surface-container-high transition-colors"
                        href="{{ url('/public-rental-facilities') }}">
                        <span>Back to Rental Facilities</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="w-full my-space-xl py-space-xl px-gutter">
        <div class="max-w-7xl mx-auto">
            @include('frontend.partials.section-heading', ['eyebrow' => 'Rental Information', 'title' => 'Amenities, Usage & Booking'])
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-space-lg">
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md h-full">
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">Amenities</h3>
                    <ul class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mb-0 ps-3">
                        @foreach ($facility['amenities'] as $amenity)
                            <li>{{ $amenity }}</li>
                        @endforeach
                    </ul>
                </article>
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md h-full">
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">Rental Details</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mb-0">{{ $facility['rental_info'] }}</p>
                </article>
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md h-full">
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">Usage Information</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mb-0">{{ $facility['usage_info'] }}</p>
                </article>
            </div>
        </div>
    </section>

    <section class="content-container my-space-xl py-space-md">
        @include('frontend.partials.section-heading', ['eyebrow' => 'Gallery', 'title' => 'Facility Images'])
        @include('frontend.partials.static-gallery', ['images' => $facility['gallery'], 'alt' => $facility['title'].' gallery image'])
    </section>
@endsection