@extends('layouts.dashboard.inface', ['section' => 'developments'])

@section('extra-styles')
    <style>
        .icon-filled {
            font-variation-settings: 'FILL' 1;
        }
    </style>
@endsection

@section('navbar-buttons')
    <a href="{{ route('realEstate.development.create') }}"
        class="bg-primary hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg flex items-center gap-2 font-medium shadow-lg shadow-primary/20 transition-all">
        <span class="material-symbols-outlined !text-[20px]">add</span>
        Nuevo Fraccionamiento
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6">
        <div class="max-w-[1400px] mx-auto flex flex-col gap-6">
            <!-- Breadcrumbs & Heading -->
            <div class="flex flex-col gap-4">
                <div class="flex items-center gap-2 text-sm text-text-secondary">
                    <a class="hover:text-primary" href="#">Home</a>
                    <span class="text-gray-400">/</span>
                    <span class="text-text-main dark:text-white font-medium">Fraccionamientos</span>
                </div>
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                    <div>
                        <h2 class="text-3xl font-bold text-text-main dark:text-white tracking-tight">
                            Fraccionamientos Inventory</h2>
                        <p class="text-text-secondary mt-1">Manage your residential development listings and
                            inventory availability.</p>
                    </div>

                </div>
            </div>
            <!-- Filters & Controls -->
            <div
                class="bg-surface-light dark:bg-surface-dark p-4 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm flex flex-col md:flex-row gap-4 items-center justify-between">
                <div class="flex flex-wrap gap-3 w-full md:w-auto">
                    <!-- Location Filter -->
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 px-3 py-2 bg-background-light dark:bg-gray-800 rounded-lg text-sm font-medium text-text-main dark:text-gray-200 border border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-all">
                            <span class="material-symbols-outlined !text-[18px] text-text-secondary">location_on</span>
                            City: All
                            <span class="material-symbols-outlined !text-[18px] text-text-secondary">expand_more</span>
                        </button>
                    </div>
                    <!-- Status Filter -->
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 px-3 py-2 bg-background-light dark:bg-gray-800 rounded-lg text-sm font-medium text-text-main dark:text-gray-200 border border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-all">
                            <span class="material-symbols-outlined !text-[18px] text-text-secondary">verified</span>
                            Status: Active
                            <span class="material-symbols-outlined !text-[18px] text-text-secondary">expand_more</span>
                        </button>
                    </div>
                    <!-- Price Filter -->
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 px-3 py-2 bg-background-light dark:bg-gray-800 rounded-lg text-sm font-medium text-text-main dark:text-gray-200 border border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-all">
                            <span class="material-symbols-outlined !text-[18px] text-text-secondary">attach_money</span>
                            Price Range
                            <span class="material-symbols-outlined !text-[18px] text-text-secondary">expand_more</span>
                        </button>
                    </div>
                </div>
                <div class="flex items-center gap-2 w-full md:w-auto justify-end">
                    <div class="text-sm text-text-secondary mr-2 hidden lg:block">Showing <span
                            class="font-semibold text-text-main dark:text-white">8</span> of <span
                            class="font-semibold text-text-main dark:text-white">24</span> results</div>
                    <div
                        class="flex bg-background-light dark:bg-gray-800 rounded-lg p-1 border border-gray-200 dark:border-gray-700">
                        <button class="p-1.5 rounded bg-white dark:bg-gray-700 shadow-sm text-primary">
                            <span class="material-symbols-outlined !text-[20px]">grid_view</span>
                        </button>
                        <button class="p-1.5 rounded text-text-secondary hover:text-text-main dark:hover:text-white">
                            <span class="material-symbols-outlined !text-[20px]">view_list</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- Grid Layout -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- Card 1 -->
                <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', 1) }}" class="absolute inset-0 z-10"
                        aria-label="Ver agente ">
                    </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('https://lh3.googleusercontent.com/aida-public/AB6AXuA7dDq3GMeejyKFAU949__e3B0zCmBujLItVcnc-ETPucZuLPB50z8QLFQo194Ospzc3JhtUfmIBSpSVOZT8MOnK1kZp-pemuKXGzTpdvhryPUAEBhZRoXKy9E3V_1tFUXiGHRbiQxhHWSLiPFJcpdvh23-9dZoY0Sq2-n5BmBVdih_yfUeUD1PGejRiyn5pkRqjzjejT6ydz7spAYhvvzvkSYtGhxK3OWyy9WqOaD8NXkhHft4eo7zOeu19evWIWWtlDBtE9aurZM');">
                        </div>
                        <div
                            class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2.5 py-1 rounded-full shadow-sm">
                            Entrega Inmediata</div>
                        <button
                            class="absolute top-3 right-3 p-1.5 rounded-full bg-white/90 dark:bg-black/50 text-gray-500 dark:text-gray-300 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100">
                            <span class="material-symbols-outlined !text-[18px]">favorite</span>
                        </button>
                    </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">
                                Residencial Los Olivos</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>Querétaro, Qro.</span>
                        </div>
                        <!-- Tags -->
                        <div class="flex flex-wrap gap-2 mb-4">
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">pool</span> Alberca
                            </span>
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">security</span> Seguridad
                            </span>
                        </div>
                        <div class="mt-auto space-y-3">
                            <!-- Inventory Bar -->
                            <div class="space-y-1">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-primary">85 disponibles</span>
                                    <span class="text-gray-400">Total: 200</span>
                                </div>
                                <div class="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-primary rounded-full" style="width: 57%"></div>
                                </div>
                            </div>
                            <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">Desde</span>
                                    <span class="text-lg font-bold text-text-main dark:text-white">$2,450,000
                                        MXN</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>
                <!-- Card 2 -->
                <div
                    class="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">
                    <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="Luxury modern villa exterior with garden"
                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAoMS6Nbz-tLF2EVS-B2SmuLrmMCHeeb15Qi9LmZHfP-SQ_xBrEAVO755t3-CY3bpdVm7uXEY2h8um524cLI3tTVXSm5EdN0Ft2rzjNSNf6u9IVOaAxISV-Ws0OuspRGlbyf92ulDi5IHaEEiNrpo_etoj2Tm_i7zoRZ_0Y37Lqb9rmRIbBRdLmRswfIYiyCcrfxCtL4N7roI8uCXHTq6EcCMImzKy_zojyk8ymrJM19_niwE_OMLiitKB4Dy4s8JjNkjj19Wru3C4');">
                        </div>
                        <div
                            class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-2.5 py-1 rounded-full shadow-sm">
                            Pre-venta</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">
                                Cumbres del Lago</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>Juriquilla, Qro.</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">fitness_center</span> Gym
                            </span>
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">park</span> Parques
                            </span>
                        </div>
                        <div class="mt-auto space-y-3">
                            <div class="space-y-1">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-blue-500">120 disponibles</span>
                                    <span class="text-gray-400">Total: 150</span>
                                </div>
                                <div class="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-blue-500 rounded-full" style="width: 20%"></div>
                                </div>
                            </div>
                            <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">Desde</span>
                                    <span class="text-lg font-bold text-text-main dark:text-white">$3,100,000
                                        MXN</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>
                <!-- Card 3 -->
                <div
                    class="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">
                    <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="White modern residential building architecture"
                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAbaIfKtGt4ldqd66q_I6YsuSwNXsgM6reyRnbZbiHYoKQtOZbcENjAOASX8dyw9JP-H2CEFT5C5j8TXnLfwlK6mn-Z9fkQCNDm_z9RUjX6u-DWsPnJ4VjvzxYVrikJTSUCrJX2u2PcTWJ7Jw8TulxzpwdIcmLz6l3KE2eLrkJ-P3ueyKs9npXJSkg59qAnkd3P2e6S6SEo-v-jocTIVnZi1Q7F4xyhmhE3ptP5lk8RiFsdDpD8NR5jB-EY84XsI2n1kUHqHbSpsuE');">
                        </div>
                        <div
                            class="absolute top-3 left-3 bg-yellow-500 text-white text-xs font-bold px-2.5 py-1 rounded-full shadow-sm">
                            Últimos Lotes</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">
                                Valle Real</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>Zapopan, Jal.</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">golf_course</span> Golf
                            </span>
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">restaurant</span> Casa Club
                            </span>
                        </div>
                        <div class="mt-auto space-y-3">
                            <div class="space-y-1">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-yellow-600">5 disponibles</span>
                                    <span class="text-gray-400">Total: 80</span>
                                </div>
                                <div class="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-yellow-500 rounded-full" style="width: 94%"></div>
                                </div>
                            </div>
                            <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">Desde</span>
                                    <span class="text-lg font-bold text-text-main dark:text-white">$5,800,000
                                        MXN</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>
                <!-- Card 4 -->
                <div
                    class="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">
                    <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 geometric architecture house facade"
                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDygXAo48phEKwfxqCK6i5WWIo_ti5aXXwukT2IAYG6YiJzVPCaxIge777eFl0Ojq1j-MMBa3nz78UaugRonZdInbBsQU_A93991tEz60O2GWJoUjKtAdst7GHp2_hDyvTk1rQ8AHP9GI50a2pZDqRSYftIoXxO6he5yJhGiSlnKQ3M6ZM2zmX79WdimF8fCj0-3pUi55HH-glfzJ9fPc6GNRoMznnUcU3D5vdVY3u-Hhln1bU5msRqhhqcMqzELpyYZ_pVpELcr7I');">
                        </div>
                        <div
                            class="absolute top-3 left-3 bg-purple-500 text-white text-xs font-bold px-2.5 py-1 rounded-full shadow-sm">
                            Nuevas Etapas</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">
                                Altozano Mérida</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>Mérida, Yuc.</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">water_drop</span> Lagos
                            </span>
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">spa</span> Spa
                            </span>
                        </div>
                        <div class="mt-auto space-y-3">
                            <div class="space-y-1">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-purple-600">240 disponibles</span>
                                    <span class="text-gray-400">Total: 500</span>
                                </div>
                                <div class="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-purple-500 rounded-full" style="width: 52%"></div>
                                </div>
                            </div>
                            <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">Desde</span>
                                    <span class="text-lg font-bold text-text-main dark:text-white">$1,950,000
                                        MXN</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>
                <!-- Card 5 -->
                <div
                    class="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">
                    <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="Contemporary minimalist house interior view"
                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAfMtNNblL7FrTkwGhFpzmmd4I12-c3P8MMQ2D0YeRs4432FvyBEWuFh6QcvTLLbj5Yb-Y1yJK_NxWe4QTagW1FcpTLeANjYkNQHeqcX7FgY-xN6gZ9YFzvNMqS7B6P7ye9WS7o5cOSD9wBxQJceSYMF1g6h0vshxdEqoHX59Dxtld4koKAYuTHRg2rL1R46ubrCa3u9P9_g_H94prqf9Iyhf7GMEmbhqekpJPFjUN61P5IJsxvsJFZmZUe2ejYpaffFMU9qTe6yPw');">
                        </div>
                        <div
                            class="absolute top-3 left-3 bg-gray-600 text-white text-xs font-bold px-2.5 py-1 rounded-full shadow-sm">
                            Sold Out</div>
                    </div>
                    <div class="p-4 flex flex-col flex-1 opacity-75 hover:opacity-100 transition-opacity">
                        <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">
                                El Refugio</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>Querétaro, Qro.</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">pets</span> Pet Park
                            </span>
                        </div>
                        <div class="mt-auto space-y-3">
                            <div class="space-y-1">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-gray-500">0 disponibles</span>
                                    <span class="text-gray-400">Total: 340</span>
                                </div>
                                <div class="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-gray-400 rounded-full" style="width: 100%"></div>
                                </div>
                            </div>
                            <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">Vendido</span>
                                    <span
                                        class="text-lg font-bold text-gray-400 decoration-slate-400 line-through decoration-1">$2,100,000
                                        MXN</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">visibility</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card 6 -->
                <div
                    class="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">
                    <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="Suburban street with modern homes"
                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA6NrqG3n7WGQJRaKdQro-Eep58M99q0sFF97k6frj0z2FdQxFetejCjrcNiXarQy-QkTe0BKjHBuRWfi_4fYu-ZGTfxh--jl6VIqDPWn2g9CKsFlFKuH7gZnL11WC_h-2S38SVnToFtGqJmom64Dw0p_lU9FGgsiDxdW6NSA4du2qejShWU3tKNEDsf2vR10jvVCqfSpVNHz-51pGkU8GbHW-FJeYXNzk1Pnw3xwNgTjHYltVR9Z2OAhoNsMyBXOEBmLOIz80qd5E');">
                        </div>
                        <div
                            class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-2.5 py-1 rounded-full shadow-sm">
                            Pre-venta</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">
                                Zibatá Golf</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>El Marqués, Qro.</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">school</span> Universidad
                            </span>
                            <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">
                                <span class="material-symbols-outlined !text-[14px]">local_mall</span> Plazas
                            </span>
                        </div>
                        <div class="mt-auto space-y-3">
                            <div class="space-y-1">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-blue-500">45 disponibles</span>
                                    <span class="text-gray-400">Total: 60</span>
                                </div>
                                <div class="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-blue-500 rounded-full" style="width: 25%"></div>
                                </div>
                            </div>
                            <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">Desde</span>
                                    <span class="text-lg font-bold text-text-main dark:text-white">$3,850,000
                                        MXN</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>
            </div>
            <!-- Pagination -->
            <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-800">
                <button
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-main dark:hover:text-white rounded-lg hover:bg-white dark:hover:bg-gray-800 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all">
                    <span class="material-symbols-outlined !text-[18px]">arrow_back</span>
                    Previous
                </button>
                <div class="flex items-center gap-1">
                    <button
                        class="size-9 flex items-center justify-center rounded-lg bg-primary text-white text-sm font-medium">1</button>
                    <button
                        class="size-9 flex items-center justify-center rounded-lg text-text-secondary hover:bg-white dark:hover:bg-gray-800 text-sm font-medium transition-colors">2</button>
                    <button
                        class="size-9 flex items-center justify-center rounded-lg text-text-secondary hover:bg-white dark:hover:bg-gray-800 text-sm font-medium transition-colors">3</button>
                    <span class="text-text-secondary px-2">...</span>
                    <button
                        class="size-9 flex items-center justify-center rounded-lg text-text-secondary hover:bg-white dark:hover:bg-gray-800 text-sm font-medium transition-colors">12</button>
                </div>
                <button
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-main dark:hover:text-white rounded-lg hover:bg-white dark:hover:bg-gray-800 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all">
                    Next
                    <span class="material-symbols-outlined !text-[18px]">arrow_forward</span>
                </button>
            </div>
        </div>
    </div>
@endsection