@extends('layouts.landingPage.template')

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

@section('main-content')
    <section class="relative overflow-hidden py-16 lg:py-24 bg-background-light dark:bg-slate-950">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
                <div class="flex flex-col gap-6 max-w-2xl">
                    <div class="inline-flex items-center gap-2 text-primary font-bold tracking-wider uppercase text-xs">
                        <span class="h-1 w-6 bg-primary rounded-full"></span>
                        Sobre Nosotros
                    </div>
                    <h1 class="text-4xl lg:text-5xl xl:text-6xl font-black leading-tight text-slate-900 dark:text-white">
                        Tu aliado para elegir con disponibilidad real
                    </h1>
                    <p class="text-lg lg:text-xl text-slate-600 dark:text-slate-400 leading-relaxed">
                        Centralizamos inventario, contacto comercial y visibilidad de desarrollos activos para que el
                        cliente tome decisiones con informacion actualizada.
                    </p>
                    <div class="mt-4 space-y-4">
                        <p class="text-slate-700 dark:text-slate-300 font-medium italic border-l-4 border-primary pl-4">
                            Nuestra operacion publica la misma disponibilidad que el equipo comercial consulta internamente,
                            reduciendo friccion entre marketing, seguimiento y cierre.
                        </p>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-xl">verified</span>
                                <span class="text-sm font-semibold">{{ number_format($activeDevelopmentsCount) }}
                                    desarrollos activos</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-xl">chat</span>
                                <span class="text-sm font-semibold">Atencion directa por WhatsApp y llamada</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-xl">home_work</span>
                                <span class="text-sm font-semibold">{{ number_format($availablePropertiesCount) }}
                                    lotes disponibles</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary text-xl">location_on</span>
                                <span class="text-sm font-semibold">Cobertura enfocada en nuestros desarrollos</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="relative group">
                    <div
                        class="absolute -inset-4 bg-primary/10 rounded-3xl blur-2xl transition-all group-hover:bg-primary/20">
                    </div>
                    <div class="relative overflow-hidden rounded-2xl shadow-2xl">
                        <img alt="Presentacion de desarrollos" class="aspect-[4/5] w-full object-cover"
                            src="{{ $teamMembers[0]['image_url'] ?? 'https://lh3.googleusercontent.com/aida-public/AB6AXuBZlot85BjuBPYIITjeZJ7qCZwF09L5WTgnXnieCpSACsgaOpNj1_hwVBrhhn8IJ-2GNwlAqOPsxfe2XzaQhmT0CJe_aDoYjFg1qGmBkJdmfhok-7PM6LFYn1CdWX95uFAWMuUZZKmbWroN3suv3xTvESjkls3vnmlklg95p6z9TNyO-nukz-Bs6QQVGvfpCk9Ao7S9IXVnCW9LKWYE343pGeKVZQoh-tJ_PLNkHz58NrJC2h-AckTyiPKbsYpRjE-wvcdd99XJG6hT' }}" />

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 bg-white dark:bg-background-dark">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="grid md:grid-cols-3 gap-8">
                <div
                    class="p-8 rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm hover:shadow-xl transition-shadow">
                    <span class="material-symbols-outlined text-4xl text-primary mb-4 block">rocket_launch</span>
                    <h3 class="text-xl font-bold mb-3">Operacion</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
                        Publicamos desarrollos, contacto y disponibilidad comercial sin duplicar captura entre la landing
                        y el modulo interno.
                    </p>
                </div>
                <div
                    class="p-8 rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm hover:shadow-xl transition-shadow">
                    <span class="material-symbols-outlined text-4xl text-primary mb-4 block">visibility</span>
                    <h3 class="text-xl font-bold mb-3">Visibilidad</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
                        El cliente ve solo inventario vigente, con rangos de precio, ubicacion y amenidades consultadas
                        desde backend.
                    </p>
                </div>
                <div
                    class="p-8 rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm hover:shadow-xl transition-shadow">
                    <span class="material-symbols-outlined text-4xl text-primary mb-4 block">favorite</span>
                    <h3 class="text-xl font-bold mb-3">Acompanamiento</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                            <span class="size-1.5 rounded-full bg-primary"></span> Seguimiento comercial centralizado
                        </li>
                        <li class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                            <span class="size-1.5 rounded-full bg-primary"></span> Inventario validado
                        </li>
                        <li class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                            <span class="size-1.5 rounded-full bg-primary"></span> Contacto directo
                        </li>
                        <li class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                            <span class="size-1.5 rounded-full bg-primary"></span> Respuesta desde el equipo activo
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-primary py-12 text-white">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                @foreach ($aboutStats as $stat)
                    <div>
                        <div class="text-4xl lg:text-5xl font-black mb-1">{{ $stat['value'] }}</div>
                        <div class="text-xs uppercase tracking-widest opacity-80">{{ $stat['label'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="py-20">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Conoce a nuestro equipo</h2>
                <p class="text-slate-500 max-w-xl mx-auto">Perfiles activos conectados al backend comercial y listos para
                    atender seguimiento real.</p>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach ($teamMembers as $member)
                    <div class="text-center group">
                        <div class="relative inline-block mb-4">
                            <div
                                class="size-32 rounded-full overflow-hidden ring-4 ring-slate-100 group-hover:ring-primary/20 transition-all">
                                <img alt="{{ $member['name'] }}" class="w-full h-full bg-slate-100"
                                    src="{{ $member['image_url'] }}" />
                            </div>
                        </div>
                        <h4 class="font-bold">{{ $member['name'] }}</h4>
                        <p class="text-xs text-slate-500 mb-2 font-medium">{{ $member['role'] }}</p>
                        <a class="inline-flex items-center px-3 py-1 rounded-full bg-green-50 text-green-600 text-[10px] font-bold dark:bg-green-900/20 dark:text-green-400"
                            href="{{ $member['contact_url'] }}" rel="noreferrer" target="_blank">
                            {{ $member['response_label'] }}
                        </a>
                    </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 revisar opciones disponibles?</h2>
                    <p class="text-lg opacity-90 mb-10">Nuestro equipo esta listo para compartir ubicaciones, rangos de
                        precio y amenidades vigentes.</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>
                </div>
            </div>
        </div>
    </section>
@endsection