@php
    $isExternal = ($development['availability_source'] ?? 'internal') === 'external';
    $available = $development['inventory']['available'] ?? null;
    $total = $development['inventory']['total'] ?? null;
    $image = $development['image_url'] ?? '';
@endphp
<div
    class="relative group bg-surface-light dark:bg-surface-dark rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg hover:border-primary/30 transition-all duration-300 flex flex-col">
    <a href="{{ route('realEstate.development.show', ['id' => $development['id']]) }}" class="absolute inset-0 z-10"
        aria-label="Ver {{ $development['name'] }}">
    </a>
    <div class="relative aspect-[4/3] bg-gray-100 dark:bg-gray-800 overflow-hidden">
        <div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500"
            data-alt="Modern house with a pool in a gated community"
            style="background-image: url('{{ $image }}');">
        </div>
        <div class="absolute top-3 left-3 rounded-full px-2.5 py-1 text-xs font-bold text-white shadow-sm {{ $isExternal ? 'bg-amber-600' : 'bg-emerald-600' }}">
            {{ $isExternal ? 'Promoción externa' : ($development['commercial_stage_label'] ?? 'Fraccionamiento propio') }}
        </div>
    </div>
    <div class="p-4 flex flex-col flex-1">
        <div class="flex justify-between items-start mb-2">
            <h3
                class="text-lg font-bold text-text-main dark:text-white leading-tight group-hover:text-primary transition-colors">
                {{ $development['name'] }}</h3>
        </div>
        <div class="flex items-center gap-1 text-text-secondary text-sm mb-4">
            <span class="material-symbols-outlined !text-[16px]">location_on</span>
            <span>{{ $development['full_address'] ?: 'Ubicación sin especificar' }}</span>
        </div>
        @if ($isExternal && !empty($development['developer']['name']))
            <p class="mb-3 text-xs font-semibold text-amber-700 dark:text-amber-400">
                Desarrolla: {{ $development['developer']['name'] }}
            </p>
        @endif
        <!-- Tags -->
        <div class="flex flex-wrap gap-2 mb-4">
            @foreach (array_slice($development['features'] ?? [], 0, 4) as $amenity)
                <span
                    class="inline-flex items-center gap-1 px-2 py-1 rounded bg-background-light dark:bg-gray-800 text-xs font-medium text-gray-600 dark:text-gray-300">
                    @if (!empty($amenity['icon']))
                        <span class="material-symbols-outlined !text-[14px]">{{ $amenity['icon'] }}</span>
                    @endif
                    {{ $amenity['name'] }}
                </span>
            @endforeach
        </div>
        <div class="mt-auto space-y-3">
            @if ($isExternal)
                <div class="rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-xs text-amber-800 dark:border-amber-900/60 dark:bg-amber-900/20 dark:text-amber-300">
                    <div class="flex items-center gap-2 font-bold">
                        <span class="material-symbols-outlined !text-[18px]">sync</span>
                        Consultar disponibilidad
                    </div>
                    <p class="mt-1">El inventario es administrado por el desarrollador.</p>
                </div>
            @else
                <div class="space-y-1">
                    <div class="flex justify-between text-xs font-medium">
                        <span class="text-primary">{{ $available }} disponibles</span>
                        <span class="text-gray-400">Total: {{ $total }}</span>
                    </div>
                    <div class="h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                        @if ($total > 0)
                            <div class="h-full rounded-full bg-primary"
                                style="width: {{ (($total - $available) * 100) / $total }}%"></div>
                        @endif
                    </div>
                </div>
            @endif
            <div class="pt-3 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <div class="flex flex-col">
                    <span
                        class="text-xs text-gray-500">{{ $development['minimum_price'] !== null ? 'Desde' : 'Precio' }}</span>
                    <span
                        class="text-lg font-bold text-text-main dark:text-white">{{ $development['formatted_minimum_price'] ?? 'Consultar' }}</span>
                </div>
                <button
                    class="p-2 text-text-secondary hover:text-primary hover:bg-primary/5 rounded-full transition-colors">
                    <span class="material-symbols-outlined">arrow_forward</span>
                </button>
            </div>
        </div>
    </div>
</div>