<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog & Berita | Empal Gentong Haji Apud</title>
    <script src="https://cdn.tailwindcss.com"></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">

    <!-- Navigasi -->
    <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="hidden md:flex space-x-10">
                <a href="{{ url('/') }}" class="text-gray-600 hover:text-amber-700 font-medium">Beranda</a>
                <a href="{{ route('blog.index') }}" class="text-gray-900 font-semibold border-b-2 border-amber-700 pb-1">Blog Khas Cirebon</a>
            </div>
            <div class="flex items-center gap-6">
                <a href="{{ route('cart.index') }}" class="text-gray-600 hover:text-amber-700 transition-colors"><i class="fas fa-shopping-cart text-2xl"></i></a>
            </div>
        </div>
    </nav>

    <!-- Konten Daftar Blog -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h1 class="font-serif text-4xl md:text-5xl font-bold text-gray-950 mb-4">Cerita Rasa Cirebon</h1>
            <p class="text-stone-600 text-lg max-w-2xl mx-auto">Temukan artikel menarik seputar kuliner, resep rahasia, dan budaya Majalengka hingga Cirebon.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            @foreach($articles as $article)
            <div class="bg-white rounded-3xl border border-stone-100 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col group">
                <div class="h-60 bg-stone-100 overflow-hidden relative">
                    @if($article->image)
                        <img src="{{ asset('storage/' . $article->image) }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-stone-300"><i class="fas fa-newspaper text-5xl"></i></div>
                    @endif
                </div>
                <div class="p-8 flex flex-col flex-grow">
                    <span class="text-xs font-bold text-amber-600 uppercase tracking-wider mb-2">{{ $article->created_at->format('d M Y') }}</span>
                    <h2 class="text-2xl font-bold text-gray-900 mb-4 line-clamp-2 hover:text-amber-700 transition-colors">
                        <a href="{{ route('blog.show', $article->slug) }}">{{ $article->title }}</a>
                    </h2>
                    <p class="text-stone-500 line-clamp-3 mb-6">{{ strip_tags($article->content) }}</p>
                    <a href="{{ route('blog.show', $article->slug) }}" class="mt-auto inline-flex items-center gap-2 font-bold text-amber-700 hover:text-amber-800 transition-colors">
                        Baca Selengkapnya <i class="fas fa-arrow-right text-sm"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        @if(count($articles) == 0)
            <div class="text-center py-20 bg-white rounded-3xl border border-stone-100">
                <i class="fas fa-book-open text-6xl text-stone-300 mb-4"></i>
                <h3 class="text-xl font-bold text-gray-700">Belum ada artikel.</h3>
                <p class="text-stone-500 mt-2">Nantikan cerita kuliner menarik dari kami segera!</p>
            </div>
        @endif
    </div>

</body>
</html>