@props(['property'])

<a href="{{ route('properties.show', $property) }}" class="group block h-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:border-stone-300 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2">
    <div class="relative h-56 overflow-hidden bg-stone-200">
        @php
            $image = $property->primaryImage ?? ($property->images->count() > 0 ? $property->images->first() : null);
        @endphp
        @if($image)
            <img src="{{ $image->url }}" 
                 alt="{{ $property->title }}"
                 class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                 loading="lazy"
                 onerror="this.onerror=null; this.src='{{ \App\Helpers\ImageHelper::placeholder(800, 600) }}';">
        @else
            <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-brand-50 via-cyan-50 to-sky-50">
                <svg class="h-20 w-20 text-brand-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
            </div>
        @endif
        
        <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/55 to-transparent"></div>

        @if($property->visibility === 'featured')
            <div class="absolute top-3 left-3 z-10">
                <span class="inline-flex items-center gap-1 rounded-full bg-amber-400 px-3 py-1.5 text-xs font-bold text-amber-950 shadow">
                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    {{ __('messages.featured') }}
                </span>
            </div>
        @endif
        
        <div class="absolute top-3 right-3 z-10">
            @if($property->status === 'available')
                <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500 px-3 py-1.5 text-xs font-semibold text-white shadow">
                    <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-white"></span>
                    {{ __('messages.available') }}
                </span>
            @elseif($property->status === 'rented')
                <span class="inline-flex items-center gap-1.5 rounded-full bg-orange-500 px-3 py-1.5 text-xs font-semibold text-white shadow">
                    {{ __('messages.rented') }}
                </span>
            @elseif($property->status === 'sold')
                <span class="inline-flex items-center gap-1.5 rounded-full bg-red-500 px-3 py-1.5 text-xs font-semibold text-white shadow">
                    {{ __('messages.sold') }}
                </span>
            @endif
        </div>
    </div>
    
    <div class="flex flex-1 flex-col p-5">
        <h3 class="mb-2 min-h-[3.5rem] line-clamp-2 text-lg font-bold text-stone-900 transition-colors duration-300 group-hover:text-brand-700">
            {{ $property->title }}
        </h3>
        
        <div class="mb-3 flex items-center text-sm text-stone-600">
            <svg class="mr-1.5 h-4 w-4 shrink-0 text-stone-400" 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.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            <span class="line-clamp-1">{{ $property->city }}{{ $property->region ? ', ' . $property->region : '' }}</span>
        </div>
        
        <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
            <span class="inline-flex items-center gap-1.5 rounded-full bg-stone-100 px-2.5 py-1 text-xs font-medium capitalize text-stone-600">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
                {{ __('messages.' . $property->type) ?? $property->type }}
            </span>
            @if($property->bedrooms)
                <div class="flex items-center gap-1.5 text-xs text-stone-600">
                    <svg class="h-4 w-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                    <span class="font-medium">{{ $property->bedrooms }} {{ __('messages.bedrooms') }}</span>
                </div>
            @endif
        </div>
        
        @if($property->description)
            <p class="mb-4 line-clamp-2 flex-1 text-sm text-stone-600">
                {{ Str::limit($property->description, 100) }}
            </p>
        @else
            <div class="flex-1"></div>
        @endif
        
        <div class="mt-auto flex items-center justify-between gap-4 border-t border-stone-100 pt-4">
            <div class="text-2xl font-bold text-brand-700 transition-colors group-hover:text-brand-800">
                {{ number_format($property->price, 0) }}
                <span class="text-base font-semibold text-stone-500">{{ $property->currency ?? 'TZS' }}</span>
            </div>

            <span class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-300 group-hover:bg-brand-700 group-hover:shadow-md">
                {{ __('messages.view_details') }}
                <svg class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </span>
        </div>
    </div>
</a>