@extends('layouts.landingPage.template')

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

@section('main-content')
    <div class="pl-5 pr-5 pt-5">
        <div class="w-full flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
            <div class="max-w-2xl">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white mb-4">
                    Nuestros Desarrollos Exclusivos
                </h2>
                <p class="text-slate-500 dark:text-slate-400 text-lg leading-relaxed">
                    Consulta inventario real, amenidades y disponibilidad comercial publicada directamente desde el
                    backend.
                </p>
            </div>
        </div>

        <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse ($developmentCards as $development)
                <article
                    class="group flex flex-col bg-white dark:bg-slate-900 rounded-xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                    <div class="relative w-full aspect-[4/3] overflow-hidden">
                        <div
                            class="absolute top-3 left-3 z-10 {{ $development['status_badge_class'] }} text-xs font-bold px-3 py-1.5 rounded-full uppercase tracking-wider">
                            {{ $development['status_label'] }}
                        </div>
                        <div class="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-700"
                            role="img" style='background-image: url("{{ $development['image_url'] }}");'></div>
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
                            <div class="flex items-center gap-1 text-white/90 text-sm font-medium">
                                <span class="material-symbols-outlined text-lg">location_on</span>
                                <span>{{ $development['location_label'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-5 flex flex-col gap-4 flex-1">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3
                                    class="text-xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">
                                    {{ $development['name'] }}</h3>
                                <p class="text-primary font-bold text-lg">{{ $development['starting_price_formatted'] }}</p>
                            </div>
                        </div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">{{ $development['description'] }}</p>
                        <div class="space-y-2">
                            <div class="flex justify-between text-xs font-medium text-slate-500 dark:text-slate-400">
                                <span>Comercializacion</span>
                                <span class="text-slate-900 dark:text-white">{{ $development['commerce_percent'] }}%</span>
                            </div>
                            <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                                <div class="h-full bg-primary rounded-full"
                                    style="width: {{ $development['commerce_percent'] }}%"></div>
                            </div>
                            <p class="text-xs text-slate-400 text-right">
                                {{ $development['availability_label'] }} {{ $development['availability_caption'] }}
                            </p>
                        </div>
                        <div class="flex flex-wrap gap-2 pt-1">
                            @foreach ($development['amenities'] as $amenity)
                                <span
                                    class="px-3 py-1 bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-xs font-medium rounded-lg border border-slate-100 dark:border-slate-700 flex items-center gap-1">
                                    <span class="material-symbols-outlined text-[16px]">{{ $amenity['icon'] }}</span>
                                    {{ $amenity['name'] }}
                                </span>
                            @endforeach
                        </div>
                        <div class="mt-auto pt-4 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">
                                Agenda recorrido
                            </a>
                        </div>
                    </div>
                </article>
            @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 desarrollos publicados por el momento.
                </div>
            @endforelse
        </div>

        <div class="w-full flex justify-center mt-12">
            <a class="flex items-center gap-2 px-6 py-3 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-900 dark:text-white font-bold transition-all"
                href="{{ route('propertyList') }}">
                Ver lotes disponibles
                <span class="material-symbols-outlined">arrow_forward</span>
            </a>
        </div>
    </div>
@endsection