@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $museum['title'],
        'eyebrow' => 'Museum Detail',
        'summary' => $museum['summary'],
        'image' => asset($museum['image']),
        'breadcrumbs' => ['Museums' => url('/museums'), $museum['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($museum['image']) }}" alt="{{ $museum['title'] }}">
            </div>
            <div class="lg:col-span-5">
                <span class="font-label-md text-label-md text-primary uppercase tracking-widest">Overview</span>
                <h2 class="font-headline-lg text-headline-lg text-on-surface font-bold mt-space-xs">{{ $museum['title'] }}</h2>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">{{ $museum['description'] }}</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('/museums') }}">
                    <span>Back to Museums</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' => 'Museum Information', 'title' => 'What This Page Supports'])
            <div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
                @foreach ($museum['details'] as $detail)
                    <div class="bg-surface-container-lowest rounded-lg p-space-md border border-surface-container h-full">
                        <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">{{ $detail }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

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

    <section class="content-container my-space-xl py-space-md">
        <div 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">Visitor Information</span>
            <h2 class="font-headline-sm text-headline-sm text-on-surface font-bold mt-space-xs">Location & Access</h2>
            <p class="font-body-md text-body-md text-on-surface-variant mb-0">{{ $museum['location'] }}</p>
        </div>
    </section>
@endsection