@extends('layouts.app')

@section('title', 'Japanese Automotive Intelligence & Import Insights | MotoSolution Blog')

@section('content')
<div class="bg-[#0B0F19] py-12 text-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest bg-red-600/15 text-red-400 border border-red-500/30 mb-4">
                <i class="fa-solid fa-newspaper"></i> Automotive Insights
            </span>
            <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight font-heading leading-tight">
                Japanese Automotive <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Intelligence & Guides</span>
            </h1>
            <p class="mt-4 text-slate-400 text-sm sm:text-base leading-relaxed">
                Expert analysis on NBR customs tariff changes, hybrid battery care in Bangladesh's climate, Japanese auction bidding tactics, and vehicle ownership guides.
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            
            <!-- Main Posts Grid (Left 8 Cols) -->
            <div class="lg:col-span-8 space-y-8">
                
                @if($posts->count() > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        @foreach($posts as $post)
                            <article class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden hover:border-red-500/40 transition group flex flex-col justify-between">
                                <div>
                                    <a href="{{ route('blog.show', $post->slug) }}" class="block aspect-16/10 overflow-hidden bg-slate-800 relative">
                                        @if($post->featured_image)
                                            <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center bg-slate-800 text-slate-600">
                                                <i class="fa-solid fa-car text-4xl"></i>
                                            </div>
                                        @endif
                                        <span class="absolute top-3 left-3 bg-red-600 text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md shadow">
                                            {{ $post->category->name ?? 'Article' }}
                                        </span>
                                    </a>

                                    <div class="p-5">
                                        <div class="flex items-center gap-3 text-[11px] text-slate-400 mb-2">
                                            <span><i class="fa-regular fa-calendar mr-1"></i> {{ $post->published_at ? $post->published_at->format('M d, Y') : $post->created_at->format('M d, Y') }}</span>
                                            <span>•</span>
                                            <span><i class="fa-regular fa-clock mr-1"></i> {{ $post->reading_time ?? '4' }} min read</span>
                                        </div>
                                        <h2 class="text-base font-bold text-white group-hover:text-red-400 transition font-heading line-clamp-2">
                                            <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                                        </h2>
                                        <p class="text-xs text-slate-400 mt-2 line-clamp-3 leading-relaxed">
                                            {{ $post->summary ?? Str::limit(strip_tags($post->content), 120) }}
                                        </p>
                                    </div>
                                </div>

                                <div class="px-5 pb-5 pt-2 border-t border-white/5 flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded-full bg-red-600/30 text-red-400 flex items-center justify-center text-[10px] font-bold">
                                            {{ strtoupper(substr($post->author->name ?? 'M', 0, 1)) }}
                                        </div>
                                        <span class="text-xs text-slate-300 font-medium">{{ $post->author->name ?? 'MotoSolution Team' }}</span>
                                    </div>
                                    <a href="{{ route('blog.show', $post->slug) }}" class="text-xs font-bold text-red-400 hover:text-red-300 flex items-center gap-1">
                                        <span>Read</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                    </a>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="mt-8">
                        {{ $posts->links() }}
                    </div>
                @else
                    <div class="bg-slate-900 border border-white/10 rounded-2xl p-12 text-center text-slate-400">
                        <i class="fa-regular fa-newspaper text-4xl mb-3 block"></i>
                        <p class="text-sm font-semibold">No articles published yet. Check back soon for industry updates!</p>
                    </div>
                @endif

            </div>

            <!-- Blog Sidebar (Right 4 Cols) -->
            <div class="lg:col-span-4 space-y-6">
                
                <!-- Categories Card -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6">
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white font-heading border-b border-white/10 pb-3 mb-4">
                        Categories
                    </h3>
                    <div class="space-y-2 text-xs">
                        @foreach($categories as $category)
                            <div class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-white/5 transition text-slate-300 hover:text-white">
                                <span>{{ $category->name }}</span>
                                <span class="text-[10px] bg-white/10 px-2 py-0.5 rounded-full font-bold text-slate-400">{{ $category->posts_count }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Recent Articles Card -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6">
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white font-heading border-b border-white/10 pb-3 mb-4">
                        Recent Articles
                    </h3>
                    <div class="space-y-4">
                        @foreach($recentPosts as $recent)
                            <a href="{{ route('blog.show', $recent->slug) }}" class="flex items-start gap-3 group">
                                <div class="w-16 h-12 rounded-lg overflow-hidden bg-slate-800 shrink-0">
                                    @if($recent->featured_image)
                                        <img src="{{ $recent->featured_image }}" alt="{{ $recent->title }}" class="w-full h-full object-cover group-hover:scale-105 transition">
                                    @endif
                                </div>
                                <div class="min-w-0">
                                    <h4 class="text-xs font-bold text-white group-hover:text-red-400 transition line-clamp-2">{{ $recent->title }}</h4>
                                    <span class="text-[10px] text-slate-400 mt-1 block">{{ $recent->created_at->format('M d, Y') }}</span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>

                <!-- Landed Cost Simulator Mini Banner -->
                <div class="bg-gradient-to-br from-red-950/40 via-slate-900 to-slate-900 border border-red-500/30 rounded-2xl p-6">
                    <i class="fa-solid fa-calculator text-2xl text-red-500 mb-3 block"></i>
                    <h4 class="text-sm font-bold text-white font-heading mb-1">Calculate NBR Customs Duties</h4>
                    <p class="text-xs text-slate-400 mb-4 leading-relaxed">Calculate exact Chittagong customs tariffs and landed cost for any Japanese model.</p>
                    <a href="{{ route('calculator') }}" class="inline-block w-full py-2.5 text-center rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow transition">
                        Open Simulator &rarr;
                    </a>
                </div>

            </div>

        </div>

    </div>
</div>
@endsection