02강: 도서 카드 <x-book-card> 컴포넌트 & 블레이드 필수 지시어

<!-- resources/views/components/book-card.blade.php -->
@props([
    'book',
    'featured' => false
])

<div class="bg-white rounded-xl border {{ $featured ? 'border-indigo-400 shadow-indigo-100 shadow-lg ring-2 ring-indigo-500/20' : 'border-slate-200 shadow-sm' }} overflow-hidden hover:shadow-md hover:-translate-y-1 transition duration-200 flex flex-col justify-between">
    <div>
        <!-- 1. 도서 표지 영역 (상단 뱃지 포함) -->
        <div class="relative bg-slate-100 aspect-[3/4] flex items-center justify-center overflow-hidden">
            <span class="text-5xl">📖</span>

            <!-- 할인 뱃지 (@if 지시어 활용) -->
            @if(isset($book['discount_rate']) && $book['discount_rate'] > 0)
                <span class="absolute top-2 left-2 bg-rose-500 text-white text-xs font-bold px-2 py-0.5 rounded-full shadow">
                    {{ $book['discount_rate'] }}% 할인
                </span>
            @endif

            <!-- 포맷 뱃지 (종이책 vs 전자책) -->
            <span class="absolute top-2 right-2 text-xs font-semibold px-2 py-0.5 rounded {{ $book['format'] === 'ebook' ? 'bg-sky-100 text-sky-700' : 'bg-amber-100 text-amber-800' }}">
                {{ $book['format'] === 'ebook' ? '⚡ eBook' : '📦 종이책' }}
            </span>
        </div>

        <!-- 2. 도서 정보 본문 -->
        <div class="p-4">
            <div class="text-xs text-slate-400 mb-1">ISBN: {{ $book['isbn'] }}</div>
            <h3 class="font-bold text-slate-800 text-base line-clamp-1 hover:text-indigo-600 transition">
                <a href="{{ route('books.show', $book['id']) }}">{{ $book['title'] }}</a>
            </h3>
            <p class="text-xs text-slate-500 mt-1">
                {{ $book['author'] }} 저 · <span class="text-slate-400">{{ $book['publisher'] }}</span>
            </p>

            <!-- 가격 표시 영역 -->
            <div class="mt-3 flex items-baseline space-x-2">
                @if(isset($book['sale_price']))
                    <span class="text-lg font-bold text-rose-600">{{ number_format($book['sale_price']) }}원</span>
                    <span class="text-xs text-slate-400 line-through">{{ number_format($book['price']) }}원</span>
                @else
                    <span class="text-lg font-bold text-slate-900">{{ number_format($book['price']) }}원</span>
                @endif
            </div>
        </div>
    </div>

    <!-- 3. 카드 하단 액션 버튼 -->
    <div class="p-4 pt-0 flex space-x-2">
        <a href="{{ route('books.show', $book['id']) }}" class="flex-1 text-center py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-lg transition">
            상세 보기
        </a>
        <button class="px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-lg transition">
            🛒 담기
        </button>
    </div>
</div>

<x-layouts.app>
    <x-slot:title>
        지니샵 — 실시간 전체 도서 카탈로그
    </x-slot:title>

    <x-slot:header>
        <h1 class="text-2xl font-bold text-slate-900">📚 지니샵 전체 도서 목록</h1>
        <p class="text-sm text-slate-500 mt-1">지니와 도로시가 추천하는 이달의 필독 도서입니다.</p>
    </x-slot:header>

    <!-- 4열 반응형 도서 그리드 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @forelse($books as $book)
            <!-- 컴포넌트 재사용! :featured 속성 조건부 전달 -->
            <x-book-card :book="$book" :featured="$book['is_bestseller']" />
        @empty
            <div class="col-span-full py-16 text-center bg-white rounded-xl border border-dashed border-slate-300">
                <span class="text-4xl">🔍</span>
                <p class="mt-2 text-slate-600 font-medium">검색 조건에 맞는 도서가 없습니다.</p>
                <p class="text-xs text-slate-400 mt-1">다른 검색어나 카테고리를 선택해 보세요.</p>
            </div>
        @endforelse
    </div>
</x-layouts.app>