@php
    $priceRange = $catalog['price_range'];
    $developmentCount = collect($catalog['results'])->pluck('development_name')->unique()->count();
@endphp

<div class="flex flex-col gap-8">
    @if ($showFiltersDrawer)
        <div class="fixed inset-0 z-[70] flex justify-end overflow-hidden">
            <button aria-label="Cerrar filtros" class="absolute inset-0 bg-slate-950/40 transition-opacity"
                type="button" wire:click="closeFiltersDrawer"></button>

            <aside
                class="relative flex h-full w-screen max-w-md flex-col overflow-hidden border-l border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-[#1a2634]">
                <div class="shrink-0 border-b border-slate-100 bg-white px-5 py-5 dark:border-slate-800 dark:bg-[#1a2634]">
                    <div class="flex items-center justify-between gap-4">
                        <div class="flex items-center gap-3">
                            <div class="rounded-full bg-primary/10 p-2">
                                <span class="material-symbols-outlined text-primary">tune</span>
                            </div>
                            <div>
                                <h2 class="text-lg font-bold text-slate-900 dark:text-white">Filtros</h2>
                                <p class="text-sm text-slate-500 dark:text-slate-400">
                                    Ajusta criterios sin ocupar espacio del listado.
                                </p>
                            </div>
                        </div>
                        <button
                            class="text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
                            type="button" wire:click="closeFiltersDrawer">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>
                </div>

                <div class="flex-1 overflow-y-auto p-5 space-y-8">
                    <div>
                        <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">Tipo de
                            Operacion</label>
                        <div class="flex rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
                            <button
                                class="flex-1 rounded-md bg-white py-2 text-sm font-medium text-primary shadow-sm transition-all dark:bg-slate-700"
                                type="button">Venta</button>
                            <button
                                class="flex-1 rounded-md py-2 text-sm font-medium text-slate-400 transition-all cursor-not-allowed dark:text-slate-500"
                                type="button">Renta</button>
                        </div>
                    </div>

                    <div>
                        <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">Ubicacion</label>
                        <div class="relative">
                            <span
                                class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">location_on</span>
                            <input
                                class="w-full rounded-lg border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                                placeholder="Ciudad o palabra clave" type="text"
                                wire:model.live.debounce.350ms="search" />
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">
                                Fraccionamiento
                            </label>
                            <div class="relative">
                                <span
                                    class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">apartment</span>
                                <select
                                    class="w-full appearance-none rounded-lg border border-slate-200 bg-white py-2.5 pl-10 pr-10 text-sm text-slate-700 outline-none focus:border-primary focus:ring-1 focus:ring-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
                                    wire:model.live="development">
                                    <option value="">Todos los fraccionamientos</option>
                                    @foreach ($catalog['developments'] as $development)
                                        <option value="{{ $development['id'] }}">{{ $development['name'] }}</option>
                                    @endforeach
                                </select>
                                <span
                                    class="material-symbols-outlined pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[20px] text-slate-400">expand_more</span>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">
                                    Manzana
                                </label>
                                <div class="relative">
                                    <span
                                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">grid_view</span>
                                    <input
                                        class="w-full rounded-lg border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                                        placeholder="Ej. 3" type="text" wire:model.live.debounce.350ms="block" />
                                </div>
                            </div>
                            <div>
                                <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">
                                    Lote
                                </label>
                                <div class="relative">
                                    <span
                                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">pin</span>
                                    <input
                                        class="w-full rounded-lg border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                                        placeholder="Ej. 7" type="text" wire:model.live.debounce.350ms="lot" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="mb-3 flex items-center justify-between">
                            <label class="text-xs font-bold uppercase tracking-wider text-slate-500">Precio (MXN)</label>
                            <span class="text-xs font-medium text-primary">
                                {{ $priceRange['selected_floor'] ? \Illuminate\Support\Number::currency($priceRange['selected_floor'], 'MXN', 'es_MX') : \Illuminate\Support\Number::currency($priceRange['floor'], 'MXN', 'es_MX') }}
                                -
                                {{ $priceRange['selected_ceiling'] ? \Illuminate\Support\Number::currency($priceRange['selected_ceiling'], 'MXN', 'es_MX') : \Illuminate\Support\Number::currency($priceRange['ceiling'], 'MXN', 'es_MX') }}
                            </span>
                        </div>
                        <div class="relative mb-4 h-1.5 rounded-full bg-slate-200 dark:bg-slate-700">
                            <div class="absolute bottom-0 top-0 rounded-full bg-primary"
                                style="left: {{ $priceRange['left_percent'] }}%; right: {{ $priceRange['right_percent'] }}%;">
                            </div>
                            <div class="absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-primary bg-white shadow-md"
                                style="left: {{ $priceRange['left_percent'] }}%;"></div>
                            <div class="absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-primary bg-white shadow-md"
                                style="left: {{ 100 - $priceRange['right_percent'] }}%;"></div>
                        </div>
                        <div class="flex gap-2">
                            <div class="relative flex-1">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">$</span>
                                <input
                                    class="w-full rounded-md border border-slate-200 bg-white py-2 pl-6 pr-2 text-xs text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                                    placeholder="{{ $priceRange['floor'] }}" type="number" wire:model.live="minPrice" />
                            </div>
                            <span class="self-center text-slate-400">-</span>
                            <div class="relative flex-1">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">$</span>
                                <input
                                    class="w-full rounded-md border border-slate-200 bg-white py-2 pl-6 pr-2 text-xs text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                                    placeholder="{{ $priceRange['ceiling'] }}" type="number" wire:model.live="maxPrice" />
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">Tipo de
                            Propiedad</label>
                        <select
                            class="w-full rounded-lg border border-slate-200 bg-white p-2.5 text-sm text-slate-700 outline-none focus:border-primary focus:ring-1 focus:ring-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
                            wire:model.live="type">
                            <option value="">Todas las categorias</option>
                            @foreach ($catalog['types'] as $typeOption)
                                <option value="{{ $typeOption['id'] }}">{{ $typeOption['name'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                                <span class="material-symbols-outlined text-[20px] text-slate-400">straighten</span>
                                Superficie minima
                            </span>
                            <div class="flex items-center gap-3 rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
                                <button
                                    class="flex h-7 w-7 items-center justify-center rounded bg-white text-slate-500 shadow-sm transition-colors hover:text-primary disabled:opacity-50 dark:bg-slate-700"
                                    type="button" wire:click="decreaseCounter('minArea', 25)">-</button>
                                <span
                                    class="min-w-[3rem] text-center text-sm font-semibold">{{ is_numeric($minArea) ? $minArea : 0 }}</span>
                                <button
                                    class="flex h-7 w-7 items-center justify-center rounded bg-white text-slate-500 shadow-sm transition-colors hover:text-primary dark:bg-slate-700"
                                    type="button" wire:click="increaseCounter('minArea', 25)">+</button>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                                <span class="material-symbols-outlined text-[20px] text-slate-400">crop_landscape</span>
                                Superficie maxima
                            </span>
                            <div class="flex items-center gap-3 rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
                                <button
                                    class="flex h-7 w-7 items-center justify-center rounded bg-white text-slate-500 shadow-sm transition-colors hover:text-primary dark:bg-slate-700"
                                    type="button" wire:click="decreaseCounter('maxArea', 25)">-</button>
                                <span
                                    class="min-w-[3rem] text-center text-sm font-semibold">{{ is_numeric($maxArea) ? $maxArea : 0 }}</span>
                                <button
                                    class="flex h-7 w-7 items-center justify-center rounded bg-white text-slate-500 shadow-sm transition-colors hover:text-primary dark:bg-slate-700"
                                    type="button" wire:click="increaseCounter('maxArea', 25)">+</button>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                                <span class="material-symbols-outlined text-[20px] text-slate-400">sell</span>
                                Tope precio m2
                            </span>
                            <div class="flex items-center gap-3 rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
                                <button
                                    class="flex h-7 w-7 items-center justify-center rounded bg-white text-slate-500 shadow-sm transition-colors hover:text-primary dark:bg-slate-700"
                                    type="button" wire:click="decreaseCounter('maxPricePerSqm', 50)">-</button>
                                <span
                                    class="min-w-[3rem] text-center text-sm font-semibold">{{ is_numeric($maxPricePerSqm) ? $maxPricePerSqm : 0 }}</span>
                                <button
                                    class="flex h-7 w-7 items-center justify-center rounded bg-white text-slate-500 shadow-sm transition-colors hover:text-primary dark:bg-slate-700"
                                    type="button" wire:click="increaseCounter('maxPricePerSqm', 50)">+</button>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="mb-3 block text-xs font-bold uppercase tracking-wider text-slate-500">Amenidades</label>
                        <div class="grid grid-cols-2 gap-3">
                            @foreach ($catalog['amenities'] as $amenity)
                                <label class="group flex cursor-pointer items-center gap-2"
                                    wire:key="amenity-{{ $amenity['id'] }}">
                                    <div class="relative flex items-center">
                                        <input
                                            class="peer h-4 w-4 cursor-pointer rounded border-slate-300 text-primary focus:ring-primary/20"
                                            type="checkbox" value="{{ $amenity['id'] }}" wire:model.live="amenities" />
                                    </div>
                                    <span
                                        class="text-sm text-slate-600 transition-colors group-hover:text-primary dark:text-slate-400">{{ $amenity['name'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="shrink-0 border-t border-slate-100 bg-white p-4 dark:border-slate-800 dark:bg-[#1a2634]">
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <button
                            class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
                            type="button" wire:click="clearFilters">
                            <span class="material-symbols-outlined text-[18px]">restart_alt</span>
                            Limpiar todo
                        </button>
                        <button
                            class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-primary/20 transition-colors hover:bg-primary-dark"
                            type="button" wire:click="closeFiltersDrawer">
                            <span class="material-symbols-outlined text-[18px]">search</span>
                            Ver {{ number_format($catalog['total_count']) }} resultados
                        </button>
                    </div>
                </div>
            </aside>
        </div>
    @endif

    <section class="flex-1">
        <div
            class="mb-6 flex flex-col items-start justify-between gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-[#1a2634] sm:flex-row sm:items-center">
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white">Lotes Disponibles</h2>
                <p class="text-sm text-slate-500">Mostrando {{ number_format($catalog['visible_count']) }} de
                    {{ number_format($catalog['total_count']) }} lotes en {{ number_format($developmentCount) }}
                    desarrollos</p>
            </div>
            <div class="flex w-full flex-wrap items-center gap-3 sm:w-auto">
                <button
                    class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 sm:w-auto"
                    type="button" wire:click="openFiltersDrawer">
                    <span class="material-symbols-outlined text-[18px]">filter_alt</span>
                    Filtros
                    @if ($this->activeFiltersCount() > 0)
                        <span
                            class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-bold text-white">
                            {{ $this->activeFiltersCount() }}
                        </span>
                    @endif
                </button>
                <div class="relative group flex-1 sm:flex-none">
                    <select
                        class="w-full appearance-none rounded-lg border border-slate-200 bg-slate-50 py-2.5 pl-3 pr-10 text-sm font-medium text-slate-700 outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 cursor-pointer dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
                        wire:model.live="sort">
                        @foreach ($catalog['sort_options'] as $sortOption)
                            <option value="{{ $sortOption['value'] }}">{{ $sortOption['label'] }}</option>
                        @endforeach
                    </select>
                    <span
                        class="material-symbols-outlined pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[20px] text-slate-400">expand_more</span>
                </div>
                <div class="flex rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
                    <button class="rounded bg-white p-1.5 text-primary shadow-sm dark:bg-slate-700" type="button">
                        <span class="material-symbols-outlined text-[20px]">grid_view</span>
                    </button>
                    <button
                        class="rounded p-1.5 text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
                        type="button">
                        <span class="material-symbols-outlined text-[20px]">view_list</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="mb-6 flex flex-wrap gap-2">
            <span
                class="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                Venta
            </span>
            @foreach ($catalog['active_filters'] as $filter)
                <span
                    class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
                    {{ $filter['label'] }}
                    @if ($filter['key'] === 'amenity')
                        <button class="hover:text-red-500" type="button"
                            wire:click="removeFilter('amenity', '{{ $filter['value'] }}')">
                            <span class="material-symbols-outlined text-[14px]">close</span>
                        </button>
                    @else
                        <button class="hover:text-red-500" type="button"
                            wire:click="removeFilter('{{ $filter['key'] }}')">
                            <span class="material-symbols-outlined text-[14px]">close</span>
                        </button>
                    @endif
                </span>
            @endforeach
            @if ($catalog['active_filters'] !== [])
                <button class="ml-2 text-xs font-medium text-slate-500 underline hover:text-primary" type="button"
                    wire:click="clearFilters">
                    Limpiar filtros
                </button>
            @endif
        </div>

        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
            @forelse ($catalog['results'] as $lot)
                <div
                    class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10 dark:border-slate-800 dark:bg-[#1a2634]">
                    <div class="relative h-64 overflow-hidden">
                        <img alt="{{ $lot['title'] }}"
                            class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                            src="{{ $lot['image_url'] }}" />
                        <div class="absolute left-3 top-3 flex gap-2">
                            <span
                                class="rounded bg-primary px-3 py-1 text-xs font-bold uppercase text-white shadow-sm">{{ $lot['primary_badge'] }}</span>
                        </div>
                        <div
                            class="absolute bottom-3 right-3 flex items-center gap-1 rounded bg-black/50 px-2 py-1 text-xs text-white backdrop-blur-sm">
                            <span class="material-symbols-outlined text-[14px]">photo_camera</span>
                            {{ $lot['gallery_count'] }}
                        </div>
                    </div>
                    <div class="flex flex-1 flex-col p-5">
                        <div class="mb-2 flex items-start justify-between">
                            <h3 class="text-2xl font-bold text-primary">{{ $lot['price_formatted'] }} <span
                                    class="text-sm font-normal text-slate-500 dark:text-slate-400">{{ $lot['price_suffix'] }}</span>
                            </h3>
                        </div>
                        <h4 class="mb-1 truncate font-bold text-slate-900 dark:text-white">{{ $lot['title'] }}</h4>
                        <p class="mb-2 flex items-center gap-1 text-sm text-slate-500 dark:text-slate-400">
                            <span class="material-symbols-outlined text-[16px]">apartment</span>
                            {{ $lot['development_name'] }}
                        </p>
                        <p class="mb-4 flex items-center gap-1 text-sm text-slate-500 dark:text-slate-400">
                            <span class="material-symbols-outlined text-[16px]">location_on</span>
                            {{ $lot['location_label'] }}
                        </p>
                        <div
                            class="mb-4 flex items-center gap-4 border-b border-t border-slate-100 py-3 dark:border-slate-800">
                            @foreach ($lot['metrics'] as $metric)
                                <div class="flex items-center gap-1.5" title="{{ $metric['value'] }}">
                                    <span
                                        class="material-symbols-outlined text-[20px] text-slate-400">{{ $metric['icon'] }}</span>
                                    <span
                                        class="text-sm font-semibold text-slate-700 dark:text-slate-200">{{ $metric['value'] }}</span>
                                </div>
                                @if (!$loop->last)
                                    <div class="h-4 w-px bg-slate-200 dark:bg-slate-700"></div>
                                @endif
                            @endforeach
                        </div>
                        <p class="mb-4 text-xs text-slate-500 dark:text-slate-400">
                            {{ $lot['price_per_sqm_formatted'] ?: 'Precio por m2 disponible con asesor.' }}
                        </p>
                        <div class="mt-auto flex gap-2">
                            <a class="flex-1 rounded-lg bg-slate-100 py-2.5 text-center text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
                                href="{{ $lot['detail_url'] }}">Ver Detalles</a>
                            <a class="flex w-12 items-center justify-center rounded-lg bg-primary text-white shadow-sm shadow-primary/30 transition-colors hover:bg-primary-dark"
                                href="{{ $lot['contact_url'] }}" rel="noreferrer" target="_blank">
                                <span class="material-symbols-outlined text-[20px]">chat</span>
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div
                    class="rounded-2xl border border-dashed border-slate-300 bg-white/80 p-10 text-center md:col-span-2 xl:col-span-3 dark:border-slate-700 dark:bg-slate-900/50">
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white">No encontramos lotes con esos filtros
                    </h3>
                    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">Prueba limpiando criterios o ajustando
                        el
                        rango de precio y superficie.</p>
                    <button
                        class="mt-5 inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white"
                        type="button" wire:click="clearFilters">
                        <span class="material-symbols-outlined text-[18px]">restart_alt</span>
                        Limpiar filtros
                    </button>
                </div>
            @endforelse
        </div>

        @if ($catalog['has_more_results'])
            <div class="mt-12 flex justify-center">
                <button
                    class="rounded-lg border border-slate-200 bg-white px-8 py-3 font-semibold text-slate-700 shadow-sm transition-all duration-300 hover:border-primary hover:text-primary dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
                    type="button" wire:click="loadMore">
                    Ver mas propiedades
                </button>
            </div>
        @endif

        <section class="mt-16 border-y border-slate-100 bg-white py-16 dark:border-slate-800 dark:bg-slate-900">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="mb-10 text-center md:text-left">
                    <span class="text-primary font-bold text-sm tracking-widest uppercase">Inventario activo</span>
                    <h2 class="mt-2 text-3xl font-bold text-slate-900 dark:text-white">Desarrollos Exclusivos</h2>
                    <p class="mt-3 max-w-2xl text-slate-500 dark:text-slate-400">Consulta disponibilidad real y arranca
                        conversacion con un asesor desde la landing.</p>
                </div>
                <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                    @foreach ($catalog['development_highlights'] as $development)
                        <div
                            class="flex flex-col overflow-hidden rounded-2xl border border-slate-100 bg-slate-50 transition-all duration-300 hover:shadow-lg dark:border-slate-700 dark:bg-slate-800/50 lg:flex-row">
                            <div class="relative h-64 lg:h-auto lg:w-2/5">
                                <img class="h-full w-full object-cover" src="{{ $development['image_url'] }}"
                                    alt="{{ $development['name'] }}" />
                                <div class="absolute inset-0 bg-black/10"></div>
                            </div>
                            <div class="flex flex-col justify-center p-6 lg:w-3/5 lg:p-8">
                                <div class="mb-2 flex items-start justify-between gap-3">
                                    <h3 class="text-xl font-bold text-slate-900 dark:text-white">
                                        {{ $development['name'] }}</h3>
                                    <span
                                        class="whitespace-nowrap rounded px-2 py-1 text-xs font-bold {{ $development['status_badge_class'] }}">{{ $development['status_label'] }}</span>
                                </div>
                                <p class="mb-4 text-sm text-slate-500 dark:text-slate-400">
                                    {{ $development['description'] }}</p>
                                <div class="mb-5">
                                    <div class="mb-1 flex justify-between text-xs font-semibold text-slate-500">
                                        <span>Comercializacion</span>
                                        <span>{{ $development['commerce_percent'] }}%</span>
                                    </div>
                                    <div class="h-2 w-full rounded-full bg-slate-200 dark:bg-slate-700">
                                        <div class="h-2 rounded-full bg-primary"
                                            style="width: {{ $development['commerce_percent'] }}%"></div>
                                    </div>
                                    <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                                        {{ $development['availability_label'] }}
                                        {{ $development['availability_caption'] }}
                                    </p>
                                </div>
                                <div class="mb-6 flex gap-4">
                                    @foreach ($development['amenities'] as $amenity)
                                        <div
                                            class="flex flex-col items-center gap-1 text-slate-600 dark:text-slate-300">
                                            <span
                                                class="material-symbols-outlined rounded-lg bg-white p-2 shadow-sm dark:bg-slate-800">{{ $amenity['icon'] }}</span>
                                            <span class="text-[10px] font-bold uppercase">{{ $amenity['name'] }}</span>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-auto flex gap-3 pt-2">
                                    <a class="flex h-10 flex-1 items-center justify-center rounded-lg bg-primary text-sm font-bold text-white shadow-sm transition-colors hover:bg-blue-600 hover:shadow-md"
                                        href="{{ $development['detail_url'] }}">
                                        Ver disponibilidad
                                    </a>
                                    <a class="flex h-10 flex-1 items-center justify-center rounded-lg border border-slate-200 bg-white text-sm font-bold text-slate-700 transition-colors hover:border-primary hover:text-primary dark:border-slate-700 dark:bg-transparent dark:text-slate-200 dark:hover:text-primary"
                                        href="{{ $development['contact_url'] }}" rel="noreferrer" target="_blank">
                                        Agenda recorrido
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    </section>
</div>