@extends('layouts.dashboard.agents')

@section('slide-content')
    <input class="hidden" id="filter-drawer-toggle" type="checkbox" />
    <label
        class="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 opacity-0 pointer-events-none transition-opacity duration-300"
        for="filter-drawer-toggle" id="drawer-overlay"></label>
    <aside
        class="fixed top-0 right-0 h-full w-full md:w-1/3 max-w-lg bg-surface-container-low z-[60] shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out border-l border-outline-variant/20 flex flex-col"
        id="filter-drawer">
        <div class="p-6 border-b border-outline-variant/20 flex items-center justify-between bg-white">
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined text-primary" data-icon="tune">tune</span>
                <h3 class="text-xl font-black text-blue-950">Más Filtros Avanzados</h3>
            </div>
            <label class="p-2 rounded-full hover:bg-surface-container transition-colors cursor-pointer"
                for="filter-drawer-toggle">
                <span class="material-symbols-outlined" data-icon="close">close</span>
            </label>
        </div>
        <div class="flex-grow overflow-y-auto p-8 space-y-10">
            <div>
                <label class="block text-xs uppercase tracking-widest text-outline font-black mb-6">Rango de Precio
                    (MXN)</label>
                <div class="space-y-4">
                    <input class="w-full accent-primary" max="50000000" min="1000000" step="500000" type="range" />
                    <div class="flex justify-between gap-4">
                        <div class="flex-1 bg-white border border-outline-variant/30 rounded-lg p-3">
                            <span class="text-[10px] text-outline block uppercase font-bold">Mínimo</span>
                            <input class="w-full border-none p-0 text-sm font-bold focus:ring-0" type="text"
                                value="$1,000,000" />
                        </div>
                        <div class="flex-1 bg-white border border-outline-variant/30 rounded-lg p-3">
                            <span class="text-[10px] text-outline block uppercase font-bold">Máximo</span>
                            <input class="w-full border-none p-0 text-sm font-bold focus:ring-0" type="text"
                                value="$50,000,000" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs uppercase tracking-widest text-outline font-black mb-3">Recámaras</label>
                    <div class="flex items-center gap-2">
                        <button
                            class="w-10 h-10 border border-outline-variant/30 rounded-lg flex items-center justify-center hover:bg-white">-</button>
                        <input
                            class="w-full text-center border-none bg-white rounded-lg font-bold focus:ring-2 focus:ring-primary/20"
                            type="number" value="3" />
                        <button
                            class="w-10 h-10 border border-outline-variant/30 rounded-lg flex items-center justify-center hover:bg-white">+</button>
                    </div>
                </div>
                <div>
                    <label class="block text-xs uppercase tracking-widest text-outline font-black mb-3">Baños</label>
                    <div class="flex items-center gap-2">
                        <button
                            class="w-10 h-10 border border-outline-variant/30 rounded-lg flex items-center justify-center hover:bg-white">-</button>
                        <input
                            class="w-full text-center border-none bg-white rounded-lg font-bold focus:ring-2 focus:ring-primary/20"
                            type="number" value="2" />
                        <button
                            class="w-10 h-10 border border-outline-variant/30 rounded-lg flex items-center justify-center hover:bg-white">+</button>
                    </div>
                </div>
            </div>
            <div>
                <label class="block text-xs uppercase tracking-widest text-outline font-black mb-4">Amenidades
                    Destacadas</label>
                <div class="grid grid-cols-1 gap-3">
                    <label
                        class="flex items-center gap-3 p-4 bg-white rounded-xl border border-outline-variant/10 cursor-pointer hover:border-primary/30 transition-all">
                        <input checked="" class="rounded text-primary focus:ring-primary border-outline-variant"
                            type="checkbox" />
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-xl" data-icon="pool">pool</span>
                            <span class="font-semibold text-sm">Alberca / Piscina</span>
                        </div>
                    </label>
                    <label
                        class="flex items-center gap-3 p-4 bg-white rounded-xl border border-outline-variant/10 cursor-pointer hover:border-primary/30 transition-all">
                        <input class="rounded text-primary focus:ring-primary border-outline-variant" type="checkbox" />
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-xl" data-icon="park">park</span>
                            <span class="font-semibold text-sm">Jardín Privado</span>
                        </div>
                    </label>
                    <label
                        class="flex items-center gap-3 p-4 bg-white rounded-xl border border-outline-variant/10 cursor-pointer hover:border-primary/30 transition-all">
                        <input checked="" class="rounded text-primary focus:ring-primary border-outline-variant"
                            type="checkbox" />
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-xl" data-icon="garage">garage</span>
                            <span class="font-semibold text-sm">Estacionamiento Techado</span>
                        </div>
                    </label>
                    <label
                        class="flex items-center gap-3 p-4 bg-white rounded-xl border border-outline-variant/10 cursor-pointer hover:border-primary/30 transition-all">
                        <input class="rounded text-primary focus:ring-primary border-outline-variant" type="checkbox" />
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-xl"
                                data-icon="fitness_center">fitness_center</span>
                            <span class="font-semibold text-sm">Gimnasio</span>
                        </div>
                    </label>
                </div>
            </div>
        </div>
        <div class="p-6 border-t border-outline-variant/20 bg-white grid grid-cols-2 gap-4">
            <label
                class="flex items-center justify-center py-4 border border-outline-variant text-on-surface-variant font-bold rounded-xl hover:bg-surface transition-colors cursor-pointer"
                for="filter-drawer-toggle">
                Limpiar
            </label>
            <button
                class="bg-primary text-white py-4 rounded-xl font-black shadow-lg shadow-primary/20 hover:scale-[0.98] transition-all">
                Aplicar Filtros
            </button>
        </div>
    </aside>
