@props(['kitab'])

<a href="{{ route('kitab.show', $kitab->slug) }}"
   class="group relative flex h-full overflow-hidden rounded-2xl
          bg-white border border-gray-100 shadow-sm
          transition-all duration-300 ease-out
          hover:-translate-y-1 hover:shadow-xl hover:border-emerald-200">

    {{-- ================= COVER (LEFT) ================= --}}
    <div class="relative w-[150px] sm:w-[170px] md:w-[190px]
                bg-gray-100 overflow-hidden flex-shrink-0">

        @if($kitab->cover_image && file_exists(storage_path('app/public/' . $kitab->cover_image)))
            <img
                src="{{ asset('storage/' . $kitab->cover_image) }}"
                alt="{{ $kitab->title }}"
                class="absolute inset-0 w-full h-full object-cover
                       transition-transform duration-500 ease-out
                       group-hover:scale-105">
        @else
            <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400">
                <i class="fas fa-book text-3xl mb-1"></i>
                <span class="text-xs">No Cover</span>
            </div>
        @endif

        {{-- PDF Badge --}}
        <span class="absolute top-2 left-2 px-2 py-0.5 rounded-full text-[11px] font-medium
                     bg-white/90 backdrop-blur border border-gray-200">
            <i class="fas fa-file-pdf text-red-500 mr-1"></i> PDF
        </span>
    </div>

    {{-- ================= CONTENT (RIGHT) ================= --}}
    <div class="flex flex-col flex-1 p-4">

        {{-- Category --}}
        @if($kitab->category)
            <span class="mb-1.5 w-fit px-2.5 py-0.5 rounded-full text-xs font-medium
                         bg-emerald-50 text-emerald-700 border border-emerald-100">
                <i class="fas fa-folder mr-1"></i>
                {{ $kitab->category->name }}
            </span>
        @endif

        {{-- Title --}}
        <h3 class="text-base font-bold text-gray-900 leading-snug line-clamp-2
                   group-hover:text-emerald-700 transition-colors">
            {{ $kitab->title }}
        </h3>

        {{-- Description --}}
        @if($kitab->deskripsi)
            <p class="mt-1.5 text-sm text-gray-500 line-clamp-2">
                {{ Str::limit($kitab->deskripsi, 110) }}
            </p>
        @endif

        {{-- File Size --}}
        @if($kitab->formatted_file_size)
            <div class="mt-2 text-xs text-gray-500">
                <i class="fas fa-hdd text-gray-400 mr-1"></i>
                {{ $kitab->formatted_file_size }}
            </div>
        @endif

        {{-- FOOTER --}}
        <div class="mt-auto pt-3 border-t border-gray-100
                    flex items-center justify-between text-xs text-gray-500">

            <div class="flex items-center gap-4">
                <span>
                    <i class="fas fa-eye text-gray-400 mr-1"></i>
                    {{ $kitab->view_count ?? 0 }}
                </span>
                <span>
                    <i class="fas fa-download text-gray-400 mr-1"></i>
                    {{ $kitab->download_count ?? 0 }}
                </span>
            </div>

            <span class="font-medium text-emerald-600">
                <i class="fas fa-download mr-1"></i>
                Unduh
            </span>
        </div>
    </div>

    {{-- Hover Ring --}}
    <span class="pointer-events-none absolute inset-0 rounded-2xl
                 ring-1 ring-transparent group-hover:ring-emerald-200 transition"></span>
</a>