@props(['book'])

<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group">
    <!-- Cover -->
    <div class="relative overflow-hidden" style="padding-top: 140%;">
        <img src="{{ $book->cover_url }}"
             alt="{{ $book->title }}"
             class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
             loading="lazy">
        @if($book->is_featured)
        <span class="absolute top-2 left-2 bg-accent text-white text-xs font-bold px-2 py-1 rounded-full">⭐ Unggulan</span>
        @endif
    </div>

    <!-- Info -->
    <div class="p-4">
        <span class="text-xs text-primary font-semibold uppercase tracking-wide">{{ $book->category->name ?? '-' }}</span>
        <h3 class="font-bold text-gray-900 mt-1 line-clamp-2 leading-snug">{{ $book->title }}</h3>
        <p class="text-gray-500 text-sm mt-1">{{ $book->author }}</p>
        <p class="text-gray-600 text-sm mt-2 line-clamp-2">{{ $book->short_description }}</p>

        <div class="flex items-center justify-between mt-4">
            <a href="{{ route('books.show', $book->slug) }}"
               class="text-primary hover:text-primary-light font-semibold text-sm underline">
                Lihat Detail →
            </a>
            @if($book->whatsapp_number)
            <a href="https://wa.me/{{ $book->whatsapp_number }}?text=Halo, saya tertarik dengan buku '{{ urlencode($book->title) }}'"
               target="_blank"
               class="bg-green-500 hover:bg-green-600 text-white text-xs px-3 py-1.5 rounded-lg transition-colors">
               💬 WA
            </a>
            @endif
        </div>
    </div>
</div>