@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="max-w-4xl mx-auto px-4 py-12">
    {{-- Breadcrumb --}}
    <div class="text-cream/50 text-sm mb-8">
        <a href="{{ route('blog.index') }}" class="hover:text-gold transition-colors">Blog</a>
        @if($blog->blogCategory)<span class="mx-2">/</span><a href="#" class="hover:text-gold transition-colors">{{ $blog->blogCategory->name }}</a>@endif
        <span class="mx-2">/</span><span class="text-cream/30">{{ Str::limit($blog->title,40) }}</span>
    </div>

    {{-- Header --}}
    <div class="mb-8" data-aos="fade-up">
        @if($blog->blogCategory)
        <span class="border border-gold/40 text-gold text-xs px-3 py-1 rounded-full">{{ $blog->blogCategory->name }}</span>
        @endif
        <h1 class="font-playfair text-4xl md:text-5xl text-cream font-bold mt-4 mb-4 leading-tight">{{ $blog->title }}</h1>
        <div class="flex flex-wrap items-center gap-5 text-cream/50 text-sm">
            <span class="flex items-center gap-2">
                <img src="{{ $blog->author?->avatar_url ?? 'https://ui-avatars.com/api/?name=Shalik&background=1F3A2E&color=C8A96B' }}"
                     alt="" class="w-7 h-7 rounded-full object-cover border border-gold/30">
                {{ $blog->author?->name ?? 'Shalik Team' }}
            </span>
            <span><i class="fas fa-calendar mr-1 text-gold/50"></i>{{ $blog->published_at?->format('F d, Y') }}</span>
            @if($blog->read_time)<span><i class="fas fa-clock mr-1 text-gold/50"></i>{{ $blog->read_time }} min read</span>@endif
            <span><i class="fas fa-eye mr-1 text-gold/50"></i>{{ number_format($blog->view_count) }} views</span>
        </div>
    </div>

    {{-- Featured Image --}}
    <div class="rounded-2xl overflow-hidden mb-10 h-80" data-aos="fade-up" data-aos-delay="100">
        <img src="{{ $blog->thumbnail_url }}" alt="{{ $blog->title }}" class="w-full h-full object-cover">
    </div>

    {{-- Content --}}
    <div class="prose prose-invert prose-gold max-w-none text-cream/80 leading-relaxed mb-12"
         style="font-family:'Poppins',sans-serif; font-size:1.05rem; line-height:1.9;">
        {!! $blog->content !!}
    </div>

    {{-- Tags --}}
    @if($blog->tags)
    <div class="flex flex-wrap gap-2 mb-10 pt-6 border-t border-white/10">
        <span class="text-cream/50 text-sm mr-2">Tags:</span>
        @foreach($blog->tags as $tag)
        <span class="bg-deep-green/60 border border-gold/20 text-cream/60 text-xs px-3 py-1 rounded-full">#{{ $tag }}</span>
        @endforeach
    </div>
    @endif

    {{-- Related --}}
    @if($relatedBlogs->count())
    <div class="mt-12 pt-10 border-t border-white/10">
        <h2 class="font-playfair text-2xl text-cream font-bold mb-8">Related Articles</h2>
        <div class="grid md:grid-cols-3 gap-6">
            @foreach($relatedBlogs as $rel)
            <a href="{{ route('blog.show', $rel->slug) }}" class="glass-card overflow-hidden group hover:-translate-y-1 transition-all">
                <div class="h-40 overflow-hidden"><img src="{{ $rel->thumbnail_url }}" alt="{{ $rel->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
                <div class="p-4">
                    <h4 class="font-playfair text-cream text-base font-semibold group-hover:text-gold transition-colors">{{ Str::limit($rel->title,60) }}</h4>
                    <p class="text-cream/50 text-xs mt-1">{{ $rel->published_at?->format('M d, Y') }}</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif
</div>
</div>
@endsection