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

@section('extra-styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .material-symbols-outlined.fill {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto p-8 scroll-smooth">
        <div class="max-w-[1200px] mx-auto space-y-6">
            <!-- Page Header -->
            <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
                <div class="space-y-2">
                    <div class="flex items-center gap-3">
                        <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                            Residencial Altavista</h1>
                        <span
                            class="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 px-2.5 py-0.5 text-xs font-semibold text-emerald-800 dark:text-emerald-400 ring-1 ring-inset ring-emerald-600/20">
                            Active Pre-sale
                        </span>
                    </div>
                    <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
                        <span class="material-symbols-outlined text-[18px]">location_on</span>
                        <p>Av. Vallarta 5050, Zapopan, Jalisco, Mexico</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <button
                        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-slate-800 px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                        <span class="material-symbols-outlined text-[18px]">edit</span>
                        Edit
                    </button>
                    <button
                        class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
                        <span class="material-symbols-outlined text-[18px]">add</span>
                        New Lot
                    </button>
                </div>
            </div>
            <!-- Tabs -->
            <div class="border-b border-slate-200 dark:border-slate-800">
                <nav aria-label="Tabs" class="-mb-px flex space-x-8">
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#overview">
                        Overview
                    </a>
                    <a aria-current="page"
                        class="border-primary text-primary dark:text-primary-400 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-bold"
                        href="#inventory">
                        Inventory
                    </a>
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#pricing">
                        Pricing &amp; Rules
                    </a>
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#amenities">
                        Amenities
                    </a>
                    <a class="border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 hover:text-slate-700 dark:hover:text-slate-300 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
                        href="#map">
                        Map
                    </a>
                </nav>
            </div>
            <!-- Content Grid -->
            <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                <!-- LEFT COLUMN (Main Content) -->
                <div class="xl:col-span-2 space-y-6">
                    <!-- Overview / Gallery Section (Collapsed/Mini view for inventory page focus) -->
                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden"
                        id="overview">
                        <div class="relative h-48 sm:h-64 w-full">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10">
                            </div>
                            <img alt="Luxury modern residential complex exterior at sunset"
                                class="w-full h-full object-cover" data-alt="Modern residential building facade with sunset"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXyiH-rD-TxRtKyONEkpt8XMbXQKnRleqBHPMFNTvuOtwAQwhU2m0MWeq6KLBCwZub7W6oE9spFSf7xrxqugD7F1Uvxuw4jCIKkp78Bxac4GWorGPx7tNvqWBMwctpdOaipvciHdXROC-6sqbQs4e2IrWFG_gN13jx5oalBjHW7rHhVbc_Wnj9-XjYCRtPWDGG_ppynUOpdc5cqpLj1oglc1qMVaZjl7cbEAop_LBI1aTFumfZYIM1B5S_ulxrhNaxGvOokktMRV4" />
                            <div class="absolute bottom-4 left-4 z-20 text-white">
                                <h2 class="text-xl font-bold">Premium Living Spaces</h2>
                                <p class="text-sm text-white/90">Experience luxury in the heart of Zapopan.</p>
                            </div>
                        </div>
                        <div
                            class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4 divide-x divide-slate-100 dark:divide-slate-700">
                            <div class="px-2">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Total Lots</p>
                                <p class="text-2xl font-bold text-slate-900 dark:text-white mt-1">142</p>
                            </div>
                            <div class="px-4">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Available</p>
                                <p class="text-2xl font-bold text-emerald-600 dark:text-emerald-400 mt-1">84
                                </p>
                            </div>
                            <div class="px-4">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Reserved</p>
                                <p class="text-2xl font-bold text-amber-500 dark:text-amber-400 mt-1">12</p>
                            </div>
                            <div class="px-4 border-none">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Sold</p>
                                <p class="text-2xl font-bold text-rose-500 dark:text-rose-400 mt-1">46</p>
                            </div>
                        </div>
                    </section>
                    <!-- Inventory Section -->
                    <section class="flex flex-col gap-4" id="inventory">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-bold text-slate-900 dark:text-white">Inventory</h3>
                            <div class="flex gap-2">
                                <div class="relative">
                                    <input
                                        class="pl-9 pr-4 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none w-64"
                                        placeholder="Search lot number..." type="text" />
                                    <span
                                        class="material-symbols-outlined absolute left-2.5 top-2 text-slate-400 text-[20px]">search</span>
                                </div>
                                <button
                                    class="p-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
                                    <span class="material-symbols-outlined text-[20px]">filter_list</span>
                                </button>
                            </div>
                        </div>
                        <div
                            class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="w-full text-sm text-left">
                                    <thead
                                        class="bg-slate-50 dark:bg-slate-800/50 text-slate-500 dark:text-slate-400 font-semibold uppercase text-xs border-b border-slate-200 dark:border-slate-700">
                                        <tr>
                                            <th class="px-6 py-4">Lot #</th>
                                            <th class="px-6 py-4">Type</th>
                                            <th class="px-6 py-4">Dimensions</th>
                                            <th class="px-6 py-4">Status</th>
                                            <th class="px-6 py-4 text-right">Price (MXN)</th>
                                            <th class="px-6 py-4 text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                                        <!-- Row 1 -->
                                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                            <td class="px-6 py-4 font-medium text-slate-900 dark:text-white">
                                                A-101</td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                    <span
                                                        class="material-symbols-outlined text-[18px] text-slate-400">home</span>
                                                    Residential
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">250.00 m²
                                            </td>
                                            <td class="px-6 py-4">
                                                <span
                                                    class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20">Available</span>
                                            </td>
                                            <td class="px-6 py-4 text-right font-semibold text-slate-900 dark:text-white">
                                                $1,250,000</td>
                                            <td class="px-6 py-4 text-center">
                                                <button
                                                    class="text-primary hover:text-primary-dark font-medium text-xs uppercase tracking-wide opacity-0 group-hover:opacity-100 transition-opacity">Reserve</button>
                                            </td>
                                        </tr>
                                        <!-- Row 2 -->
                                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                            <td class="px-6 py-4 font-medium text-slate-900 dark:text-white">
                                                A-102</td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                    <span
                                                        class="material-symbols-outlined text-[18px] text-slate-400">storefront</span>
                                                    Commercial
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">500.00 m²
                                            </td>
                                            <td class="px-6 py-4">
                                                <span
                                                    class="inline-flex items-center rounded-full bg-yellow-50 dark:bg-yellow-900/20 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400 ring-1 ring-inset ring-yellow-600/20">Reserved</span>
                                            </td>
                                            <td class="px-6 py-4 text-right font-semibold text-slate-900 dark:text-white">
                                                $3,500,000</td>
                                            <td class="px-6 py-4 text-center">
                                                <button
                                                    class="text-slate-400 cursor-not-allowed font-medium text-xs uppercase tracking-wide">--</button>
                                            </td>
                                        </tr>
                                        <!-- Row 3 -->
                                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                            <td class="px-6 py-4 font-medium text-slate-900 dark:text-white">
                                                B-205</td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                    <span
                                                        class="material-symbols-outlined text-[18px] text-slate-400">home</span>
                                                    Residential
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">300.00 m²
                                            </td>
                                            <td class="px-6 py-4">
                                                <span
                                                    class="inline-flex items-center rounded-full bg-red-50 dark:bg-red-900/20 px-2 py-1 text-xs font-medium text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-600/20">Sold</span>
                                            </td>
                                            <td class="px-6 py-4 text-right font-semibold text-slate-900 dark:text-white">
                                                $1,500,000</td>
                                            <td class="px-6 py-4 text-center">
                                                <button
                                                    class="text-slate-400 cursor-not-allowed font-medium text-xs uppercase tracking-wide">View</button>
                                            </td>
                                        </tr>
                                        <!-- Row 4 -->
                                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                            <td class="px-6 py-4 font-medium text-slate-900 dark:text-white">
                                                B-206</td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                    <span
                                                        class="material-symbols-outlined text-[18px] text-slate-400">home</span>
                                                    Residential
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">280.00 m²
                                            </td>
                                            <td class="px-6 py-4">
                                                <span
                                                    class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20">Available</span>
                                            </td>
                                            <td class="px-6 py-4 text-right font-semibold text-slate-900 dark:text-white">
                                                $1,400,000</td>
                                            <td class="px-6 py-4 text-center">
                                                <button
                                                    class="text-primary hover:text-primary-dark font-medium text-xs uppercase tracking-wide opacity-0 group-hover:opacity-100 transition-opacity">Reserve</button>
                                            </td>
                                        </tr>
                                        <!-- Row 5 -->
                                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                            <td class="px-6 py-4 font-medium text-slate-900 dark:text-white">
                                                C-12</td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                    <span
                                                        class="material-symbols-outlined text-[18px] text-slate-400">home</span>
                                                    Residential
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">420.00 m²
                                            </td>
                                            <td class="px-6 py-4">
                                                <span
                                                    class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20">Available</span>
                                            </td>
                                            <td class="px-6 py-4 text-right font-semibold text-slate-900 dark:text-white">
                                                $2,100,000</td>
                                            <td class="px-6 py-4 text-center">
                                                <button
                                                    class="text-primary hover:text-primary-dark font-medium text-xs uppercase tracking-wide opacity-0 group-hover:opacity-100 transition-opacity">Reserve</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div
                                class="px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between">
                                <p class="text-sm text-slate-500 dark:text-slate-400">Showing <span
                                        class="font-medium text-slate-900 dark:text-white">1-5</span> of <span
                                        class="font-medium text-slate-900 dark:text-white">142</span> lots</p>
                                <div class="flex gap-2">
                                    <button
                                        class="px-3 py-1 text-sm rounded border border-slate-300 dark:border-slate-700 text-slate-500 disabled:opacity-50"
                                        disabled="">Previous</button>
                                    <button
                                        class="px-3 py-1 text-sm rounded border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">Next</button>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- Map Section -->
                    <section class="mt-8" id="map">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Master Plan</h3>
                        <div
                            class="relative w-full aspect-video bg-slate-100 dark:bg-slate-800 rounded-xl overflow-hidden group">
                            <div class="absolute inset-0 bg-cover bg-center opacity-80 group-hover:scale-105 transition-transform duration-700"
                                data-alt="Blueprint or map of the residential development"
                                data-location="Zapopan, Jalisco"
                                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBbV-UqgUac4NvkZsU2BujjaBDjs0GPa6VhGAKe7ONXMPVsYiHf5ocZni6ntZUPYP0L_oPNR3Cp22E_5OAW8z1n6cRcjZmxEvhqutH3MSrjyPPYxvft3FT0VwRjo0RrPpAvB7vWybOf4NSnwHUdbjkNDLbTqwY9MHP-WS0pLdBv2zVIwLvz1nSyBNWg3JEId6Rgaq7OxaQ4-WlmMcDgWvJaf6ctrfWC4Rjy4IuZaPodheWHud56MQGoXcVlGcyfUIN4uvVBV32OXWA');">
                            </div>
                            <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition-colors">
                            </div>
                            <div class="absolute inset-0 flex items-center justify-center">
                                <button
                                    class="bg-white dark:bg-surface-dark text-slate-900 dark:text-white px-6 py-3 rounded-full shadow-lg font-semibold flex items-center gap-2 transform hover:scale-105 transition-all">
                                    <span class="material-symbols-outlined">map</span>
                                    View Interactive Map
                                </button>
                            </div>
                        </div>
                    </section>
                </div>
                <!-- RIGHT COLUMN (Sidebar Details) -->
                <div class="space-y-6">
                    <!-- Pricing Card -->
                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6"
                        id="pricing">
                        <div class="flex items-center gap-2 mb-4 text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined text-primary">payments</span>
                            <h3 class="text-lg font-bold">Pricing &amp; Rules</h3>
                        </div>
                        <div class="space-y-4">
                            <div class="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                                <p class="text-xs font-medium text-slate-500 uppercase">Base Price</p>
                                <div class="flex items-end gap-1 mt-1">
                                    <span class="text-2xl font-bold text-slate-900 dark:text-white">$5,000</span>
                                    <span class="text-sm text-slate-500 mb-1">/ m²</span>
                                </div>
                                <p class="text-xs text-slate-400 mt-2">Prices subject to change without notice.
                                </p>
                            </div>
                            <div class="space-y-3 pt-2">
                                <p class="text-sm font-semibold text-slate-900 dark:text-white">Financing
                                    Options</p>
                                <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-300">
                                    <li class="flex items-start gap-2">
                                        <span
                                            class="material-symbols-outlined text-green-500 text-[18px] shrink-0">check_circle</span>
                                        <span>30% Down payment required</span>
                                    </li>
                                    <li class="flex items-start gap-2">
                                        <span
                                            class="material-symbols-outlined text-green-500 text-[18px] shrink-0">check_circle</span>
                                        <span>12 Months interest-free</span>
                                    </li>
                                    <li class="flex items-start gap-2">
                                        <span
                                            class="material-symbols-outlined text-green-500 text-[18px] shrink-0">check_circle</span>
                                        <span>5% Discount on cash payment</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button
                            class="w-full mt-6 py-2 border border-slate-300 dark:border-slate-700 rounded-lg text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                            Download Price List
                        </button>
                    </section>
                    <!-- Amenities -->
                    <section
                        class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-6"
                        id="amenities">
                        <div class="flex items-center gap-2 mb-4 text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined text-primary">stars</span>
                            <h3 class="text-lg font-bold">Amenities</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div
                                class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/30 text-center hover:border-primary/30 transition-colors">
                                <span class="material-symbols-outlined text-primary mb-2">pool</span>
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">Infinity
                                    Pool</span>
                            </div>
                            <div
                                class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/30 text-center hover:border-primary/30 transition-colors">
                                <span class="material-symbols-outlined text-primary mb-2">fitness_center</span>
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">Gym</span>
                            </div>
                            <div
                                class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/30 text-center hover:border-primary/30 transition-colors">
                                <span class="material-symbols-outlined text-primary mb-2">local_police</span>
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">24/7
                                    Security</span>
                            </div>
                            <div
                                class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/30 text-center hover:border-primary/30 transition-colors">
                                <span class="material-symbols-outlined text-primary mb-2">weekend</span>
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">Clubhouse</span>
                            </div>
                            <div
                                class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/30 text-center hover:border-primary/30 transition-colors">
                                <span class="material-symbols-outlined text-primary mb-2">park</span>
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">Green
                                    Areas</span>
                            </div>
                            <div
                                class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/30 text-center hover:border-primary/30 transition-colors">
                                <span class="material-symbols-outlined text-primary mb-2">wifi</span>
                                <span class="text-xs font-medium text-slate-700 dark:text-slate-300">Fiber
                                    Optic</span>
                            </div>
                        </div>
                    </section>
                    <!-- Agent Notes / Quick Contact -->
                    <section class="bg-indigo-900 rounded-xl shadow-md p-6 text-white relative overflow-hidden">
                        <div class="absolute -top-10 -right-10 w-32 h-32 bg-indigo-800 rounded-full blur-2xl">
                        </div>
                        <div class="relative z-10">
                            <h3 class="text-lg font-bold mb-2">Need Assistance?</h3>
                            <p class="text-indigo-200 text-sm mb-4">Contact the regional manager for special
                                discount approvals.</p>
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-8 h-8 rounded-full bg-indigo-700 flex items-center justify-center text-xs font-bold">
                                    RM</div>
                                <div class="text-sm">
                                    <p class="font-medium">Roberto Martinez</p>
                                    <p class="text-indigo-300 text-xs">roberto@crm.com</p>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <footer
            class="max-w-[1200px] mx-auto mt-12 py-6 border-t border-slate-200 dark:border-slate-800 text-center text-sm text-slate-400">
            © 2023 Real Estate CRM. All rights reserved.
        </footer>
    </div>
@endsection