@extends('layouts.app')

@section('title', 'Verified Bare Lands and Plots for Sale in Abuja - Frantyapp')
@section('meta_description', 'Discover verified FCDA land allocations, hillside residential plots, and commercial land titles in Guzape, Katampe Extension, Kubwa, and Maitama.')

@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 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Title Verified Land Portfolios</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">Bare Lands and Estate Plots in Abuja</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Direct FCDA allocations, AGIS recertified titles, and master-planned residential and commercial land plots ready for building plan approval.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">

    <!-- Search & Filter Bar for Lands -->
    <div class="bg-white border border-gray-200 p-6 mb-10 shadow-sm">
        <form action="{{ route('lands.index') }}" method="GET" class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
            <div class="sm:col-span-5">
                <label class="block text-[10px] font-bold uppercase tracking-widest text-gray-500 mb-1">Search Location / District</label>
                <input type="text" name="keyword" value="{{ request('keyword') }}" placeholder="Guzape, Kubwa, Katampe, Maitama..." class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium text-black focus:outline-none focus:bg-white focus:border-brand-blue">
            </div>

            <div class="sm:col-span-3">
                <label class="block text-[10px] font-bold uppercase tracking-widest text-gray-500 mb-1">Min Price (₦)</label>
                <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="e.g. 30000000" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium text-black">
            </div>

            <div class="sm:col-span-3">
                <label class="block text-[10px] font-bold uppercase tracking-widest text-gray-500 mb-1">Max Price (₦)</label>
                <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="e.g. 150000000" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium text-black">
            </div>

            <div class="sm:col-span-1">
                <button type="submit" class="w-full py-3.5 bg-brand-blue text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-darkblue transition-colors flex justify-center items-center">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>
        </form>
    </div>

    <!-- Lands Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        @forelse($lands as $land)
            <div class="bg-white border border-gray-200 overflow-hidden hover:border-black hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 group flex flex-col rounded-none">
                <div class="relative h-64 overflow-hidden bg-gray-100">
                    <img src="{{ $land->main_image }}" alt="{{ $land->title }}" class="w-full h-full object-cover group-hover:scale-108 transition-transform duration-700 ease-out">
                    <div class="absolute top-4 left-4 flex space-x-2">
                        <span class="px-3 py-1 bg-brand-blue text-white text-[10px] font-bold uppercase tracking-widest shadow">
                            Bare Land
                        </span>
                        <span class="px-3 py-1 bg-neutral-900 text-white text-[10px] font-bold uppercase tracking-widest border border-gray-700 shadow">
                            {{ $land->sqft }} SQM
                        </span>
                    </div>
                    <div class="absolute top-4 right-4">
                        <span class="px-2.5 py-1 bg-black/90 text-white text-[9px] font-extrabold uppercase tracking-widest border border-white/20 shadow backdrop-blur-sm flex items-center space-x-1">
                            <i class="fa-solid fa-shield-halved text-brand-blue text-[10px]"></i>
                            <span>AGIS VERIFIED</span>
                        </span>
                    </div>
                </div>

                <div class="p-6 flex-grow flex flex-col justify-between space-y-4">
                    <div>
                        <span class="font-serif-heading font-bold text-2xl text-black block">₦{{ number_format($land->price, 0) }}</span>
                        <h3 class="font-serif-heading font-bold text-lg text-black mt-2 group-hover:text-brand-blue transition-colors line-clamp-2">
                            <a href="{{ route('properties.show', $land->slug) }}">{{ $land->title }}</a>
                        </h3>
                        <p class="text-gray-500 text-xs mt-1.5 font-normal flex items-center">
                            <i class="fa-solid fa-location-dot text-brand-blue mr-1.5"></i>
                            <span>{{ $land->address }}, {{ $land->city }}</span>
                        </p>
                    </div>

                    <div class="pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-600 font-medium">
                        <span>Plot Size: <strong>{{ $land->sqft }} sqm</strong></span>
                        <span class="text-[10px] text-brand-blue font-extrabold uppercase tracking-wider flex items-center space-x-1 truncate max-w-[140px]">
                            <i class="fa-solid fa-circle-check text-[9px]"></i>
                            <span class="truncate">{{ Str::limit($land->title_document ?? 'FCDA C of O', 16) }}</span>
                        </span>
                    </div>

                    <div class="pt-2">
                        <a href="{{ route('properties.show', $land->slug) }}" class="block w-full py-3.5 text-center bg-brand-blue text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-darkblue transition-all shadow-md rounded-none">
                            Inspect Land and Verify Title
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-3 border border-gray-200 p-12 text-center bg-white">
                <p class="text-gray-500 text-xs">No land plots found matching your criteria.</p>
                <a href="{{ route('lands.index') }}" class="mt-3 inline-block px-4 py-2 bg-brand-blue text-white text-xs font-bold uppercase tracking-widest">Reset Filters</a>
            </div>
        @endforelse
    </div>

    <div class="mt-10">
        {{ $lands->links() }}
    </div>

</div>
@endsection
