@extends('layouts.app')

@section('title', 'Abuja Prime Districts and Investment Corridors - Frantyapp')
@section('meta_description', 'Explore Abuja top real estate districts: Maitama, Asokoro, Guzape Hillside, Katampe Extension, and Jabi Waterfront with AGIS title search verification.')

@section('content')
<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 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Hyper-Local Community Showcase</span>
        <div class="w-12 h-[2px] bg-brand-blue mx-auto mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl mt-2">Abuja Prime Real Estate Districts</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Explore diplomatic corridors, hillside luxury estates, and high-yield commercial hubs in Nigeria's Federal Capital.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @foreach($neighborhoods as $neighborhood)
            <div data-aos="fade-up" class="border border-gray-200 bg-white overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col group">
                <div class="relative h-64 overflow-hidden bg-black">
                    <img src="{{ asset($neighborhood->image) }}" alt="{{ $neighborhood->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-90">
                    <div class="absolute top-4 left-4 bg-black text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1">
                        {{ $neighborhood->city }}
                    </div>
                </div>

                <div class="p-6 flex-grow flex flex-col justify-between space-y-4">
                    <div>
                        <span class="text-[10px] font-bold uppercase tracking-widest text-white bg-black/80 px-2.5 py-0.5 inline-block mb-2 border border-white/20">
                            {{ $neighborhood->tagline }}
                        </span>
                        <h3 class="font-serif-heading font-bold text-2xl text-black group-hover:text-brand-blue transition-colors">
                            <a href="{{ route('neighborhoods.show', $neighborhood->slug) }}">{{ $neighborhood->name }}</a>
                        </h3>
                        <p class="text-gray-500 text-xs mt-2 line-clamp-3 leading-relaxed font-light">
                            {{ $neighborhood->description }}
                        </p>
                    </div>

                    <div class="space-y-2 pt-4 border-t border-gray-100 text-xs text-gray-700 font-medium">
                        <div class="flex justify-between">
                            <span class="text-gray-400">Avg Price / sqm:</span>
                            <span class="font-bold text-black">{{ $neighborhood->avg_price_per_sqm }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Commute to CBD:</span>
                            <span class="font-bold text-black">{{ $neighborhood->commute_cbd }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Title Status:</span>
                            <span class="font-bold text-emerald-700">{{ $neighborhood->title_status }}</span>
                        </div>
                    </div>

                    <a href="{{ route('neighborhoods.show', $neighborhood->slug) }}" class="block w-full py-3 text-center bg-black text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-blue transition-colors">
                        Explore {{ $neighborhood->name }} Listings &rarr;
                    </a>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection
