@extends('layouts.app')

@section('content')
<article class="py-16 md:py-24 bg-[#1a1614]">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($post->image)
            <div class="aspect-[21/9] rounded-xl overflow-hidden mb-10">
                <img src="{{ asset('images/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
            </div>
        @endif

        @if($post->category)
            <span class="text-xs text-[#c77d4a] uppercase tracking-wider">{{ $post->category->name }}</span>
        @endif
        <h1 class="text-3xl md:text-5xl font-light text-white mt-3 mb-6">{{ $post->title }}</h1>
        <p class="text-white/50 text-sm mb-10">{{ $post->published_at?->format('d.m.Y') }}</p>

        <div class="prose prose-invert prose-lg max-w-none text-white/80">
            {!! $post->content !!}
        </div>

        <div class="mt-12 pt-8 border-t border-white/10">
            <a href="{{ localized_route('blog.index') }}" class="inline-flex items-center text-sm text-[#c77d4a] hover:text-white transition">
                <svg class="w-4 h-4 mr-2 rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                </svg>
                {{ __('back_to_blog') }}
            </a>
        </div>
    </div>
</article>
@endsection