@section('title', $post->title)

<div>
    {{-- Hero/Banner Section --}}
    <div class="relative w-full h-[50vh] min-h-[400px]">
        @if ($post->image)
            <img src="{{ Storage::url($post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
        @endif
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>

        <div class="absolute bottom-0 left-0 w-full p-8 md:p-12 lg:p-16">
            <div class="container mx-auto max-w-4xl">
                @if ($post->category)
                    <span
                        class="inline-block px-3 py-1 mb-4 text-xs font-bold tracking-widest text-white uppercase bg-red-600 rounded">
                        {{ $post->category->name }}
                    </span>
                @endif
                <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-4">
                    {{ $post->title }}
                </h1>
            </div>
        </div>
    </div>

    {{-- Content Section --}}
    <div class="container mx-auto px-4 py-16 max-w-4xl">
        <div
            class="prose prose-lg max-w-none prose-headings:font-bold prose-headings:text-black prose-p:text-gray-700 prose-a:text-red-600 hover:prose-a:text-black prose-img:rounded-lg">
            {!! $post->content !!}
        </div>
    </div>

    {{-- Navigation --}}
    <div class="grid grid-cols-1 md:grid-cols-2">
        {{-- Previous Post --}}
        @if ($previousPost)
            <a href="{{ route('blog.detail', $previousPost->slug) }}" class="relative group block h-64 overflow-hidden">
                @if ($previousPost->image)
                    <img src="{{ Storage::url($previousPost->image) }}"
                        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-60 group-hover:opacity-40">
                @else
                    <div
                        class="w-full h-full bg-gray-900 opacity-90 transition-opacity duration-300 group-hover:opacity-80">
                    </div>
                @endif
                <div class="absolute inset-0 bg-black/50 group-hover:bg-black/30 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex flex-col justify-center items-center text-center p-8 z-10">
                    <span class="text-xs font-bold tracking-widest text-white uppercase mb-2">Anterior Post</span>
                    <h4
                        class="text-xl md:text-2xl font-bold text-white group-hover:underline decoration-red-600 underline-offset-4">
                        {{ $previousPost->title }}
                    </h4>
                </div>
            </a>
        @else
            <div class="hidden md:block bg-gray-100"></div>
        @endif

        {{-- Next Post --}}
        @if ($nextPost)
            <a href="{{ route('blog.detail', $nextPost->slug) }}"
                class="relative group block h-64 overflow-hidden border-l border-white/10">
                @if ($nextPost->image)
                    <img src="{{ Storage::url($nextPost->image) }}"
                        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-60 group-hover:opacity-40">
                @else
                    <div
                        class="w-full h-full bg-gray-900 opacity-90 transition-opacity duration-300 group-hover:opacity-80">
                    </div>
                @endif
                <div class="absolute inset-0 bg-black/50 group-hover:bg-black/30 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex flex-col justify-center items-center text-center p-8 z-10">
                    <span class="text-xs font-bold tracking-widest text-white uppercase mb-2">Siguiente Post</span>
                    <h4
                        class="text-xl md:text-2xl font-bold text-white group-hover:underline decoration-red-600 underline-offset-4">
                        {{ $nextPost->title }}
                    </h4>
                </div>
            </a>
        @else
            <div class="hidden md:block bg-gray-100"></div>
        @endif
    </div>
</div>