@extends('layouts.app')

@section('title', $neighborhood->name . ' Real Estate and Community Guide - Frantyapp')
@section('meta_description', Str::limit(strip_tags($neighborhood->description), 155))

@section('content')
<!-- Header Banner -->
<div class="bg-black text-white py-16 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center space-x-2 text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">
            <a href="{{ route('home') }}" class="hover:text-white">Home</a>
            <span>/</span>
            <a href="{{ route('neighborhoods.index') }}" class="hover:text-white">Abuja Districts</a>
            <span>/</span>
            <span class="text-white font-bold">{{ $neighborhood->name }}</span>
        </div>
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-brand-blue block">
            {{ $neighborhood->tagline }}
        </span>
        <div class="w-12 h-[2px] bg-brand-blue mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl text-white mt-1">{{ $neighborhood->name }}</h1>
        <p class="text-gray-300 text-base mt-2 font-light max-w-3xl">{{ $neighborhood->description }}</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
    
    <!-- Community Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-14" data-aos="fade-up">
        <div class="border border-gray-200 p-6 bg-white space-y-1">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Schools and Education</span>
            <span class="font-serif-heading font-bold text-lg text-black block">{{ $neighborhood->school_rating }}</span>
        </div>
        <div class="border border-gray-200 p-6 bg-white space-y-1">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Commute to CBD</span>
            <span class="font-serif-heading font-bold text-lg text-black block">{{ $neighborhood->commute_cbd }}</span>
        </div>
        <div class="border border-gray-200 p-6 bg-white space-y-1">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Average Land Valuation</span>
            <span class="font-serif-heading font-bold text-lg text-black block">{{ $neighborhood->avg_price_per_sqm }}</span>
        </div>
        <div class="border border-gray-200 p-6 bg-white space-y-1">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">AGIS Title Status</span>
            <span class="font-serif-heading font-bold text-sm text-emerald-700 block">{{ $neighborhood->title_status }}</span>
        </div>
    </div>

    <!-- Lifestyle and Infrastructure -->
    <div class="border border-gray-200 p-8 bg-white mb-14 space-y-4" data-aos="fade-up">
        <h3 class="font-serif-heading font-bold text-2xl text-black border-b border-gray-100 pb-3">Lifestyle and Security Overview</h3>
        <p class="text-gray-700 text-sm leading-relaxed font-light">{{ $neighborhood->lifestyle_overview }}</p>
    </div>

    <!-- Active Property Inventory in Neighborhood -->
    <div class="space-y-6">
        <div class="flex items-center justify-between border-b border-gray-200 pb-4">
            <h2 class="font-serif-heading font-bold text-2xl text-black">Active Properties in {{ $neighborhood->name }}</h2>
            <span class="text-xs font-bold text-gray-500 uppercase tracking-widest">{{ $properties->total() }} Properties Available</span>
        </div>

        @if($properties->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($properties as $property)
                    <div class="border border-gray-200 bg-white overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col group">
                        <div class="relative h-56 overflow-hidden bg-black">
                            <img src="{{ $property->main_image }}" alt="{{ $property->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                        </div>
                        <div class="p-6 flex-grow flex flex-col justify-between space-y-3">
                            <div>
                                <span class="font-serif-heading font-bold text-2xl text-black block">₦{{ number_format($property->price, 0) }}</span>
                                <h3 class="font-serif-heading font-bold text-base text-black mt-1 group-hover:text-brand-blue transition-colors">
                                    <a href="{{ route('properties.show', $property->slug) }}">{{ $property->title }}</a>
                                </h3>
                            </div>
                            <a href="{{ route('properties.show', $property->slug) }}" class="block w-full py-2.5 text-center bg-black text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-blue">
                                View Details and Inspection
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-8">
                {{ $properties->links() }}
            </div>
        @else
            <div class="border border-gray-200 p-8 text-center bg-white">
                <p class="text-gray-500 text-xs">No active property listings currently published in {{ $neighborhood->name }}. Contact an advisor for off-market private allocations.</p>
                <a href="https://wa.me/2348031234567?text=Hello%20Frantyapp,%20I%20want%20off-market%20listings%20in%20{{ urlencode($neighborhood->name) }}." target="_blank" class="mt-4 inline-block px-6 py-2.5 bg-black text-white text-xs font-bold uppercase tracking-widest">
                    Inquire Off-Market Deals
                </a>
            </div>
        @endif
    </div>

</div>
@endsection