@endsection

@section('main-content')
    <header
        class="sticky top-0 z-30 glass-header bg-white/70 dark:bg-slate-900/70 w-full px-8 py-4 flex justify-between items-center max-w-[1920px] mx-auto border-b border-outline-variant/10">
        <div class="flex items-center gap-8">
            <div class="relative group">
                <span
                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-outline group-focus-within:text-primary transition-colors">
                    <span class="material-symbols-outlined" data-icon="search">search</span>
                </span>
                <input
                    class="bg-surface-container-highest border-none rounded-xl pl-10 pr-4 py-2 w-64 focus:ring-2 focus:ring-primary/40 transition-all text-sm"
                    placeholder="Buscar propiedades..." type="text" />
            </div>
            <nav class="hidden lg:flex gap-6 font-inter label-md tracking-widest uppercase text-[11px] font-semibold">
                <a class="text-slate-500 hover:text-blue-700 transition-colors" href="#">Mi Cartera</a>
                <a class="text-slate-500 hover:text-blue-700 transition-colors" href="#">Inface</a>
                <a class="text-slate-500 hover:text-blue-700 transition-colors" href="#">Altavista</a>
                <a class="text-blue-800 dark:text-blue-300 border-b-2 border-blue-800 dark:border-blue-300 pb-1 font-semibold"
                    href="#">Todas</a>
            </nav>
        </div>
        <div class="flex items-center gap-4">
            <button
                class="bg-gradient-to-br from-primary to-primary-container text-white px-5 py-2.5 rounded-xl font-bold text-sm shadow-lg hover:scale-95 transition-all">
                Nuevo prospecto
            </button>
            <div class="h-8 w-[1px] bg-outline-variant/30"></div>
            <div class="flex items-center gap-3">
                <button class="text-on-surface-variant hover:bg-surface-container rounded-full p-2 transition-colors">
                    <span class="material-symbols-outlined" data-icon="notifications">notifications</span>
                </button>
                <button class="w-10 h-10 rounded-full border-2 border-primary-fixed overflow-hidden">
                    <img alt="Agent Profile"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuCad-gtQPRdudCrJ4Xoj0Fa51V4WHYYRyZkOf0z7ZW_LPNaBwgl_sQMqEx4xzaiTmvnnFw_TzUrGEmpar9CgexSwKyAwhn14OS9TaY3bzEes0TsSzb1Wog19jwRuZp12S85c6zs36jR1-BY5SvP29qJjAtHTBL6kD2EEwUdcyjHMEodwm7CjTW4mXBBQ3bNiUeiUNDYalpNCZSTWqn_cEKjPlPyVrEe3B4bDV0HmvDwmXXw-BAMng76g1dNA6TzxTni6vWlfEyfaQt2" />
                </button>
            </div>
        </div>
    </header>
    <div class="p-8 max-w-[1600px] mx-auto">
        <section class="mb-10">
            <div class="flex justify-between items-end mb-8">
                <div>
                    <h2 class="text-display-md font-black tracking-tight text-blue-950 mb-1">Propiedades</h2>
                    <p class="text-on-surface-variant font-medium">Gestión integral de portafolio híbrido</p>
                </div>
                <button
                    class="group flex items-center gap-2 bg-surface-container-lowest text-primary border border-primary/20 px-6 py-3 rounded-xl font-bold hover:bg-primary hover:text-white transition-all">
                    <span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>
                    Agregar propiedad
                    <span
                        class="ml-2 text-[10px] uppercase tracking-tighter opacity-60 group-hover:opacity-100 transition-opacity">(Mi
                        Cartera)</span>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4">
                <div class="md:col-span-4 lg:col-span-3 bg-surface-container-low p-4 rounded-xl">
                    <label class="block text-[10px] uppercase tracking-widest text-outline mb-2 font-bold">Origen de
                        Datos</label>
                    <select
                        class="w-full bg-transparent border-none p-0 focus:ring-0 text-on-surface font-semibold cursor-pointer">
                        <option>Todas las fuentes</option>
                        <option>Mi Cartera (Privada)</option>
                        <option>Inface (Agency Sync)</option>
                        <option>Altavista</option>
                    </select>
                </div>
                <div class="md:col-span-4 lg:col-span-3 bg-surface-container-low p-4 rounded-xl">
                    <label class="block text-[10px] uppercase tracking-widest text-outline mb-2 font-bold">Tipo de
                        Propiedad</label>
                    <select
                        class="w-full bg-transparent border-none p-0 focus:ring-0 text-on-surface font-semibold cursor-pointer">
                        <option>Todos los tipos</option>
                        <option>Casa Residencial</option>
                        <option>Departamento</option>
                        <option>Lote / Terreno</option>
                    </select>
                </div>
                <div class="md:col-span-4 lg:col-span-3 bg-surface-container-low p-4 rounded-xl">
                    <label class="block text-[10px] uppercase tracking-widest text-outline mb-2 font-bold">Estatus
                        Comercial</label>
                    <select
                        class="w-full bg-transparent border-none p-0 focus:ring-0 text-on-surface font-semibold cursor-pointer">
                        <option>Cualquier Estatus</option>
                        <option>Disponible</option>
                        <option>Apartado</option>
                        <option>Vendido</option>
                    </select>
                </div>
                <label
                    class="md:col-span-4 lg:col-span-3 flex items-center justify-center gap-3 bg-surface-container-highest rounded-xl cursor-pointer hover:bg-primary hover:text-white transition-all"
                    for="filter-drawer-toggle">
                    <span class="material-symbols-outlined" data-icon="tune">tune</span>
                    <span class="font-bold text-sm">Más filtros</span>
                </label>
            </div>
        </section>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <article
                class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div class="relative h-64 overflow-hidden">
                    <img alt="Luxury Villa" class="w-full h-full object-cover"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJKKjB4Q0U9JK_FwGy5exBzpZnFNl1cPvBhvfXdq6bpe_5jOOr_oghp9YPq8-3lCioGnlH86BPCbskciuCrztiM4zWK3bJ71I7gNfrmsEm6Pv2osmNbC9cWpzWtTX8rG4GhRldlfVN-ai_AO3dMyXYE3uKOfpYdG8t_YyIK7D_2het68ski4TYSetOrIa5UDVCzInLML-2uQJbNVse4pb1vQP5ZG61jWw4s2LFhk4-kGeg35msHWKUXv2t5Swk5qEmsEC7MZYHChP9" />
                    <div class="absolute top-4 left-4 flex gap-2">
                        <span
                            class="bg-primary/90 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-tighter backdrop-blur-sm">Mi
                            Cartera</span>
                        <span
                            class="bg-secondary-container/90 text-on-secondary-container text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-tighter backdrop-blur-sm">Destacado</span>
                    </div>
                    <button
                        class="absolute top-4 right-4 w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full flex items-center justify-center text-white transition-all">
                        <span class="material-symbols-outlined" data-icon="favorite"
                            style="font-variation-settings: 'FILL' 1;">favorite</span>
                    </button>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="text-title-lg font-bold text-on-surface leading-tight">Casa de las Palmas</h3>
                        <span class="text-primary font-black text-xl">$12,450,000</span>
                    </div>
                    <p class="flex items-center text-outline text-sm mb-6">
                        <span class="material-symbols-outlined text-sm mr-1" data-icon="location_on">location_on</span>
                        Lomas de Chapultepec, CDMX
                    </p>
                    <div
                        class="flex items-center gap-4 text-outline-variant text-sm border-t border-surface-container pt-4 mb-6">
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="bed">bed</span> 4
                        </div>
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="bathtub">bathtub</span> 5.5
                        </div>
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="square_foot">square_foot</span> 450m²
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <button
                            class="bg-surface-container-highest text-primary font-bold py-2 rounded-lg text-sm hover:bg-primary-fixed transition-colors">Detalle</button>
                        <button
                            class="flex items-center justify-center gap-2 border border-outline-variant text-on-surface-variant font-bold py-2 rounded-lg text-sm hover:bg-surface-container-low transition-colors">
                            <span class="material-symbols-outlined text-lg" data-icon="share">share</span> Compartir
                        </button>
                    </div>
                </div>
            </article>
            <article
                class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div class="relative h-64 overflow-hidden">
                    <img alt="Luxury Condo" class="w-full h-full object-cover"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuBwyQRK96oT8mb-sGg86f832sV_ZYoP0GQpc5A4x0tGpDlOuJnXhmkpC85emvNnRZZo-zsdHGVE_IC9PE4kirpkYf0tRoyk4tw2PGAAFrtQBa82fRbAOZ7oYZwQnsCWhsGtHO2vgnqLRe5AFYHUD6Bs8rtd0Y7tfKMGmddtb65jFACc69YoxEzNbkK-XPSx2WMSrCHl6z9ShwUP-LfEAyepA8DJ-ub6RE0D3hUx1F-ohhEQGGCgj8CaMdAjNssh82lF8dtwiNAEoJ6V" />
                    <div class="absolute top-4 left-4 flex gap-2">
                        <span
                            class="bg-secondary/90 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-tighter backdrop-blur-sm">Inface
                            Sync</span>
                    </div>
                    <button
                        class="absolute top-4 right-4 w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full flex items-center justify-center text-white transition-all">
                        <span class="material-symbols-outlined" data-icon="favorite">favorite</span>
                    </button>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="text-title-lg font-bold text-on-surface leading-tight">Altus Penthouse</h3>
                        <span class="text-primary font-black text-xl">$8,900,000</span>
                    </div>
                    <p class="flex items-center text-outline text-sm mb-6">
                        <span class="material-symbols-outlined text-sm mr-1" data-icon="location_on">location_on</span>
                        Puerta de Hierro, GDL
                    </p>
                    <div
                        class="flex items-center gap-4 text-outline-variant text-sm border-t border-surface-container pt-4 mb-6">
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="bed">bed</span> 3
                        </div>
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="bathtub">bathtub</span> 3
                        </div>
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="square_foot">square_foot</span> 210m²
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <button
                            class="bg-surface-container-highest text-primary font-bold py-2 rounded-lg text-sm hover:bg-primary-fixed transition-colors">Detalle</button>
                        <button
                            class="flex items-center justify-center gap-2 border border-outline-variant text-on-surface-variant font-bold py-2 rounded-lg text-sm hover:bg-surface-container-low transition-colors">
                            <span class="material-symbols-outlined text-lg" data-icon="share">share</span> Compartir
                        </button>
                    </div>
                </div>
            </article>
            <article
                class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div class="relative h-64 overflow-hidden">
                    <img alt="Suburban Home" class="w-full h-full object-cover"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuDf9DUI-Fb7SIh74T_L3LMgj6Rr0lNP_pxkXEcH4I_ATV6VZWDEaJkbTPR3Uk21FoSHuEak0r_k70YvfZKe8iKqq7ZbK2bqw526iZoI_wYFsCz23XyWoYUfPv_tfKJteHH3FvAfqyU-zFVxyflnCcxYZ7_FGqltrF7MmTAuvEL2UPjuJIa7ChvTDsySXFLxe9iL5xzWg4dFfSuD8DkkH4yRIOPyOP_vdaBcMKN2USAhe-xFF232dkusOAFqm5QVkA6zzdSPCHja_0fz" />
                    <div class="absolute top-4 left-4 flex gap-2">
                        <span
                            class="bg-tertiary/90 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-tighter backdrop-blur-sm">Altavista</span>
                    </div>
                    <button
                        class="absolute top-4 right-4 w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full flex items-center justify-center text-white transition-all">
                        <span class="material-symbols-outlined" data-icon="favorite">favorite</span>
                    </button>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="text-title-lg font-bold text-on-surface leading-tight">Residencia Maple</h3>
                        <span class="text-primary font-black text-xl">$5,200,000</span>
                    </div>
                    <p class="flex items-center text-outline text-sm mb-6">
                        <span class="material-symbols-outlined text-sm mr-1" data-icon="location_on">location_on</span>
                        Juriquilla, Qro.
                    </p>
                    <div
                        class="flex items-center gap-4 text-outline-variant text-sm border-t border-surface-container pt-4 mb-6">
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="bed">bed</span> 3
                        </div>
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="bathtub">bathtub</span> 2.5
                        </div>
                        <div class="flex items-center gap-1">
                            <span class="material-symbols-outlined" data-icon="square_foot">square_foot</span> 185m²
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <button
                            class="bg-surface-container-highest text-primary font-bold py-2 rounded-lg text-sm hover:bg-primary-fixed transition-colors">Detalle</button>
                        <button
                            class="flex items-center justify-center gap-2 border border-outline-variant text-on-surface-variant font-bold py-2 rounded-lg text-sm hover:bg-surface-container-low transition-colors">
                            <span class="material-symbols-outlined text-lg" data-icon="share">share</span> Compartir
                        </button>
                    </div>
                </div>
            </article>
        </div>
        <section class="mt-16 bg-surface-container-low rounded-3xl p-8 border border-white/40 shadow-2xl">
            <div class="flex flex-col lg:flex-row gap-12">
                <div class="lg:w-3/5">
                    <div class="grid grid-cols-4 gap-4 mb-6">
                        <div class="col-span-4 h-[400px] rounded-2xl overflow-hidden shadow-inner">
                            <img alt="Property Detail" class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCn7lGILPqjFvBnKXbb3ZYcGOA6Lbs6qkuE55Nr_fH57zhDLwmxy8eb52_-SGDpqt0gcg2l2sFrrsBehQyFIDwuG9EIz4eb6u7f4ZDfplaQYSjsr85VVMjlcjGwzejwTIYXmT9qVxEDp7AQ3n6YcfQ4skXDE12qdjKu3yaME0lj9tKq697usTWdxqpXezxPrKbgV7iOgW02Vz4JJ41yBiAEclxB1qvn3ZFb0QzFQ_Dbbin2zYazdQiu8NjgFAjHUPnvSiomxjE26Lv-" />
                        </div>
                        <div class="h-24 rounded-xl overflow-hidden"><img alt="Kitchen"
                                class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuD744W-bmlc3Dst1j687to_rqd7hUQGQNaoVyTMzIzFJd71M9vElQJ-bWREId1JLIFr1uQ_VPZ3ROktM3ZknIW3N8OllO2uRxJsOgpHmDW0yJXhbRP2hG-AyVNOlK9CaKbOFS1a8L_M0JRljA3aRajjLjd_ZiUJ3ePrJ73U8rwZJZhgnt4QIYuErOUefP3uciYvgoSY1omR9TNnx8NsuI88DJi0kQVRK_B0oHUDrvkWk2bRHKeZt75q_GHIQaV9o8XQ9GWs4lSu8HIh" />
                        </div>
                        <div class="h-24 rounded-xl overflow-hidden"><img alt="Bathroom"
                                class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPhyMdoLudAaorNc1USK8JPA_O-Wbo_f-9aSkqTw1m2F-8Sj7DUehO88JzLDjgpVinhh-GJVVaAfHvxA6EGwjaWHIRElbpGuQhaY0_hamVTQdDTaEFPqRcgmbOa1bv8PcnArpYreA5NTT93IlMpQIZFZxY4baauEB_uP9PUXNat1_meeoLm1OnrJ8UBw8LQ4mRxftCDKmvTew8QosQA7ug_Q87K7bkde7AKqf072Ae7O12XcAX0QGDKl7ko88yXT2XtrQC7ej40Djy" />
                        </div>
                        <div class="h-24 rounded-xl overflow-hidden"><img alt="Bedroom"
                                class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcBeD3ylUkNqySDO7M36rbNdO-BNlbfiXrEqUB9rzk2cH9NhG-21pQkRDMAN4ql1JNxrklyg9wll75JdEMf2uXRZJwMSxIpVMYHDijnU1W0cb4p9IMk9AEF2nJq-0E9KLF-sdiJy40Kv_ERaZ5Ke_Xh-ckZBuzb2RgjZgR1gU2p7-3dMAYydq21j5nJdQGCb5Z4q2NnApII6zzo8C9UkJGl2t5ZS_1dUB0p0zp3awMJKwhDrjd8uABhTzObddpNgrJLvV2SmPmxtRu" />
                        </div>
                        <div class="h-24 rounded-xl overflow-hidden relative group cursor-pointer">
                            <img alt="More" class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_180-EgY2Yab2Xdh2TsMYfEQ7-_klhB2rWd1wWMcCZItEgeE7wLFnZaD3a_1CU9u_QSuvLFlPoTARzDGT86kGQFfUjfbw67LX9nE--aW5QSrrHKVxLSidaC9uYOg5kUQ3CEaHZIfZ0RMsbR6z1R371YEmkWTiNH1DXFYcvyVe5CtUSDO1bkd14frqWet07MeFUHeV6QWx8NMI8IiEpt6XlNPgWmu4jCeWBv3widfYzkWAy7ne-lEYPVy9FBIf_sRCAq01gdr39HGM" />
                            <div
                                class="absolute inset-0 bg-primary/60 flex items-center justify-center text-white font-bold group-hover:bg-primary/80 transition-all">
                                +12 fotos</div>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center gap-3 mb-4">
                            <span
                                class="bg-secondary-fixed text-on-secondary-fixed text-xs font-bold px-3 py-1 rounded-full">DISPONIBLE</span>
                            <span class="text-outline text-xs tracking-widest uppercase font-bold">ID: CE-90821</span>
                        </div>
                        <h2 class="text-display-sm font-black text-blue-950 mb-2">Altus Penthouse - Piso 42</h2>
                        <p class="text-on-surface-variant leading-relaxed text-lg mb-8">Ubicado en el corazón del distrito
                            financiero, este penthouse redefine el lujo urbano con vistas ininterrumpidas de 360 grados,
                            acabados de mármol importado y un sistema de automatización de última generación.</p>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
                            <div class="bg-surface-container-lowest p-4 rounded-xl text-center">
                                <span class="material-symbols-outlined text-primary mb-2" data-icon="house">house</span>
                                <p class="text-[10px] text-outline font-bold uppercase">Área Construida</p>
                                <p class="font-black text-on-surface">340 m²</p>
                            </div>
                            <div class="bg-surface-container-lowest p-4 rounded-xl text-center">
                                <span class="material-symbols-outlined text-primary mb-2" data-icon="deck">deck</span>
                                <p class="text-[10px] text-outline font-bold uppercase">Terrazas</p>
                                <p class="font-black text-on-surface">45 m²</p>
                            </div>
                            <div class="bg-surface-container-lowest p-4 rounded-xl text-center">
                                <span class="material-symbols-outlined text-primary mb-2"
                                    data-icon="directions_car">directions_car</span>
                                <p class="text-[10px] text-outline font-bold uppercase">Estacionamiento</p>
                                <p class="font-black text-on-surface">4 Cajones</p>
                            </div>
                            <div class="bg-surface-container-lowest p-4 rounded-xl text-center">
                                <span class="material-symbols-outlined text-primary mb-2"
                                    data-icon="security">security</span>
                                <p class="text-[10px] text-outline font-bold uppercase">Seguridad</p>
                                <p class="font-black text-on-surface">24/7 VIP</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lg:w-2/5">
                    <div
                        class="sticky top-24 bg-surface-container-lowest p-8 rounded-2xl shadow-xl border border-outline-variant/10">
                        <div class="mb-8">
                            <p class="text-outline text-sm font-medium mb-1">Precio de lista</p>
                            <h3 class="text-3xl font-black text-primary">$8,900,000 MXN</h3>
                            <p class="text-xs text-secondary font-bold mt-1 flex items-center">
                                <span class="material-symbols-outlined text-xs mr-1"
                                    data-icon="trending_up">trending_up</span>
                                5.4% Plusvalía anual estimada
                            </p>
                        </div>
                        <div class="space-y-4">
                            <button
                                class="w-full bg-gradient-to-br from-primary to-primary-container text-white py-4 rounded-xl font-black text-lg shadow-lg hover:shadow-primary/40 hover:-translate-y-0.5 transition-all flex items-center justify-center gap-3">
                                <span class="material-symbols-outlined" data-icon="person_add">person_add</span>
                                Crear prospecto con esta propiedad
                            </button>
                            <button
                                class="w-full bg-surface-container-highest text-on-surface-variant py-4 rounded-xl font-bold hover:bg-surface-container transition-all flex items-center justify-center gap-3">
                                <span class="material-symbols-outlined" data-icon="calculate">calculate</span>
                                Cotizar financiamiento
                            </button>
                            <button
                                class="w-full border-2 border-[#25D366] text-[#25D366] py-4 rounded-xl font-bold hover:bg-[#25D366] hover:text-white transition-all flex items-center justify-center gap-3">
                                <span class="material-symbols-outlined" data-icon="chat">chat</span>
                                WhatsApp con el Agente Sync
                            </button>
                        </div>
                        <div class="mt-8 pt-8 border-t border-outline-variant/20">
                            <div class="flex items-center gap-4">
                                <img alt="Listing Agent" class="w-12 h-12 rounded-full bg-surface-container"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkmCB3IZ5zjAiJzHi_QkAIE_xtTktv95iIRDw2W56pIx2A0zU_HXVBFOS5ewgs0iXsgcd-b3eDl4IJdqHPRLFAKDHEjNk_tdAAE_OMelZm1IKMJcK5pxsCluTnu9dzuiUUpqw4BZgos3x8hht9zf_dfhRHx_kvqjPBKQ0yo5XGwM9W1ZdYfnQ2NB9nAUucnHNa4scP4oCSZ35onbeFtUBjixg6pUMFmB8iWiWbF9TIObRJ9K5NvD6ZdQb1oQ4RSGZtVa8SxykyoPnL" />
                                <div>
                                    <p class="text-xs text-outline font-bold uppercase tracking-tight">Agente Responsable
                                    </p>
                                    <p class="font-bold text-on-surface">Maria Fernanda Ruiz</p>
                                    <p class="text-xs text-secondary">Inface Partner Certification</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection