@extends('layouts.landingPage.template')

@section('title', 'Inicio | ' . ($landing['brand']['full'] ?? 'Fraccionamientos Colima'))

@section('extra-styles')
    <style>
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
@endsection

@section('main-content')
    <section class="relative min-h-[600px] flex items-center justify-center py-20 px-4 overflow-hidden">
        <div class="absolute inset-0 z-0 bg-cover bg-center"
            style="background-image: url('{{ $heroData['background_image'] }}');"></div>
        <div class="absolute inset-0 z-10 bg-slate-900/40 backdrop-blur-[2px]"></div>
        <div class="relative z-20 w-full max-w-5xl flex flex-col items-center gap-8">
            <div class="text-center space-y-4 max-w-3xl">
                <h1
                    class="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-tight tracking-tight drop-shadow-sm">
                    Encuentra tu lote ideal <br /> dentro de nuestros desarrollos
                </h1>
                <p class="text-lg md:text-xl text-slate-100 font-medium drop-shadow-sm max-w-2xl mx-auto">
                    Inventario real, ubicaciones activas y disponibilidad actualizada para iniciar tu proceso de compra
                    con datos confiables.
                </p>
            </div>
            <form action="{{ route('propertyList') }}"
                class="w-full bg-white dark:bg-background-dark rounded-xl shadow-2xl p-2 md:p-6 overflow-hidden">
                <div class="flex border-b border-slate-200 dark:border-slate-700 mb-6 overflow-x-auto no-scrollbar">
                    <button
                        class="flex items-center gap-2 px-6 py-3 text-primary border-b-2 border-primary font-semibold text-sm whitespace-nowrap"
                        type="button">
                        <span class="material-symbols-outlined text-[20px]">home</span>
                        Comprar
                    </button>
                    <a class="flex items-center gap-2 px-6 py-3 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 font-medium text-sm whitespace-nowrap transition-colors"
                        href="{{ route('developmentList') }}">
                        <span class="material-symbols-outlined text-[20px]">apartment</span>
                        Desarrollos
                    </a>
                    <a class="flex items-center gap-2 px-6 py-3 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 font-medium text-sm whitespace-nowrap transition-colors"
                        href="{{ route('us') }}">
                        <span class="material-symbols-outlined text-[20px]">groups</span>
                        Nosotros
                    </a>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
                    <div class="md:col-span-5 space-y-1.5">
                        <label
                            class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Ubicacion</label>
                        <div class="relative">
                            <span
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined">location_on</span>
                            <input
                                class="w-full pl-10 pr-4 py-3 bg-slate-50 dark:bg-slate-800 border-none rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-primary text-sm font-medium"
                                name="search" placeholder="Fraccionamiento, ciudad o lote" type="text" />
                        </div>
                    </div>
                    <div class="md:col-span-3 space-y-1.5">
                        <label
                            class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Tipo</label>
                        <div class="relative">
                            <span
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined">home_work</span>
                            <select
                                class="w-full pl-10 pr-8 py-3 bg-slate-50 dark:bg-slate-800 border-none rounded-lg text-slate-900 dark:text-white focus:ring-2 focus:ring-primary text-sm font-medium appearance-none cursor-pointer"
                                name="type">
                                <option value="">Cualquiera</option>
                                @foreach ($heroData['type_options'] as $type)
                                    <option value="{{ $type['id'] }}">{{ $type['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="md:col-span-2 space-y-1.5 hidden md:block">
                        <label
                            class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Precio
                            max.</label>
                        <div class="relative">
                            <span
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined">attach_money</span>
                            <select
                                class="w-full pl-10 pr-8 py-3 bg-slate-50 dark:bg-slate-800 border-none rounded-lg text-slate-900 dark:text-white focus:ring-2 focus:ring-primary text-sm font-medium appearance-none cursor-pointer"
                                name="max_price">
                                <option value="">Sin limite</option>
                                <option value="250000">$250,000</option>
                                <option value="500000">$500,000</option>
                                <option value="1000000">$1,000,000</option>
                            </select>
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        <button
                            class="w-full h-[46px] bg-primary hover:bg-primary-dark text-white font-bold rounded-lg transition-colors flex items-center justify-center gap-2 shadow-lg shadow-primary/25"
                            type="submit">
                            <span class="material-symbols-outlined">search</span>
                            <span>Buscar</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
            <div>
                <h2 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Propiedades Destacadas</h2>
                <p class="mt-2 text-slate-500 dark:text-slate-400">Lotes y oportunidades listos para seguimiento
                    comercial.</p>
            </div>
            <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0 no-scrollbar">
                <a class="px-4 py-2 bg-primary text-white rounded-full text-sm font-semibold shadow-md shadow-primary/20 whitespace-nowrap transition-transform hover:scale-105"
                    href="{{ route('propertyList') }}">Todos</a>
                @foreach ($featuredPropertyChips as $chip)
                    <a class="px-4 py-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 rounded-full text-sm font-medium hover:border-primary hover:text-primary whitespace-nowrap transition-colors"
                        href="{{ $chip['url'] }}">{{ $chip['label'] }}</a>
                @endforeach
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse ($featuredProperties as $lot)
                <div
                    class="group bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-slate-100 dark:border-slate-700 flex flex-col h-full">
                    <div class="relative h-64 overflow-hidden">
                        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                            src="{{ $lot['image_url'] }}" alt="{{ $lot['title'] }}" />
                        <div
                            class="absolute top-4 left-4 bg-green-500 text-white text-xs font-bold px-2.5 py-1 rounded shadow-sm">
                            {{ $lot['primary_badge'] }}</div>

                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <p class="text-2xl font-bold text-white">{{ $lot['price_formatted'] }}</p>
                        </div>
                    </div>
                    <div class="p-5 flex-1 flex flex-col">
                        <h3
                            class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">
                            {{ $lot['title'] }}</h3>
                        <div class="flex items-center text-slate-500 dark:text-slate-400 text-sm mb-1">
                            <span class="material-symbols-outlined text-[18px] mr-1 text-primary">apartment</span>
                            {{ $lot['development_name'] }}
                        </div>
                        <div class="flex items-center text-slate-500 dark:text-slate-400 text-sm mb-4">
                            <span class="material-symbols-outlined text-[18px] mr-1 text-primary">location_on</span>
                            {{ $lot['location_label'] }}
                        </div>
                        <div
                            class="flex items-center justify-between py-4 border-t border-slate-100 dark:border-slate-700 mt-auto">
                            <div class="flex items-center gap-1 text-slate-600 dark:text-slate-300 text-sm font-medium">
                                <span class="material-symbols-outlined text-[20px] text-slate-400">pin</span>
                                {{ $lot['lot_label'] }}
                            </div>
                            <div class="flex items-center gap-1 text-slate-600 dark:text-slate-300 text-sm font-medium">
                                <span class="material-symbols-outlined text-[20px] text-slate-400">grid_view</span>
                                {{ $lot['block_label'] }}
                            </div>
                            <div class="flex items-center gap-1 text-slate-600 dark:text-slate-300 text-sm font-medium">
                                <span class="material-symbols-outlined text-[20px] text-slate-400">square_foot</span>
                                {{ $lot['area_label'] }}
                            </div>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <a class="flex-1 py-2.5 rounded-lg border border-primary text-primary font-semibold text-sm hover:bg-primary/5 transition-colors text-center"
                                href="{{ $lot['detail_url'] }}">Ver detalle</a>
                            <a class="w-10 flex items-center justify-center rounded-lg bg-green-500 text-white hover:bg-green-600 transition-colors"
                                href="{{ $lot['contact_url'] }}" rel="noreferrer" target="_blank">
                                <span class="material-symbols-outlined text-[20px]">chat</span>
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div
                    class="md:col-span-2 lg:col-span-3 rounded-2xl border border-dashed border-slate-300 bg-white p-10 text-center text-slate-600">
                    No hay lotes disponibles para mostrar en la portada.
                </div>
            @endforelse
        </div>
    </div>

    <section class="bg-white dark:bg-slate-900 py-16 border-y border-slate-100 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-10 text-center md:text-left">
                <span class="text-primary font-bold text-sm tracking-widest uppercase">Inventario activo</span>
                <h2 class="text-3xl font-bold text-slate-900 dark:text-white mt-2">Desarrollos Destacados</h2>
                <p class="mt-3 text-slate-500 dark:text-slate-400 max-w-2xl">Consulta fraccionamientos con inventario
                    disponible y amenidades publicadas.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @foreach ($developmentHighlights as $development)
                    <div
                        class="flex flex-col lg:flex-row bg-slate-50 dark:bg-slate-800/50 rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-700 hover:shadow-lg transition-all duration-300">
                        <div class="lg:w-2/5 h-64 lg:h-auto relative">
                            <img class="w-full h-full object-cover" src="{{ $development['image_url'] }}"
                                alt="{{ $development['name'] }}" />
                            <div class="absolute inset-0 bg-black/10"></div>
                        </div>
                        <div class="lg:w-3/5 p-6 lg:p-8 flex flex-col justify-center">
                            <div class="flex justify-between items-start mb-2 gap-3">
                                <h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ $development['name'] }}
                                </h3>
                                <span
                                    class="px-2 py-1 {{ $development['status_badge_class'] }} text-xs font-bold rounded">{{ $development['status_label'] }}</span>
                            </div>
                            <p class="text-slate-500 dark:text-slate-400 text-sm mb-4">{{ $development['description'] }}
                            </p>
                            <div class="mb-5">
                                <div class="flex justify-between text-xs font-semibold text-slate-500 mb-1">
                                    <span>Comercializacion</span>
                                    <span>{{ $development['commerce_percent'] }}%</span>
                                </div>
                                <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full"
                                        style="width: {{ $development['commerce_percent'] }}%"></div>
                                </div>
                                <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                                    {{ $development['availability_label'] }} {{ $development['availability_caption'] }}
                                </p>
                            </div>
                            <div class="flex gap-4 mb-6">
                                @foreach ($development['amenities'] as $amenity)
                                    <div class="flex flex-col items-center gap-1 text-slate-600 dark:text-slate-300">
                                        <span
                                            class="material-symbols-outlined p-2 bg-white dark:bg-slate-800 rounded-lg shadow-sm">{{ $amenity['icon'] }}</span>
                                        <span class="text-[10px] uppercase font-bold">{{ $amenity['name'] }}</span>
                                    </div>
                                @endforeach
                            </div>
                            <div class="mt-auto pt-2 flex gap-3">
                                <a class="flex-1 h-10 bg-primary hover:bg-blue-600 text-white text-sm font-bold rounded-lg transition-colors shadow-sm hover:shadow-md flex items-center justify-center"
                                    href="{{ $development['detail_url'] }}">
                                    Ver disponibilidad
                                </a>
                                <a class="flex-1 h-10 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-700 dark:text-slate-200 hover:text-primary dark:hover:text-primary text-sm font-bold rounded-lg transition-colors bg-white dark:bg-transparent flex items-center justify-center"
                                    href="{{ $development['contact_url'] }}" rel="noreferrer" target="_blank">
                                    Solicitar Brochure
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="py-24">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="bg-primary rounded-[2.5rem] p-8 lg:p-16 relative overflow-hidden text-center text-white">
                <div
                    class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl">
                </div>
                <div
                    class="absolute bottom-0 left-0 w-64 h-64 bg-primary-dark/50 rounded-full translate-y-1/2 -translate-x-1/2 blur-3xl">
                </div>
                <div class="relative z-10 max-w-2xl mx-auto">
                    <h2 class="text-3xl lg:text-5xl font-black mb-6">¿Te ayudamos a encontrar tu proxima propiedad?</h2>
                    <p class="text-lg opacity-90 mb-10">Nuestro equipo comercial ya tiene inventario filtrado y listo
                        para compartir contigo.</p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                        <a class="flex items-center gap-3 bg-white text-primary px-8 py-4 rounded-full font-bold shadow-xl hover:scale-105 transition-transform w-full sm:w-auto justify-center"
                            href="{{ $landing['contact']['whatsapp_url'] ?? route('home') }}" rel="noreferrer"
                            target="_blank">
                            <span class="material-symbols-outlined">chat</span>
                            Hablar por WhatsApp
                        </a>
                        <a class="flex items-center gap-3 border-2 border-white/40 bg-white/10 hover:bg-white/20 text-white px-8 py-4 rounded-full font-bold backdrop-blur-sm transition-all w-full sm:w-auto justify-center"
                            href="{{ route('propertyList') }}">
                            <span class="material-symbols-outlined">search</span>
                            Explorar catalogo
                        </a>
                    </div>
                    <p class="mt-8 text-sm opacity-80 font-medium tracking-wide">Te respondemos rapido y con
                        disponibilidad real.</p>
                </div>
            </div>
        </div>
    </section>
@endsection