@extends('layouts.app')

@section('title', $post->meta_title ?? ($post->title . ' | MotoSolution Bangladesh'))

@section('content')
<div class="bg-[#0B0F19] py-12 text-slate-100">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-xs text-slate-400 mb-6">
            <a href="{{ route('home') }}" class="hover:text-white">Home</a>
            <span>/</span>
            <a href="{{ route('blog.index') }}" class="hover:text-white">Insights</a>
            <span>/</span>
            <span class="text-slate-300 truncate">{{ $post->title }}</span>
        </nav>

        <!-- Article Header -->
        <header class="mb-8">
            <div class="flex items-center gap-3 mb-4">
                <span class="bg-red-600 text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md">
                    {{ $post->category->name ?? 'Automotive Guide' }}
                </span>
                <span class="text-xs text-slate-400">
                    <i class="fa-regular fa-clock mr-1"></i> {{ $post->reading_time ?? '4' }} min read
                </span>
                <span class="text-xs text-slate-400">
                    <i class="fa-regular fa-eye mr-1"></i> {{ $post->views_count }} views
                </span>
            </div>

            <h1 class="text-2xl sm:text-4xl font-extrabold text-white tracking-tight font-heading leading-tight mb-4">
                {{ $post->title }}
            </h1>

            <div class="flex items-center justify-between py-4 border-y border-white/10 text-xs text-slate-400">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-red-600/20 text-red-400 font-bold flex items-center justify-center">
                        {{ strtoupper(substr($post->author->name ?? 'M', 0, 1)) }}
                    </div>
                    <div>
                        <span class="font-bold text-white block">{{ $post->author->name ?? 'MotoSolution Editorial' }}</span>
                        <span class="text-[11px] text-slate-400">{{ $post->published_at ? $post->published_at->format('F d, Y') : $post->created_at->format('F d, Y') }}</span>
                    </div>
                </div>

                <!-- Social Sharing -->
                <div class="flex items-center gap-2">
                    <span class="hidden sm:inline text-[11px] uppercase tracking-wider">Share:</span>
                    <a href="https://wa.me/?text={{ urlencode($post->title . ' ' . request()->url()) }}" target="_blank" class="w-8 h-8 rounded-lg bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600 hover:text-white transition flex items-center justify-center text-xs">
                        <i class="fa-brands fa-whatsapp"></i>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" class="w-8 h-8 rounded-lg bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white transition flex items-center justify-center text-xs">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                </div>
            </div>
        </header>

        <!-- Featured Image -->
        @if($post->featured_image)
            <div class="aspect-16/9 rounded-2xl overflow-hidden bg-slate-900 border border-white/10 mb-10 shadow-2xl">
                <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
            </div>
        @endif

        <!-- Post Content -->
        <div class="bg-slate-900/60 border border-white/10 rounded-2xl p-6 sm:p-10 text-slate-200 text-sm sm:text-base leading-relaxed space-y-6">
            @if($post->summary)
                <div class="p-4 rounded-xl bg-white/5 border-l-4 border-red-500 text-slate-300 italic text-sm">
                    {{ $post->summary }}
                </div>
            @endif

            <div class="prose prose-invert max-w-none text-slate-300 leading-relaxed">
                {!! nl2br(e($post->content)) !!}
            </div>

            <div class="mt-8 pt-8 border-t border-white/10">
                <div class="bg-red-950/20 border border-red-500/30 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div>
                        <h4 class="text-base font-bold text-white font-heading">Interested in importing a car mentioned in this article?</h4>
                        <p class="text-xs text-slate-400 mt-1">Get an exact NBR customs assessment or live Japan auction search with zero obligations.</p>
                    </div>
                    <div class="flex items-center gap-3 shrink-0">
                        <a href="{{ route('calculator') }}" class="px-4 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow transition">
                            Cost Calculator
                        </a>
                        <a href="{{ route('auction.index') }}" class="px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                            Browse Lots
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Posts -->
        @if($relatedPosts->count() > 0)
            <div class="mt-16">
                <h3 class="text-xl font-bold text-white font-heading mb-6">Related Guides & Articles</h3>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                    @foreach($relatedPosts as $related)
                        <a href="{{ route('blog.show', $related->slug) }}" class="bg-slate-900 border border-white/10 rounded-xl overflow-hidden hover:border-red-500/30 transition group">
                            <div class="aspect-16/10 bg-slate-800 overflow-hidden">
                                @if($related->featured_image)
                                    <img src="{{ $related->featured_image }}" alt="{{ $related->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                @endif
                            </div>
                            <div class="p-4">
                                <span class="text-[10px] text-red-400 font-bold uppercase tracking-wider block mb-1">{{ $related->category->name ?? 'Article' }}</span>
                                <h4 class="text-xs font-bold text-white group-hover:text-red-400 transition line-clamp-2">{{ $related->title }}</h4>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

    </div>
</div>
@endsection