@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $wing['title'],
        'eyebrow' => $wing['eyebrow'] ?? 'Internal Wing',
        'summary' => $wing['summary'],
        'image' => asset($wing['image']),
        'breadcrumbs' => ['Wings & Museums' => url('/museums'), $wing['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-6">
                <img class="w-full h-[420px] object-cover rounded-xl shadow-lg" src="{{ asset($wing['image']) }}" alt="{{ $wing['title'] }}">
            </div>
            <div class="lg:col-span-6">
                <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">{{ $wing['title'] }}</h2>
                <p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">{{ $wing['intro'] }}</p>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">{{ $wing['description'] }}</p>
                <div class="flex flex-wrap gap-space-sm mt-space-md">
                    <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('/museums') }}">
                        <span>Explore Museums</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('/') }}">
                        <span>Back to Home</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' => 'Related Information', 'title' => 'Wing Highlights'])
            <div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
                @foreach ($wing['features'] as $feature)
                    <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">{{ $feature }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

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

    @if (!empty($wing['related']))
        <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">
                <h2 class="font-headline-sm text-headline-sm text-on-surface font-bold mb-space-sm">Related Links</h2>
                <div class="flex flex-wrap gap-space-sm">
                    @foreach ($wing['related'] as $link)
                        <a class="inline-flex items-center gap-1 px-space-md py-2 bg-surface-container text-on-surface font-title-md text-title-md rounded hover:bg-primary-container hover:text-on-primary transition-colors"
                            href="{{ url($link['url']) }}">
                            <span>{{ $link['title'] }}</span>
                            <span class="material-symbols-outlined text-sm">east</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection