@extends('layouts.frontend')

@section('title', $post->meta_title ?: $post->title)
@section('meta_description', $post->meta_description)

@section('content')
    <article class="py-20">
        <header class="max-w-4xl mx-auto px-4 text-center mb-16">
            <a href="{{ route('blog.index') }}" class="inline-flex items-center text-sm font-bold text-indigo-600 mb-8 uppercase tracking-widest">
                <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to Blog
            </a>
            
            <div class="flex items-center justify-center space-x-2 text-xs font-bold text-slate-400 uppercase tracking-wider mb-4">
                <span class="text-indigo-600">{{ $post->category->name }}</span>
                <span>•</span>
                <span>{{ $post->published_at->format('M d, Y') }}</span>
            </div>
            
            <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-8 leading-tight">
                {{ $post->title }}
            </h1>
            
            <div class="flex items-center justify-center space-x-4">
                <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center font-bold text-indigo-600">
                    {{ substr($post->author->name, 0, 1) }}
                </div>
                <div class="text-left">
                    <p class="font-bold text-slate-900">{{ $post->author->name }}</p>
                    <p class="text-sm text-slate-500">Author</p>
                </div>
            </div>
        </header>

        @if($post->hasMedia('featured_images'))
            <div class="max-w-6xl mx-auto px-4 mb-20">
                <img src="{{ $post->getFirstMediaUrl('featured_images') }}" 
                     alt="{{ $post->title }}" 
                     class="w-full h-[600px] object-cover rounded-[3rem] shadow-2xl">
            </div>
        @endif

        <div class="max-w-3xl mx-auto px-4 prose prose-lg prose-indigo prose-headings:font-bold prose-img:rounded-3xl prose-blockquote:border-indigo-500 prose-blockquote:bg-indigo-50 prose-blockquote:py-2 prose-blockquote:px-6">
            {!! $post->content !!}
        </div>

        <footer class="max-w-3xl mx-auto px-4 mt-20 pt-10 border-t border-slate-100">
            <div class="flex flex-wrap gap-2">
                @foreach($post->tags as $tag)
                    <span class="bg-slate-100 px-4 py-1.5 rounded-full text-sm font-medium text-slate-600">
                        #{{ $tag->name }}
                    </span>
                @endforeach
            </div>
        </footer>
    </article>

    <!-- Related Posts -->
    @if($relatedPosts->count())
        <section class="bg-slate-50 py-24">
            <div class="max-w-7xl mx-auto px-4">
                <h3 class="text-3xl font-bold text-slate-900 mb-12">Continue Reading</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach($relatedPosts as $related)
                        <a href="{{ route('blog.show', $related->slug) }}" class="group">
                            <div class="aspect-video overflow-hidden rounded-2xl mb-6">
                                @if($related->hasMedia('featured_images'))
                                    <img src="{{ $related->getFirstMediaUrl('featured_images') }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                @else
                                    <div class="w-full h-full bg-slate-200"></div>
                                @endif
                            </div>
                            <h4 class="text-xl font-bold text-slate-900 group-hover:text-indigo-600 transition">{{ $related->title }}</h4>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection