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

<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-shadow duration-200 flex flex-col <?php echo e($featured ? 'ring-2 ring-yellow-400' : ''); ?> <?php echo e($deal->is_expired ? 'opacity-60' : ''); ?>">
    <!-- Image -->
    <a href="<?php echo e(route('deals.show', $deal)); ?>" class="block relative">
        <div class="aspect-[16/9] overflow-hidden relative">
            <div class="absolute inset-0 bg-gradient-to-br <?php echo e($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>
            <?php if($deal->image_url): ?>
                <img src="<?php echo e($deal->image_url); ?>"
                     alt="<?php echo e($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()">
            <?php endif; ?>
        </div>

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

        <!-- Badges (top-right) -->
        <div class="absolute top-2 right-2 flex gap-1.5">
            <?php if($deal->is_expired): ?>
                <span class="bg-gray-700 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">EXPIRED</span>
            <?php elseif($deal->is_hot): ?>
                <span class="bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">🔥 HOT</span>
            <?php elseif($deal->is_new): ?>
                <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded shadow-sm">NEW</span>
            <?php 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">
            <?php if($deal->domain): ?>
                <img src="https://www.google.com/s2/favicons?domain=<?php echo e($deal->domain); ?>&sz=32"
                     alt="" class="w-4 h-4 rounded-sm" loading="lazy" onerror="this.remove()">
            <?php endif; ?>
            <span class="font-medium text-gray-700"><?php echo e($deal->store_name ?: $deal->domain); ?></span>
            <span>&middot;</span>
            <span><?php echo e($deal->created_at->diffForHumans()); ?></span>
        </div>

        <!-- Title -->
        <a href="<?php echo e(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">
                <?php echo e($deal->title); ?>

            </h3>
        </a>

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

        <?php if($deal->is_ending_soon): ?>
            <div class="text-xs font-medium text-red-600 mb-2">
                ⏰ Ends <?php echo e($deal->expires_at->diffForHumans()); ?>

            </div>
        <?php 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(<?php echo e($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 <?php echo e($deal->score > 0 ? 'text-orange-600' : 'text-gray-600'); ?> min-w-[1.5rem] text-center" data-score="<?php echo e($deal->id); ?>"><?php echo e($deal->score); ?></span>
                <button onclick="vote(<?php echo e($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="<?php echo e(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>
                <?php echo e($deal->comments_count ?? $deal->comments->count()); ?>

            </a>

            <!-- External link -->
            <a href="<?php echo e($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>
<?php /**PATH /var/www/html/resources/views/deals/partials/deal-card.blade.php ENDPATH**/ ?>