@php
    $gradient = $placeholderGradients[$deal->category] ?? 'from-slate-500 to-gray-600';
@endphp

<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-shadow duration-200 flex flex-col {{ $featured ? 'ring-2 ring-yellow-400' : '' }} {{ $deal->is_expired ? 'opacity-60' : '' }}">
    <!-- Image -->
    <a href="{{ route('deals.show', $deal) }}" class="block relative">
        <div class="aspect-[16/9] overflow-hidden relative">
            <div class="absolute inset-0 bg-gradient-to-br {{ $gradient }} flex items-center justify-center">
                <svg class="w-14 h-14 text-white/40" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"></path>
                </svg>
            </div>
            @if($deal->image_url)
                <img src="{{ $deal->image_url }}"
                     alt="{{ $deal->title }}"
                     loading="lazy"
                     class="absolute inset-0 w-full h-full object-cover bg-white hover:scale-105 transition-transform duration-300"
                     onerror="this.remove()">
            @endif
        </div>

        <!-- Badges (top-left) -->
        <div class="absolute top-2 left-2 flex gap-1.5">
            @if($deal->savings_percent)
                <span class="bg-green-600 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">
                    -{{ $deal->savings_percent }}%
                </span>
            @endif
            @if($featured)
                <span class="bg-yellow-400 text-yellow-900 text-xs font-bold px-2 py-1 rounded shadow-sm">
                    FEATURED
                </span>
            @endif
        </div>

        <!-- Badges (top-right) -->
        <div class="absolute top-2 right-2 flex gap-1.5">
            @if($deal->is_expired)
                <span class="bg-gray-700 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">EXPIRED</span>
            @elseif($deal->is_hot)
                <span class="bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">🔥 HOT</span>
            @elseif($deal->is_new)
                <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">NEW</span>
            @endif
        </div>
    </a>

    <!-- Body -->
    <div class="p-4 flex-1 flex flex-col">
        <!-- Store + time -->
        <div class="flex items-center gap-2 text-xs text-gray-500 mb-2">
            @if($deal->domain)
                <img src="https://www.google.com/s2/favicons?domain={{ $deal->domain }}&sz=32"
                     alt="" class="w-4 h-4 rounded-sm" loading="lazy" onerror="this.remove()">
            @endif
            <span class="font-medium text-gray-700">{{ $deal->store_name ?: $deal->domain }}</span>
            <span>&middot;</span>
            <span>{{ $deal->created_at->diffForHumans() }}</span>
        </div>

        <!-- Title -->
        <a href="{{ route('deals.show', $deal) }}" class="block mb-2">
            <h3 class="font-semibold text-gray-900 leading-snug line-clamp-2 hover:text-orange-600 transition-colors">
                {{ $deal->title }}
            </h3>
        </a>

        <!-- Price -->
        @if($deal->price)
            <div class="flex items-baseline gap-2 mb-2">
                <span class="text-xl font-bold text-green-600">${{ number_format($deal->price, 2) }}</span>
                @if($deal->original_price)
                    <span class="text-sm text-gray-400 line-through">${{ number_format($deal->original_price, 2) }}</span>
                @endif
            </div>
        @endif

        @if($deal->is_ending_soon)
            <div class="text-xs font-medium text-red-600 mb-2">
                ⏰ Ends {{ $deal->expires_at->diffForHumans() }}
            </div>
        @endif

        <!-- Footer -->
        <div class="mt-auto pt-3 border-t border-gray-100 flex items-center justify-between">
            <!-- Votes -->
            <div class="flex items-center gap-1">
                <button onclick="vote({{ $deal->id }}, 'up')" class="p-1 text-gray-400 hover:text-green-600 transition-colors" title="Good deal">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                    </svg>
                </button>
                <span class="text-sm font-bold {{ $deal->score > 0 ? 'text-orange-600' : 'text-gray-600' }} min-w-[1.5rem] text-center" data-score="{{ $deal->id }}">{{ $deal->score }}</span>
                <button onclick="vote({{ $deal->id }}, 'down')" class="p-1 text-gray-400 hover:text-red-600 transition-colors" title="Not a great deal">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>

            <!-- Comments -->
            <a href="{{ route('deals.show', $deal) }}" class="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-900 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                </svg>
                {{ $deal->comments_count ?? $deal->comments->count() }}
            </a>

            <!-- External link -->
            <a href="{{ $deal->url }}" target="_blank" rel="noopener"
               class="inline-flex items-center gap-1 text-sm font-semibold text-orange-600 hover:text-orange-700 transition-colors">
                Get Deal
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                </svg>
            </a>
        </div>
    </div>
</div>