@foreach($recommendations as $competition)
    <a href="{{ route('competitions.show', $competition) }}"
       data-track-type="dashboard_card"
       data-competition-id="{{ $competition->id }}"
       class="group bg-white rounded-xl border {{ $competition->is_free ? 'border-green-300 ring-1 ring-green-200' : 'border-gray-200' }} overflow-hidden shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 flex flex-col animate-fade-in-up opacity-0">

        <!-- Image with FREE overlay -->
        <div class="aspect-[3/2] bg-gray-100 overflow-hidden relative">
            @if($competition->thumbnail_path || $competition->image_url)
                <img
                    src="{{ $competition->thumbnail_path ? asset('storage/' . $competition->thumbnail_path) : $competition->image_url }}"
                    alt="{{ $competition->name }}"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                    loading="lazy"
                >
            @else
                <div class="w-full h-full flex items-center justify-center bg-gray-100">
                    <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
            @endif

            @if($competition->is_free)
                <div class="absolute top-0 left-0 right-0 bg-green-500 text-white text-center py-1.5 font-bold text-sm tracking-widest uppercase shadow-sm">
                    🎁 FREE Entry
                </div>
            @endif

            @if($competition->tickets_sold > 0 && $competition->tickets_sold <= 200)
                <!-- Low Odds Banner -->
                <div class="absolute bottom-0 left-0 right-0 bg-orange-600/95 backdrop-blur-sm text-white text-center py-1 font-black text-[10px] tracking-widest uppercase">
                    🔥 1 in {{ $competition->tickets_sold }} Chance or better!
                </div>
            @endif
        </div>

        <!-- Content -->
        <div class="p-4 flex flex-col flex-1">
            <!-- Site & Category Badge -->
            <div class="flex items-center gap-2 mb-1">
                @if($competition->site)
                    <span class="text-[10px] font-bold text-indigo-600 uppercase tracking-widest">{{ $competition->site->name }}</span>
                @endif
                @if($competition->category)
                    <span class="text-[10px] font-medium text-gray-400 uppercase tracking-wider flex items-center gap-1">
                        <span class="w-1 h-1 rounded-full bg-gray-300"></span>
                        {{ $competition->category->name }}
                    </span>
                @endif
            </div>

            <!-- Title -->
            <h2 class="text-sm font-semibold text-gray-900 leading-snug line-clamp-2 mb-3 flex-1">
                {{ $competition->name }}
            </h2>

            <!-- Stats Row -->
            <div class="mt-auto space-y-2">
                <!-- Price -->
                <div class="flex items-center justify-between">
                    @if($competition->is_free)
                        <span class="text-base font-bold text-green-600">FREE</span>
                    @else
                        <span class="text-lg font-bold text-gray-900">£{{ number_format($competition->price_per_entry, 2) }}</span>
                    @endif

                    <!-- Draw Date -->
                    @if($competition->draw_date)
                        @if($competition->draw_date->isToday())
                            <span class="text-xs font-bold text-red-600">CLOSES TODAY!</span>
                        @elseif($competition->draw_date->isTomorrow())
                            <span class="text-xs font-bold text-orange-500">CLOSES TOMORROW!</span>
                        @else
                            <span class="text-xs text-gray-400">{{ $competition->draw_date->format('d M Y') }}</span>
                        @endif
                    @endif
                </div>

                <!-- Tickets -->
                @if($competition->max_tickets)
                    @php
                        $remaining = max(0, $competition->max_tickets - ($competition->tickets_sold ?? 0));
                        $pct = $competition->max_tickets > 0 ? (($competition->tickets_sold ?? 0) / $competition->max_tickets) * 100 : 0;
                    @endphp
                    <div>
                        <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                            <span>{{ number_format($remaining) }} left</span>
                            <span>{{ number_format($pct, 0) }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5">
                            <div class="{{ $competition->is_free ? 'bg-green-500' : 'bg-indigo-500' }} h-1.5 rounded-full" style="width: {{ min(100, $pct) }}%"></div>
                        </div>
                    </div>
                @endif

                <!-- CTA -->
                <span class="mt-1 block w-full text-center py-2 px-3 {{ $competition->is_free ? 'bg-green-500 group-hover:bg-green-600' : 'bg-indigo-600 group-hover:bg-indigo-700' }} text-white text-sm font-medium rounded-lg transition-colors">
                    View Details
                </span>
            </div>
        </div>
    </a>
@endforeach