@if($post)
<section class="mb-16">
    <article
        class="relative grid grid-cols-1 lg:grid-cols-12 gap-8 bg-white dark:bg-surface-dark rounded-2xl overflow-hidden border border-border-light dark:border-border-dark shadow-soft">
        <div class="lg:col-span-7 aspect-square overflow-hidden">
            <a href="{{ route('blog.post', $post->slug) }}" class="block h-full">
                @if(!$post->hasFeaturedImage())
                    <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
                         src="{{asset('/assets/img/no-thumb.svg')}}" alt="{{$post->title}}">
                @else
                    <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
                         src="{{$post->getFeaturedImage('original')}}" alt="{{$post->title}}">
                @endif
            </a>
        </div>
        <div class="lg:col-span-5 p-8 lg:p-12 flex flex-col justify-center">
            <div class="flex items-center gap-3 mb-6">
                <span
                    class="px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider">@lang('blog.Featured')</span>
                <span class="text-text-muted text-sm">{{ $post->created_at->format('F d, Y') }}</span>
            </div>
            <a href="{{ route('blog.post', $post->slug) }}">
                <h1 class="text-3xl lg:text-4xl font-bold text-text-main dark:text-white mb-6 leading-tight hover:text-primary transition-colors">
                    {{ $post->title }}
                </h1>
            </a>
            <p class="text-text-muted dark:text-gray-400 text-lg mb-8 leading-relaxed line-clamp-3">
                {{ Str::limit(strip_tags($post->content), 150) }}
            </p>
            <div class="flex items-center justify-between mt-auto">
                <div class="flex items-center gap-3">
                    <img alt="{{ $post->user->name ?? 'Author' }}" class="size-10 rounded-full border-2 border-primary/20 object-cover"
                         src="{{ !empty($post->user->avatar) ? asset('storage/' . $post->user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($post->user->name ?? 'Guest') }}" />
                    <div>
                        <p class="text-sm font-bold text-text-main dark:text-white">{{ $post->user->name ?? __('blog.Guest User') }}</p>
                    </div>
                </div>
                <a class="inline-flex items-center gap-2 text-primary font-semibold hover:gap-3 transition-all"
                   href="{{ route('blog.post', $post->slug) }}">
                    @lang('blog.button|Read Story')
                    <span class="material-symbols-outlined">arrow_forward</span>
                </a>
            </div>
        </div>
    </article>
</section>
@endif