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

@section('content')
    <div class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8 scroll-smooth">
        <div class="max-w-[1200px] mx-auto flex flex-col lg:flex-row gap-8 pb-10">
            <!-- Left Column: Details & Gallery -->
            <div class="flex-1 min-w-0 flex flex-col gap-8">
                <!-- Header & Title -->
                <div>
                    <div class="flex flex-wrap items-baseline gap-3 mb-1">
                        <h2 class="text-slate-500 dark:text-slate-400 text-lg font-medium">Vista Real
                            Residencial</h2>
                        <span class="hidden sm:inline-block w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-slate-600"></span>
                        <span class="text-slate-500 dark:text-slate-400 text-sm font-normal">Fase 3</span>
                    </div>
                    <h1 class="text-slate-900 dark:text-white text-3xl md:text-4xl font-bold tracking-tight">
                        Lote 142</h1>
                </div>
                <!-- Gallery Grid -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 h-[400px] md:h-[480px]">
                    <!-- Main Image -->
                    <div class="md:col-span-3 h-full relative group cursor-pointer overflow-hidden rounded-xl">
                        <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
                            data-alt="Aerial drone view of a green residential lot with trees"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCsNf1MdwcBDdL0n7FmKD4naQ6LSTSySFQ_3PWWuBZmi8tHZa2ObSSKxb_tseDdyzogB5djEJAcEQRQRkU4LU9HbLH7-NfmtPzUsalhEoDOZRP_GOaObDCXxI3moXgbLheYZ3ZpY8aeG9inObXmX_VTKnTvCMUd3idaKrHPFeMkqzjpW2vKbohrzi4xrAIUvY5HOkg9Jr8RDeIrb2iKiUfb9VMN8UhKl7UFB3f6ksiBHDqSVWoPN2Nb0LKjOP56GD86HNsQX5sTok0");'>
                        </div>
                        <div
                            class="absolute bottom-4 left-4 bg-black/50 backdrop-blur-sm text-white px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">photo_camera</span>
                            Ver galería (12)
                        </div>
                    </div>
                    <!-- Side Images -->
                    <div class="hidden md:flex flex-col gap-4 h-full">
                        <div class="flex-1 relative group cursor-pointer overflow-hidden rounded-xl">
                            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
                                data-alt="Street view of the residential development entrance"
                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAe2UORiHI1Z5Qt12eytsBahRBQ2zylkL50qr9eqJBEtV9bw6QLHUwYIDMSMe69gG5PdYkg0kdaQFVbT9j_gdo7BOFrl3d5Ct3qXBCs3zwXu6dtHOnST7l60l9nbGnCcS5fSEpbmoqzcFwLvQ7DP6zlqsxNn6eoq0Q9XjLiFuJDi7UC6DvdlLbHj7i-wPtpPTh0YVPuzw9XfZpk5i2cvmfs9tA0fJgZ9HyRXkzKo8sJCEbzFvNoKdb1LU5vUCoTm2928g5JDWFedcI");'>
                            </div>
                        </div>
                        <div class="flex-1 relative group cursor-pointer overflow-hidden rounded-xl">
                            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
                                data-alt="Master plan map highlighting lot location"
                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBx2ZhJ5RjjRCpihUNJbsYC849vmG3J_L6AfwdUqspLlQcw70q3CquHB3nI6fC_1ws9fuc1IgGMKHKkuoy-6gtyRzsvQ-o1LXEQbwJFK85PNW3MMGQGiKpCEKrFQgvOv7XEpxcz_c0OfQxRm1x-lkgja8bmRYHTMTkcupLfiNm-VFZNRArXeiaHQ1IFq-wHq-EByNfkb2axGOdbNY2p3dryDrCN7VDSPaDMxjcozBKvWYBX_HvYew_W9JeCcwspzd1oCNmmDlBKlQo");'>
                            </div>
                            <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors">
                            </div>
                        </div>
                        <div class="flex-1 relative group cursor-pointer overflow-hidden rounded-xl">
                            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
                                data-alt="Park amenities near the lot"
                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAKiRqkhB1Fw3HjFGHVgrNQQLhrhxqN9Evf2Uye82pCVeZ9_KybaSeBlzAcQulkTFFjvqWxxRUKbpRdZ-V7mEkzqy1D9ChAKLMeH-vo8AprUeeBQD18cX6kJWPExtfsGOpAbRTM1brhlIqYlk28FpzKNJC2K0wIMghFBS32CZBajzDSyHxHSw4r53s7WVskP6vYKbF2dqshGbHy9c3KI_SWFWXFx9HEjhz6Zujf7TuBnO7Kdt-GaTnOIZUNjJ1_TpyXutiv4SdrUQE");'>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Description & Features -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Description -->
                    <div class="flex flex-col gap-4">
                        <h3 class="text-xl font-bold text-slate-900 dark:text-white">Descripción</h3>
                        <p class="text-slate-600 dark:text-slate-300 leading-relaxed">
                            Excelente oportunidad de inversión en Vista Real Residencial. Este lote cuenta con
                            una ubicación privilegiada frente a área verde, garantizando vistas ininterrumpidas
                            y mayor privacidad. El terreno es completamente plano, lo que reduce
                            significativamente los costos de construcción. Ideal para proyecto residencial
                            familiar.
                        </p>
                    </div>
                    <!-- Features List -->
                    <div class="flex flex-col gap-4">
                        <h3 class="text-xl font-bold text-slate-900 dark:text-white">Características</h3>
                        <div class="grid grid-cols-2 gap-3">
                            <div
                                class="flex items-center gap-2 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 p-2.5 rounded-lg border border-slate-100 dark:border-slate-700 shadow-sm">
                                <span class="material-symbols-outlined text-primary">landscape</span>
                                <span class="text-sm font-medium">Terreno Plano</span>
                            </div>
                            <div
                                class="flex items-center gap-2 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 p-2.5 rounded-lg border border-slate-100 dark:border-slate-700 shadow-sm">
                                <span class="material-symbols-outlined text-primary">park</span>
                                <span class="text-sm font-medium">Frente Área Verde</span>
                            </div>
                            <div
                                class="flex items-center gap-2 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 p-2.5 rounded-lg border border-slate-100 dark:border-slate-700 shadow-sm">
                                <span class="material-symbols-outlined text-primary">water_drop</span>
                                <span class="text-sm font-medium">Servicios Ocultos</span>
                            </div>
                            <div
                                class="flex items-center gap-2 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 p-2.5 rounded-lg border border-slate-100 dark:border-slate-700 shadow-sm">
                                <span class="material-symbols-outlined text-primary">verified</span>
                                <span class="text-sm font-medium">Escrituración</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Interactive Map Section -->
                <div class="flex flex-col gap-4 mt-2">
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white">Ubicación</h3>
                    <div
                        class="relative w-full h-[320px] rounded-2xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700 group">
                        <div class="absolute inset-0 bg-cover bg-center grayscale-[20%]"
                            data-alt="Map view showing streets and location marker" data-location="Zapopan, Mexico"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA5uaQ7joPlkpgbJcpelrmoIJpiLMALEEV2hqVVnsU7sanh7bJnZ-W1yqsW858EkLMfT38BBj9vsd_GXQU8s7xuA5qESCpNsjLdK7wSzkaeE_G4RdH-TTSm-qY9YtEqG2Giv9nDfZ_pihDTIP0vAOSrCp7BTd6FoXSHmDFv_TC-ciwZuBTe9zat-vogmqQvS9o67lo63hWwdaD5BFRC8O-oAmb8oVfNvRrZVmSlcsLzF58yThnAASWNveKJRe4kvU9xBtL9eL7yGQY");'>
                        </div>
                        <div class="absolute inset-0 bg-black/10 hover:bg-black/0 transition-colors"></div>
                        <!-- Map Pin -->
                        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                            <div class="relative">
                                <div class="size-12 bg-primary/20 rounded-full animate-ping absolute inset-0">
                                </div>
                                <div
                                    class="size-12 bg-white rounded-full flex items-center justify-center shadow-lg relative z-10">
                                    <span class="material-symbols-outlined text-primary text-3xl fill-1"
                                        style="font-variation-settings: 'FILL' 1;">location_on</span>
                                </div>
                            </div>
                        </div>
                        <!-- Map Controls Overlay -->
                        <div class="absolute bottom-4 right-4 flex flex-col gap-2">
                            <button
                                class="bg-white dark:bg-slate-800 p-2 rounded-lg shadow-md hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                                <span class="material-symbols-outlined text-slate-700 dark:text-white">add</span>
                            </button>
                            <button
                                class="bg-white dark:bg-slate-800 p-2 rounded-lg shadow-md hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                                <span class="material-symbols-outlined text-slate-700 dark:text-white">remove</span>
                            </button>
                        </div>
                        <a class="absolute top-4 left-4 bg-white/90 dark:bg-slate-800/90 backdrop-blur text-xs font-medium px-3 py-2 rounded-lg shadow-sm hover:bg-white dark:hover:bg-slate-800 transition-colors text-slate-900 dark:text-white flex items-center gap-2"
                            href="#">
                            <span class="material-symbols-outlined text-[16px]">open_in_new</span>
                            Ver en Google Maps
                        </a>
                    </div>
                </div>
            </div>
            <!-- Right Column: Sticky Sidebar (Pricing & Actions) -->
            <div class="lg:w-[380px] flex-shrink-0">
                <div class="sticky top-6 flex flex-col gap-6">
                    <!-- Main Action Card -->
                    <div
                        class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col gap-6">
                        <!-- Status Badge -->
                        <div class="flex justify-between items-start">
                            <div
                                class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-500/20">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                <span class="text-sm font-semibold tracking-wide uppercase">Disponible</span>
                            </div>
                            <button class="text-slate-400 hover:text-primary transition-colors">
                                <span class="material-symbols-outlined">favorite</span>
                            </button>
                        </div>
                        <!-- Pricing -->
                        <div class="flex flex-col gap-1">
                            <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Precio de Lista
                            </p>
                            <div class="flex items-baseline gap-1">
                                <span
                                    class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">$1,450,000</span>
                                <span class="text-lg font-medium text-slate-500 dark:text-slate-400">MXN</span>
                            </div>
                            <div class="flex items-center gap-2 mt-1">
                                <span
                                    class="text-sm font-medium text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
                                    $4,500 / m²
                                </span>
                            </div>
                        </div>
                        <hr class="border-slate-100 dark:border-slate-800" />
                        <!-- Quick Specs -->
                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex flex-col">
                                <span
                                    class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Superficie</span>
                                <span class="text-lg font-semibold text-slate-900 dark:text-white">322.50
                                    m²</span>
                            </div>
                            <div class="flex flex-col">
                                <span
                                    class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Dimensiones</span>
                                <span class="text-lg font-semibold text-slate-900 dark:text-white">12 x 26.8
                                    m</span>
                            </div>
                            <div class="flex flex-col">
                                <span
                                    class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Enganche</span>
                                <span class="text-lg font-semibold text-slate-900 dark:text-white">20%</span>
                            </div>
                            <div class="flex flex-col">
                                <span
                                    class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Mensualidad</span>
                                <span class="text-lg font-semibold text-slate-900 dark:text-white">$14,500</span>
                            </div>
                        </div>
                        <!-- CTA Button -->
                        <button
                            class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3.5 px-6 rounded-xl shadow-lg shadow-blue-500/20 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
                            <span class="material-symbols-outlined">shopping_cart</span>
                            Reservar Unidad
                        </button>
                        <p class="text-xs text-center text-slate-400 dark:text-slate-500 leading-normal">
                            Al reservar, el lote se bloquea por 48 horas mientras se formaliza el contrato.
                        </p>
                    </div>
                    <!-- Agent Contact Card (Optional but useful for context) -->
                    <div
                        class="bg-white dark:bg-slate-900 rounded-2xl p-5 shadow-sm border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                        <div
                            class="size-12 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400">
                            <span class="material-symbols-outlined">support_agent</span>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-slate-900 dark:text-white">Dudas Técnicas?</p>
                            <a class="text-sm text-primary hover:underline" href="#">Contactar
                                Coordinador</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer within scrollable area -->
        <footer class="mt-8 border-t border-slate-200 dark:border-slate-800 pt-8 pb-4 text-center">
            <p class="text-slate-400 dark:text-slate-600 text-sm">© 2024 CRM Inmobiliario. Todos los derechos
                reservados.</p>
        </footer>
    </div>
@endsection