@extends('layouts.frontend')

@section('title', 'Katalog Artikel - Tempe Zhi')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800;900&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #ffffff; }
    
    .article-card {
        transition: all 0.3s ease-in-out;
    }

    /* Modifikasi Container Gambar agar Brutalist & Rapi */
    .image-container {
        border: 4px solid #064e3b;
        border-radius: 1rem;
        box-shadow: 4px 4px 0px 0px #064e3b;
        transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    }


    /* Badge Tanggal di Ujung Gambar */
    .date-badge {
        position: absolute;
        bottom: 16px;
        left: 16px;
        background: white;
        border: 3px solid #064e3b;
        border-radius: 0.5rem;
        box-shadow: 2px 2px 0px 0px #064e3b;
        padding: 4px 10px;
    }

    .category-tag {
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #064e3b;
        background: #fef08a;
        padding: 4px 10px;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: 12px;
    }
</style>

<div class="pt-16 pb-24 bg-white min-h-screen">
    <div class="max-w-7xl mx-auto px-6">
        
        {{-- HEADER KATALOG --}}
        <div class="text-center mb-20">
            <h1 class="text-5xl md:text-6xl font-black text-[#064e3b] mt-2 mb-4 tracking-tight">
                Katalog Artikel
            </h1>
            <div class="w-24 h-2 bg-yellow-400 mx-auto rounded-full mb-5"></div>
            <p class="text-gray-500 max-w-2xl mx-auto font-medium text-base md:text-lg">
                Inspirasi seputar olahan tempe, tips kesehatan, dan cerita dibalik dapur produksi Tempe Zhi.   
            </p>
        </div>

        {{-- GRID UTAMA ARTIKEL --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-16">
            @forelse($articles as $article)
                <article class="article-card group">
                    <a href="{{ route('artikel.show', $article->slug) }}" class="block">
                        
                        {{-- CONTAINER GAMBAR --}}
                        <div class="image-container aspect-[16/10] overflow-hidden bg-slate-50 mb-6 relative">
                            @if($article->image)
                                <img src="{{ asset('storage/' . $article->image) }}" 
                                     alt="{{ $article->title }}" 
                                     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-slate-300 bg-slate-50">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                            @endif
                            
                            {{-- TANGGAL BADGE BRUTALIST --}}
                            <div class="date-badge">
                                <p class="text-[9px] font-black text-[#064e3b] uppercase tracking-wider">
                                    {{ $article->created_at->format('d M Y') }}
                                </p>
                            </div>
                        </div>

                        {{-- JUDUL ARTIKEL --}}
                        <h3 class="text-xl font-[900] text-[#064e3b] uppercase tracking-tight leading-snug mb-3 ">
                            {{ Str::limit($article->title, 60) }}
                        </h3>
                        
                        {{-- TOMBOL AKSI BACA --}}
                        <div class="flex items-center gap-2 pt-1">
                            <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 group-hover:text-[#064e3b] transition-colors">
                                Baca Artikel
                            </span>
                            <div class="h-[2px] w-8 bg-slate-200 group-hover:w-12 group-hover:bg-[#064e3b] transition-all"></div>
                        </div>
                    </a>
                </article>
            @empty
                {{-- HALAMAN KOSONG --}}
                <div class="col-span-full py-32 text-center bg-slate-50 rounded-[2rem] border-4 border-dashed border-slate-200">
                    <p class="text-slate-400 font-black uppercase tracking-[0.3em] text-sm">Belum ada artikel yang diterbitkan.</p>
                </div>
            @endforelse
        </div>

        {{-- PAGINATION CONTAINER --}}
        <div class="mt-24 flex justify-center">
            <div class="brutal-pagination">
                {{ $articles->links() }}
            </div>
        </div>

    </div>
</div>

<style>
    /* Styling Pagination Laravel agar matching */
    .brutal-pagination nav svg { width: 20px; }
    .brutal-pagination nav span, .brutal-pagination nav a {
        border: 2px solid #064e3b !important;
        border-radius: 8px !important;
        font-weight: 800 !important;
        margin: 0 4px;
    }
</style>
@endsection