@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $facility['title'],
        'eyebrow' => 'Facility Detail',
        'summary' => $facility['description'],
        'image' => $facility['image'],
        'breadcrumbs' => ['Facilities' => url('/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">
            <div class="lg:col-span-7">
                <img class="w-full h-[450px] object-cover rounded-xl shadow-lg" src="{{ $facility['image'] }}" alt="{{ $facility['title'] }}">
            </div>
            <div class="lg:col-span-5">
                <span class="font-label-md text-label-md text-primary uppercase">Overview</span>
                <h2 class="font-headline-lg text-headline-lg text-on-surface font-bold">{{ $facility['title'] }}</h2>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">{{ $facility['overview'] }}</p>
                <a class="inline-flex items-center gap-2 px-space-xl py-3 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors shadow-md"
                    href="{{ url('/booking') }}">
                    <span>Enquire & Book Now</span>
                    <span class="material-symbols-outlined text-base">east</span>
                </a>
            </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' => 'Highlights', 'title' => 'Facility Features'])
            <div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
                @foreach ($facility['features'] as $feature)
                    <div class="bg-surface-container-lowest rounded-lg p-space-md border border-surface-container">
                        <span class="material-symbols-outlined text-primary mb-space-xs">check_circle</span>
                        <p class="font-title-md text-title-md text-on-surface font-semibold mb-0">{{ $feature }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="content-container my-space-xl py-space-md">
        <div class="detail-gallery">
            @foreach ($facility['gallery'] as $image)
                <img class="rounded-lg shadow-sm" src="{{ $image }}" alt="{{ $facility['title'] }} gallery">
            @endforeach
        </div>
    </section>

    @if (!empty($related))
        <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' => 'More Facilities', 'title' => 'Related Facilities'])
                <div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg">
                    @foreach ($related as $relatedFacility)
                        @include('frontend.partials.cards', ['item' => $relatedFacility + ['button' => 'Know More']])
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection