@extends('layouts.dashboard.agents')

@section('main-content')
    <!-- TopAppBar (Authority: JSON) -->
    <header
        class="bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl sticky top-0 z-30 flex justify-between items-center w-full px-8 py-4 max-w-[1920px] mx-auto flat no-line tonal-layering">
        <div class="flex items-center gap-8">
            <div class="relative group">
                <button class="flex items-center gap-2 text-blue-900 dark:text-blue-100 font-bold tracking-tight text-xl">
                    Mi Cartera
                    <span class="material-symbols-outlined text-sm">expand_more</span>
                </button>
                <!-- Simulated Dropdown -->
                <div
                    class="hidden group-hover:block absolute top-full left-0 mt-2 w-48 bg-surface-container-lowest rounded-xl shadow-xl p-2 border border-outline-variant/15">
                    <a class="block px-4 py-2 text-sm font-semibold text-primary hover:bg-surface-container-low rounded-lg transition-colors"
                        href="#">Mi Cartera</a>
                    <a class="block px-4 py-2 text-sm text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors"
                        href="#">Inface</a>
                    <a class="block px-4 py-2 text-sm text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors"
                        href="#">Altavista</a>
                    <a class="block px-4 py-2 text-sm text-on-surface-variant hover:bg-surface-container-low rounded-lg transition-colors border-t border-outline-variant/15 mt-1 pt-3"
                        href="#">Todas</a>
                </div>
            </div>
            <nav class="hidden lg:flex items-center gap-6">
                <a class="text-blue-800 dark:text-blue-300 border-b-2 border-blue-800 dark:border-blue-300 pb-1 font-semibold text-sm uppercase tracking-widest"
                    href="#">Mi Cartera</a>
                <a class="text-slate-500 dark:text-slate-400 hover:text-blue-700 transition-colors text-sm uppercase tracking-widest"
                    href="#">Inface</a>
                <a class="text-slate-500 dark:text-slate-400 hover:text-blue-700 transition-colors text-sm uppercase tracking-widest"
                    href="#">Altavista</a>
                <a class="text-slate-500 dark:text-slate-400 hover:text-blue-700 transition-colors text-sm uppercase tracking-widest"
                    href="#">Todas</a>
            </nav>
        </div>
        <div class="flex items-center gap-4">
            <button
                class="px-5 py-2.5 rounded-lg text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-container shadow-md hover:scale-95 transition-all">
                Nuevo prospecto
            </button>
            <button
                class="px-5 py-2.5 rounded-lg text-sm font-bold text-primary-container bg-surface-container-high hover:bg-surface-container-highest transition-all">
                Agendar cita
            </button>
            <div class="flex items-center gap-2 ml-4">
                <button
                    class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors relative">
                    <span class="material-symbols-outlined" data-icon="notifications">notifications</span>
                    <span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
                </button>
                <button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
                    <span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
                </button>
            </div>
        </div>
    </header>
    <!-- Dashboard Canvas -->
    <section class="p-8 max-w-[1600px] mx-auto space-y-12">
        <!-- Welcome Header -->
        <div class="space-y-1">
            <h2 class="text-4xl font-extrabold tracking-tight text-on-surface">Hola, Sergio</h2>
            <p class="text-on-surface-variant font-medium">Aquí está el resumen de tu cartera de lujo para hoy.</p>
        </div>
        <!-- Bento KPI Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- KPI: Prospectos -->
            <div class="bg-surface-container-lowest p-6 rounded-xl tonal-layering space-y-4">
                <div class="flex justify-between items-start">
                    <div class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined" data-icon="person_search">person_search</span>
                    </div>
                    <span
                        class="text-[10px] font-bold uppercase tracking-widest text-secondary bg-secondary-container px-3 py-1 rounded-full">Mi
                        Cartera</span>
                </div>
                <div>
                    <p class="text-sm font-medium text-on-surface-variant">Prospectos activos</p>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-black text-on-surface">25</span>
                        <span class="text-xs font-bold text-error">10 calientes</span>
                    </div>
                </div>
            </div>
            <!-- KPI: Citas -->
            <div class="bg-surface-container-lowest p-6 rounded-xl tonal-layering space-y-4">
                <div class="flex justify-between items-start">
                    <div class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined" data-icon="event_available">event_available</span>
                    </div>
                </div>
                <div>
                    <p class="text-sm font-medium text-on-surface-variant">Citas próximas</p>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-black text-on-surface">4</span>
                        <span class="text-xs font-bold text-primary">Para esta semana</span>
                    </div>
                </div>
            </div>
            <!-- KPI: Ventas -->
            <div class="bg-primary text-on-primary p-6 rounded-xl tonal-layering space-y-4 relative overflow-hidden">
                <div class="relative z-10 flex justify-between items-start">
                    <div class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center">
                        <span class="material-symbols-outlined" data-icon="payments">payments</span>
                    </div>
                </div>
                <div class="relative z-10">
                    <p class="text-sm font-medium text-primary-fixed">Ventas en proceso</p>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-black">3</span>
                        <span class="text-xs font-bold text-secondary-fixed">Cierre inminente</span>
                    </div>
                </div>
                <!-- Aesthetic texture -->
                <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-white/5 rounded-full blur-2xl"></div>
            </div>
            <!-- KPI: Inventario -->
            <div class="bg-surface-container-lowest p-6 rounded-xl tonal-layering space-y-4">
                <div class="flex justify-between items-start">
                    <div class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined" data-icon="apartment">apartment</span>
                    </div>
                </div>
                <div>
                    <p class="text-sm font-medium text-on-surface-variant">Inventario disponible</p>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-black text-on-surface">112</span>
                        <span class="text-xs font-bold text-on-surface-variant/60">Unidades totales</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Two-Column Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- Recent Activity Timeline -->
            <div class="lg:col-span-2 space-y-6">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-bold text-on-surface">Actividad reciente</h3>
                    <div class="flex bg-surface-container p-1 rounded-lg">
                        <button
                            class="px-4 py-1.5 text-xs font-bold bg-white rounded-md shadow-sm text-primary">Hoy</button>
                        <button
                            class="px-4 py-1.5 text-xs font-bold text-on-surface-variant hover:text-primary transition-colors">7
                            días</button>
                        <button
                            class="px-4 py-1.5 text-xs font-bold text-on-surface-variant hover:text-primary transition-colors">30
                            días</button>
                    </div>
                </div>
                <div class="bg-surface-container-lowest rounded-2xl p-8 tonal-layering relative overflow-hidden">
                    <div class="space-y-10 relative">
                        <!-- Timeline line -->
                        <div class="absolute left-6 top-2 bottom-2 w-px bg-outline-variant/30"></div>
                        <!-- Timeline Item -->
                        <div class="relative flex items-center gap-8 group">
                            <div
                                class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container z-10 border-4 border-white">
                                <span class="material-symbols-outlined text-sm" data-icon="call">call</span>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-baseline">
                                    <p class="font-bold text-on-surface">Llamada a Juan Pérez</p>
                                    <span class="text-[10px] font-bold text-outline uppercase tracking-wider">Hace
                                        10 min</span>
                                </div>
                                <p class="text-sm text-on-surface-variant">Interesado en Penthouse Altavista,
                                    requiere segunda visita.</p>
                            </div>
                        </div>
                        <!-- Timeline Item -->
                        <div class="relative flex items-center gap-8 group">
                            <div
                                class="w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center text-primary z-10 border-4 border-white">
                                <span class="material-symbols-outlined text-sm"
                                    data-icon="calendar_month">calendar_month</span>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-baseline">
                                    <p class="font-bold text-on-surface">Cita agendada</p>
                                    <span class="text-[10px] font-bold text-outline uppercase tracking-wider">Hace
                                        2 horas</span>
                                </div>
                                <p class="text-sm text-on-surface-variant">Recorrido por Fraccionamiento Las Lomas
                                    con Familia Valdés.</p>
                            </div>
                        </div>
                        <!-- Timeline Item -->
                        <div class="relative flex items-center gap-8 group">
                            <div
                                class="w-12 h-12 rounded-full bg-tertiary-fixed flex items-center justify-center text-tertiary z-10 border-4 border-white">
                                <span class="material-symbols-outlined text-sm" data-icon="swap_horiz">swap_horiz</span>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-baseline">
                                    <p class="font-bold text-on-surface">Prospecto movido a Negociación</p>
                                    <span class="text-[10px] font-bold text-outline uppercase tracking-wider">Hoy,
                                        9:00 AM</span>
                                </div>
                                <p class="text-sm text-on-surface-variant">Elena Gómez ha enviado una oferta formal
                                    por Bosque Real #42.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Top Oportunidades List -->
            <div class="space-y-6">
                <h3 class="text-xl font-bold text-on-surface">Top oportunidades</h3>
                <div class="space-y-4">
                    <!-- Lead Card -->
                    <div
                        class="bg-surface-container-low p-5 rounded-2xl hover:bg-surface-container-lowest transition-all group tonal-layering">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="w-10 h-10 rounded-full bg-white overflow-hidden border border-outline-variant/20">
                                <img alt="Elena" class="w-full h-full object-cover"
                                    data-alt="professional portrait of a high-end real estate client smiling in a bright architectural setting"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqT3j7bSg5q2_mlTn0gINeQMKQnr4VM7FGKBWeIkNMFM1rqK906b4aH_4NnhXHeqMs1hxqlelqJHsjNmHOsdsQsXj5miJkZs_6sK8kAb5OIM_sae5qBJJaEq88WTFHjNgFkt06onwpNB7C85KhBzm5MewOJ5K8gAACulCuFW04B_DIesRoeVn3Xc7Jr9aTUsV4kEb-D3Bo-6D0GUvLu20uitj10FXoPKumPwJXfyYA7tiAIlO3Jg2Iy-pa2IC3q4VisD603-BgZQ7q" />
                            </div>
                            <div class="flex-1 overflow-hidden">
                                <h4 class="font-bold text-on-surface truncate">Elena Gómez</h4>
                                <p class="text-[10px] font-bold text-secondary uppercase tracking-widest">Muy
                                    Caliente</p>
                            </div>
                            <span class="text-sm font-black text-primary">$4.2M</span>
                        </div>
                        <div class="flex gap-2">
                            <button
                                class="flex-1 py-2 bg-white rounded-lg text-xs font-bold text-primary hover:bg-primary hover:text-white transition-all">Abrir</button>
                            <button
                                class="flex items-center justify-center w-10 h-10 bg-[#25D366]/10 text-[#25D366] rounded-lg hover:bg-[#25D366] hover:text-white transition-all">
                                <span class="material-symbols-outlined text-lg" data-icon="chat">chat</span>
                            </button>
                        </div>
                    </div>
                    <!-- Lead Card -->
                    <div
                        class="bg-surface-container-low p-5 rounded-2xl hover:bg-surface-container-lowest transition-all group tonal-layering">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="w-10 h-10 rounded-full bg-white overflow-hidden border border-outline-variant/20">
                                <img alt="Ricardo" class="w-full h-full object-cover"
                                    data-alt="close-up of a refined businessman in a sharp navy suit looking confident"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCB3ln8gez1Wv3Ubd4MWWYdcApIr_55daDNGSlvECPfkSJnJqLIzcUjpRFrmNdi8YejZ4Be6rugsptG-1EgudjTY8btIEZe63WBFIvwLcO1WBy7G6qMgE89WiymgaII-eYbTei350rupvGjvBfnDTsu4T7BySHmM9qpUt_xGj8JWtIUz7Fk2p6kUd8WXKfA6pqJgm58Xh4cZF8c2dvmfXLqyo_njralBXYuXmMcoVfDGD0xBitlf_yfb-aKMRbUxtpoe58J6oU-kvEX" />
                            </div>
                            <div class="flex-1 overflow-hidden">
                                <h4 class="font-bold text-on-surface truncate">Ricardo Slim</h4>
                                <p class="text-[10px] font-bold text-secondary uppercase tracking-widest">Muy
                                    Caliente</p>
                            </div>
                            <span class="text-sm font-black text-primary">$12.5M</span>
                        </div>
                        <div class="flex gap-2">
                            <button
                                class="flex-1 py-2 bg-white rounded-lg text-xs font-bold text-primary hover:bg-primary hover:text-white transition-all">Abrir</button>
                            <button
                                class="flex items-center justify-center w-10 h-10 bg-[#25D366]/10 text-[#25D366] rounded-lg hover:bg-[#25D366] hover:text-white transition-all">
                                <span class="material-symbols-outlined text-lg" data-icon="chat">chat</span>
                            </button>
                        </div>
                    </div>
                    <!-- Lead Card -->
                    <div
                        class="bg-surface-container-low p-5 rounded-2xl hover:bg-surface-container-lowest transition-all group tonal-layering">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="w-10 h-10 rounded-full bg-white overflow-hidden border border-outline-variant/20">
                                <img alt="Sofía" class="w-full h-full object-cover"
                                    data-alt="portrait of a young elegant woman in an art gallery setting with soft cinematic lighting"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJ71unZQB5wVkxISDe2J0manCmeT63cLeVE88fOUVjKVsO69MG__9XKNADtUB_1D52cWeTT5PxImLNwLab-6PEn3TD1utGnXj4moMc0d8bac9yRIrOmeVApkMU_ahoPixTAcncGQBgogL-OJ-jKByec2mccFeqfS2Rxrm1ZE-MMxw7v5E4-G_BSAidB5gSNn6NpOcvrk-iLAQbNySikCAju1wS5a2ghwEsaJDIUKJ7YxcJcNd-Wo9AIhVmlqeHgnGm0QRB7HJbfRUh" />
                            </div>
                            <div class="flex-1 overflow-hidden">
                                <h4 class="font-bold text-on-surface truncate">Sofía de la Mora</h4>
                                <p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                    Cierre Próximo</p>
                            </div>
                            <span class="text-sm font-black text-primary">$2.8M</span>
                        </div>
                        <div class="flex gap-2">
                            <button
                                class="flex-1 py-2 bg-white rounded-lg text-xs font-bold text-primary hover:bg-primary hover:text-white transition-all">Abrir</button>
                            <button
                                class="flex items-center justify-center w-10 h-10 bg-[#25D366]/10 text-[#25D366] rounded-lg hover:bg-[#25D366] hover:text-white transition-all">
                                <span class="material-symbols-outlined text-lg" data-icon="chat">chat</span>
                            </button>
                        </div>
                    </div>
                </div>
                <button
                    class="w-full py-4 text-xs font-bold text-outline border border-dashed border-outline-variant/50 rounded-2xl hover:bg-surface-container hover:text-primary transition-all">
                    Ver todos los prospectos
                </button>
            </div>
        </div>
    </section>
@endsection