@extends('layouts.marketing')

@section('title')
{{ $post->getTranslation('title', app()->getLocale()) }} - {{ __('blog.title') }}
@endsection

@section('content')
    <!-- Hero for Single Post -->
    <section class="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
        <div class="container mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ $post->getTranslation('title', app()->getLocale()) }}</h1>
            <p class="text-lg mb-8">{{ __('blog.by') }} {{ $post->author->name ?? __('blog.team') }} | {{ $post->published_at->format(__('date.format')) }}</p>
            @if ($post->featured_image)
                <img src="{{ $post->featured_image }}" alt="{{ $post->getTranslation('title', app()->getLocale()) }}" class="mx-auto rounded-lg shadow-lg max-w-2xl">
            @endif
        </div>
    </section>

    <!-- Post Content -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-4xl prose prose-lg max-w-none">
            {!! $post->getTranslation('content', app()->getLocale()) !!}
        </div>
    </section>

    <!-- Back to Blog -->
    <section class="py-10 px-4 bg-gray-50">
        <div class="container mx-auto text-center">
            <a href="/blog" class="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition">{{ __('blog.back') }}</a>
        </div>
    </section>
@endsection