@props(['listing'])

<a href="{{ route('listings.show', $listing) }}"
   class="group bg-surface rounded-xl overflow-hidden border border-line hover:border-brand-400/60 hover:shadow-lg hover:shadow-brand-400/5 transition flex flex-col">
    <div class="relative aspect-[4/3] bg-surface2 overflow-hidden">
        @if ($listing->thumbnail)
            <img src="{{ $listing->thumbnail }}" alt="{{ $listing->title }}" loading="lazy"
                 class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
        @else
            <div class="w-full h-full flex items-center justify-center text-faint">
                <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7h8m-8 4h8m-4 4h4M3 5a2 2 0 012-2h14a2 2 0 012 2v14l-4-2-4 2-4-2-4 2V5z"/></svg>
            </div>
        @endif

        @if ($listing->condition === 'new')
            <span class="absolute top-2 start-2 rounded-md bg-green-500 px-2 py-0.5 text-xs font-bold text-white">جديدة</span>
        @endif
        @if ($listing->is_featured)
            <span class="absolute top-2 end-2 rounded-md bg-brand-400 px-2 py-0.5 text-xs font-bold text-black">مميز</span>
        @endif
    </div>

    <div class="p-4 flex flex-col flex-1">
        <h3 class="font-bold text-fg line-clamp-1 group-hover:text-accent transition">{{ $listing->title }}</h3>

        <div class="mt-2 text-lg font-extrabold text-accent">
            {{ number_format($listing->price) }} <span class="text-sm font-semibold text-muted">جنيه</span>
        </div>

        <div class="mt-3 pt-3 border-t border-line flex items-center flex-wrap gap-x-4 gap-y-1 text-xs text-faint">
            <span class="inline-flex items-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                {{ $listing->year }}
            </span>
            @if (! is_null($listing->mileage))
                <span class="inline-flex items-center gap-1">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    {{ number_format($listing->mileage) }} كم
                </span>
            @endif
            <span class="inline-flex items-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                {{ $listing->governorate->name }}
            </span>
        </div>
    </div>
</a>