@extends('layouts.frontend') 

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

<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
    
    /* Header Area dengan aksen brand */
    .title-stroke {
        -webkit-text-stroke: 1px #064e3b;
        color: transparent;
    }

    /* Kategori Pill */
    .filter-link {
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    .filter-link.active {
        background-color: #064e3b;
        color: #facc15 !important;
        border-radius: 99px;
        padding: 8px 24px;
    }

    /* Product Card */
    .product-card {
        background: white;
        border-radius: 3rem; /* Konsisten dengan rounded besar */
        padding: 1.5rem;
        border: 1px solid #f1f5f9;
    }

    .img-container {
        border-radius: 2.5rem;
        background: #f1f5f9;
        overflow: hidden;
        position: relative;
    }

    /* Button bergaya premium */
    .btn-detail {
        background: #064e3b;
        color: white;
        border-radius: 1.5rem;
        transition: all 0.3s ease;
        font-weight: 800;
        letter-spacing: 1px;
    }
    .btn-detail:hover {
        background: #facc15;
        color: #064e3b;
        transform: scale(1.05);
    }
</style>

<div class="pt-16 pb-24 bg-white min-h-screen">
    <div class="max-w-7xl mx-auto">
        
        <div class="text-center mb-10">
            <h1 class="text-5xl md:text-7xl font-black text-green-900 mt-2 mb-6">
                Katalog Produk
            </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-lg">
                Tempe Zhi diolah dari kedelai pilihan tanpa kulit, menghasilkan cita rasa yang lebih bersih, gurih, dan tentunya lebih sehat.
            </p>
        </div>

        <div class="flex flex-wrap justify-center items-center gap-4 md:gap-8 mb-6 font-bold uppercase tracking-widest text-xs">
            <a href="{{ route('produk.index') }}" 
               class="filter-link {{ !request('category') ? 'active' : 'text-gray-400' }}">
               Semua Produk
            </a>
            @foreach($categories as $cat)
                <a href="{{ route('produk.index', ['category' => $cat->nama_kategori]) }}" 
                   class="filter-link {{ request('category') == $cat->nama_kategori ? 'active' : 'text-gray-400' }}">
                   {{ $cat->nama_kategori }}
                </a>
            @endforeach
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
        @foreach($products as $product)
            <div class="product-card group">
                <div class="aspect-square bg-gray-50 rounded-2xl border-2 border-gray-100 mb-4 flex items-center justify-center overflow-hidden transition-all duration-500 group-hover:border-green-600 group-hover:shadow-xl relative">
                    
                    @if($product->foto)
                        <img src="{{ asset('storage/'.$product->foto) }}" 
                            class="w-full h-full object-cover ">
                    @else
                        {{-- Placeholder jika foto tidak ada --}}
                        <div class="flex flex-col items-center">
                            <span class="text-[8px] font-black text-gray-300 uppercase tracking-widest">Image Coming Soon</span>
                        </div>
                    @endif
                </div>

                <div class="space-y-2 px-2">
                    <h4 class="font-extrabold text-xl text-green-900 leading-tight group-hover:text-green-700 transition-colors">
                        {{ $product->nama_produk }}
                    </h4>
                    
                    <div class="flex items-center justify-between">
                        <p class="text-xs text-gray-400 font-bold uppercase">
                            {{ $product->berat }} {{ $product->satuan }}
                        </p>
                        <div class="h-px flex-1 bg-gray-100 mx-4"></div>
                    </div>

                    <div class="pt-4 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[10px] text-gray-400 font-bold uppercase">Harga</span>
                            <span class="text-2xl font-black text-green-900">
                                <span class="text-sm font-bold">Rp</span>{{ number_format($product->harga, 0, ',', '.') }}
                            </span>
                        </div>
                    </div>

                    <div class="pt-6">
                        <a href="{{ route('produk.show', $product->id) }}" 
                           class="btn-detail inline-block w-full py-4 text-center text-[11px] shadow-lg shadow-green-900/10">
                           LIHAT DETAIL
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
        </div>

        @if($products->isEmpty())
        <div class="text-center py-20 bg-white rounded-[3rem] border-2 border-dashed border-gray-100">
            <p class="text-gray-400 font-bold italic">Produk sedang dalam proses produksi...</p>
        </div>
        @endif
    </div>
</div>
@endsection