<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Dinamis SEO Meta Tags -->
    <title>{{ $article->title }} | Blog Empal Gentong Haji Apud</title>
    <meta name="description" content="{{ Str::limit(strip_tags($article->content), 150) }}">
    
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ $article->title }}">
    <meta property="og:description" content="{{ Str::limit(strip_tags($article->content), 150) }}">
    <meta property="og:url" content="{{ route('blog.show', $article->slug) }}">
    @if($article->image)
    <meta property="og:image" content="{{ asset('storage/' . $article->image) }}">
    @endif
    <!-- End SEO -->

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-stone-50 text-gray-800 font-sans pt-32 pb-20">

    <nav class="bg-white/95 backdrop-blur-sm shadow-sm fixed w-full z-50 top-0 border-b border-stone-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between h-24 items-center">
            <a href="{{ url('/') }}" class="flex items-center gap-3">
                <div class="w-12 h-12 bg-amber-700 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-inner">H</div>
                <span class="font-serif text-3xl font-bold text-amber-800">Haji Apud.</span>
            </a>
            <div class="flex items-center gap-6">
                <a href="{{ route('blog.index') }}" class="text-stone-600 hover:text-amber-700 font-medium flex items-center gap-2">
                    <i class="fas fa-arrow-left"></i> Kembali ke Blog
                </a>
            </div>
        </div>
    </nav>

    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <article class="bg-white rounded-3xl border border-stone-100 shadow-sm overflow-hidden">
            @if($article->image)
                <img src="{{ asset('storage/' . $article->image) }}" alt="{{ $article->title }}" class="w-full h-[400px] object-cover">
            @endif
            
            <div class="p-10 md:p-16">
                <div class="mb-8 border-b border-stone-100 pb-8 text-center">
                    <span class="text-amber-600 font-bold tracking-widest uppercase text-sm mb-3 block">Berita Kuliner</span>
                    <h1 class="font-serif text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">{{ $article->title }}</h1>
                    <div class="flex items-center justify-center gap-4 text-stone-500 text-sm font-medium">
                        <span class="flex items-center gap-2"><i class="fas fa-calendar"></i> {{ $article->created_at->format('d M Y') }}</span>
                        <span>•</span>
                        <span class="flex items-center gap-2"><i class="fas fa-user-circle"></i> Tim Redaksi Haji Apud</span>
                    </div>
                </div>

                <!-- Isi Artikel -->
                <div class="prose prose-lg prose-stone max-w-none">
                    {!! $article->content !!}
                </div>
            </div>
        </article>
    </main>

</body>
</html>