@extends('layouts.site')

@section('content')



<!-- Hero Section -->
<section class="relative h-auto md:h-[400px] bg-gradient-to-r from-orange-500 via-pink-600 to-purple-700 flex items-center text-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex flex-col md:flex-row justify-between items-center py-12 md:py-0 h-full relative z-10">
        
        <!-- Left Text - Full width on mobile, half on desktop -->
        <div class="w-full md:w-1/2 h-full flex flex-col justify-center space-y-4 px-4 md:px-0 mb-8 md:mb-0">
            <h1 class="text-3xl md:text-5xl font-extrabold leading-tight md:leading-snug mb-2 tracking-wide text-white drop-shadow-lg">
                Revolutionizing Property Management
            </h1>
            <p class="text-base md:text-lg text-white/90">
                Rentor connects property owners, managers, and tenants in one seamless platform. List properties, manage applications, and find your perfect rental - all in one place.
            </p>
            <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
                {{-- <button class="border-2 border-white hover:bg-white hover:text-orange-600 px-5 py-3 rounded-lg font-semibold text-sm transition duration-300 shadow-lg hover:shadow-xl w-full sm:w-auto text-center">
                    Watch Demo
                </button> --}}
                {{-- <a href="{{ route('register') }}" class="bg-white text-orange-600 px-5 py-3 rounded-lg font-semibold text-sm hover:bg-orange-600 hover:text-white transition duration-300 shadow-lg hover:shadow-xl w-full sm:w-auto text-center">
                    Join our Free beta
                </a> --}}
            </div>
        </div>

        <!-- Right Image - Hidden on mobile if needed, or full width -->
        <div class="w-full md:w-1/2 h-64 md:h-full relative mt-8 md:mt-0">
            <img src="{{ asset('images/backgroud.png') }}" alt="Property Management" 
                 class="absolute bottom-0 w-full h-full object-cover opacity-80 rounded-lg md:rounded-none">
            <!-- Futuristic Neon Lines - Hidden on mobile -->
            <div class="hidden md:block absolute inset-0 pointer-events-none">
                <div class="absolute top-10 left-10 w-64 h-1 bg-white/30 animate-pulse"></div>
                <div class="absolute bottom-20 right-16 w-48 h-1 bg-white/20 animate-pulse"></div>
                <div class="absolute top-1/2 left-20 w-1 h-32 bg-white/25 animate-pulse"></div>
            </div>
        </div>
    </div>



    <!-- Floating Neon Particles - Reduced on mobile -->
    <div class="absolute inset-0">
        <span class="hidden sm:block absolute w-2 h-2 bg-white rounded-full animate-bounce top-10 left-1/4 opacity-50"></span>
        <span class="absolute w-1.5 h-1.5 sm:w-3 sm:h-3 bg-white rounded-full animate-bounce top-1/3 left-3/4 opacity-40"></span>
        <span class="hidden sm:block absolute w-1 h-1 bg-white rounded-full animate-bounce bottom-1/4 left-1/2 opacity-60"></span>
    </div>
</section>
<!-- Beta Testing Notice - ADD THIS SECTION HERE -->
<section class="bg-amber-50 border-b border-amber-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex items-center justify-between flex-wrap sm:flex-nowrap gap-3">
            <div class="flex items-center space-x-3">
                <div class="flex-shrink-0">
                    <i class="fas fa-flask text-amber-600 text-xl"></i>
                </div>
                <div class="flex-1">
                    <p class="text-amber-800 text-sm sm:text-base">
                        <span class="font-semibold">⚠️ Beta Testing Phase:</span> 
                        Rentor is currently in active development. Some features may not work as expected, and you may encounter bugs. 
                        We appreciate your patience and feedback!
                    </p>
                </div>
            </div>
            <a href="#" class="text-amber-700 hover:text-amber-900 text-sm font-medium whitespace-nowrap" 
               onclick="alert('Please send feedback to support@rentor.com. We appreciate your help making Rentor better!')">
                Report Issue →
            </a>
        </div>
    </div>
</section>
<!-- Features Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-gray-900 mb-6">Powerful Features</h2>
<div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-8"></div>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Tools designed to simplify property management for owners, managers, and tenants.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-white p-8 rounded-2xl shadow hover:shadow-lg transition">
<i class="fas fa-file-signature text-orange-600 text-3xl mb-4"></i>
<h3 class="text-lg font-semibold mb-2">Online Applications</h3>
<p class="text-gray-600">Tenants apply in minutes, landlords review instantly from anywhere.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow hover:shadow-lg transition relative overflow-hidden">
  <i class="fas fa-credit-card text-pink-600 text-3xl mb-4"></i>
  <h3 class="text-lg font-semibold mb-2">Rent Payments</h3>
  <p class="text-gray-600">Secure online payments with reminders and instant confirmations.</p>
  
  <!-- Overlay -->
  <div class="absolute inset-0 bg-white/80 flex items-center justify-center">
    <span class="bg-orange-600 text-white text-sm font-semibold px-4 py-2 rounded-full shadow">
      Coming Soon
    </span>
  </div>
</div>

<div class="bg-white p-8 rounded-2xl shadow hover:shadow-lg transition">
<i class="fas fa-tools text-purple-600 text-3xl mb-4"></i>
<h3 class="text-lg font-semibold mb-2">Maintenance Tracking</h3>
<p class="text-gray-600">Submit, track, and resolve repair requests quickly and transparently.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow hover:shadow-lg transition">
<i class="fas fa-chart-line text-orange-600 text-3xl mb-4"></i>
<h3 class="text-lg font-semibold mb-2">Smart Analytics</h3>
<p class="text-gray-600">Gain insights into your rental portfolio with clear dashboards.</p>
</div>
</div>
</div>
</section>

<!-- About Rentor Section -->
{{-- <section class="bg-gradient-to-r from-orange-500 to-pink-600 text-white py-4">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-lg font-semibold">🚀 We’re just getting started — join us on our journey!</p>
    </div>
</section> --}}

<!-- Mid-Page CTA -->
</section>


<!-- FAQ Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900">Frequently Asked Questions</h2>
<p class="mt-2 text-gray-600">Quick answers to common questions about Rentor.</p>
</div>
<div class="space-y-6 max-w-3xl mx-auto">
<div>
<h4 class="font-semibold text-gray-900">Is Rentor free to use?</h4>
<p class="text-gray-600">Yes! Rentor is free during our beta period. Paid plans will launch soon.</p>
</div>
<div>
<h4 class="font-semibold text-gray-900">Can tenants pay rent through Rentor?</h4>
<p class="text-gray-600">No, tenants cannot pay rent through Rentor. Right now but in future will do</p>
</div>
<div>
<h4 class="font-semibold text-gray-900">Is there a mobile app?</h4>
<p class="text-gray-600">We’re mobile-friendly on all devices, and native apps are coming soon.</p>
</div>
<div>
<h4 class="font-semibold text-gray-900">How secure is my data?</h4>
<p class="text-gray-600">We use industry-standard encryption to keep all user data safe.</p>
</div>
<div>
<h4 class="font-semibold text-gray-900">Can I list my properties online?</h4>
<p class="text-gray-600">Yes, landlords or managers can list their properties online through Rentor.</p>
</div>
</div>
</div>
</section>


<!-- Beta Program CTA Section with Background Image -->
<section class="relative py-20 text-white text-center bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 overflow-hidden">
    <!-- Background Image -->
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1545315003-c5ad6226c272?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGhhcHB5JTIwcGVvcGxlfGVufDB8fDB8fHww" 
             alt="Beta Program Background" 
             class="w-full h-full object-cover opacity-30">
        <!-- Optional gradient overlay for better text contrast -->
        <div class="absolute inset-0 bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 opacity-60"></div>
    </div>

    <div class="relative max-w-3xl mx-auto px-6">
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-10 shadow-xl border border-white/20">
            <h2 class="text-4xl font-extrabold mb-4">🚀 Join Our Beta Program</h2>
            <p class="mb-6 text-lg text-white/90">
                Experience Rentor before anyone else!  
                Access all features <span class="font-semibold">free for 3 weeks</span> during our beta launch.
            </p>
            <a href="{{ route('beta') }}" 
               class="inline-block px-8 py-4 rounded-xl bg-white text-purple-700 font-bold text-lg shadow-lg hover:bg-gray-100 transition">
                Join Free Beta
            </a>
            <p class="mt-4 text-sm text-white/70">Limited spots available before official launch.</p>
        </div>
    </div>
</section>



<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-6">About Rentor</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-8"></div>
        </div>
        
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-6">
                <h3 class="text-2xl font-semibold text-gray-900">A Fresh Start in Property Management</h3>
                <p class="text-lg text-gray-700 leading-relaxed">
                    Rentor is a young and ambitious platform created to make property management simpler, faster, and more transparent. We’re here to connect property owners, managers, and tenants in one easy-to-use space that puts people first.
                </p>
                <p class="text-lg text-gray-700 leading-relaxed">
                    While we’re new to the market, our vision is clear — to build a smarter way to handle rentals using modern technology and thoughtful design. Every feature we create is aimed at saving time, reducing stress, and making renting a smoother experience for everyone.
                </p>
                <p class="text-lg text-gray-700 leading-relaxed">
                    Our team is passionate, driven, and ready to grow alongside our users. We believe that great relationships are built on trust, and we’re committed to earning that trust every step of the way.
                </p>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
                <div class="bg-gradient-to-br from-orange-100 to-pink-100 p-6 rounded-xl">
                    <div class="text-3xl font-bold text-orange-600 mb-2">100+</div>
                    <div class="text-gray-700">Applications Processed</div>
                </div>
                <div class="bg-gradient-to-br from-pink-100 to-purple-100 p-6 rounded-xl">
                    <div class="text-3xl font-bold text-pink-600 mb-2">5+</div>
                    <div class="text-gray-700">Cities Reached</div>
                </div>
                <div class="bg-gradient-to-br from-purple-100 to-orange-100 p-6 rounded-xl">
                    <div class="text-3xl font-bold text-purple-600 mb-2">Growing</div>
                    <div class="text-gray-700">Property Listings</div>
                </div>
                <div class="bg-gradient-to-br from-orange-100 to-purple-100 p-6 rounded-xl">
                    <div class="text-3xl font-bold text-orange-600 mb-2">Friendly</div>
                    <div class="text-gray-700">Customer Support</div>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- Our Mission & Values Section -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Mission & Values</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-8"></div>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                As a new player in the market, our mission is simple: make renting and property management easier, friendlier, and more transparent for everyone — owners, managers, and tenants alike.
            </p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
                <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-pink-600 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-lightbulb text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-4">Start with Innovation</h3>
                <p class="text-gray-600">
                    We may be small now, but we’re building with the future in mind — using smart, modern tools to create a better rental experience from day one.
                </p>
            </div>
            
            <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
                <div class="w-16 h-16 bg-gradient-to-r from-pink-600 to-purple-700 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-handshake text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-4">Built on Trust</h3>
                <p class="text-gray-600">
                    We believe in clear communication and fair practices. Every step we take is guided by honesty and a commitment to doing right by our users.
                </p>
            </div>
            
            <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
                <div class="w-16 h-16 bg-gradient-to-r from-purple-700 to-orange-500 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-users text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-4">Community First</h3>
                <p class="text-gray-600">
                    We aim to strengthen communities by making quality housing more accessible and supporting local markets as we grow.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="bg-gradient-to-r from-rentor-blue to-rentor-blue-dark text-white py-24 px-6 text-center">
        <h1 class="text-5xl font-extrabold mb-6 leading-tight">
            Your Dream Rental Home, Just a Click Away
        </h1>
        <p class="text-lg max-w-2xl mx-auto mb-8 text-white/90">
            Explore a wide selection of rental properties online. Fast, easy, and designed to make your move stress-free.
        </p>
        <a href="{{ route('properties.index') }}"
           class="inline-block px-8 py-4 rounded-xl bg-white text-rentor-blue font-semibold text-lg shadow hover:bg-gray-100 transition">
            Browse Properties
        </a>
    </section>

    {{-- Featured Properties --}}
<section class="py-20 px-6 max-w-7xl mx-auto">
    <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-gray-900">Featured Rentals</h2>
        <p class="mt-2 text-gray-600">Check out some of the latest properties available for rent.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($properties as $property)
        <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-gray-100">
            <!-- Property Image with Status Badge -->
            <div class="relative h-48 overflow-hidden bg-gray-200">
                @php
                    // Get the main image URL with proper fallback
                    $imageUrl = null;
                    if (!empty($property->images) && is_array($property->images)) {
                        $firstImage = $property->images[0];
                        // Clean the path
                        $firstImage = ltrim($firstImage, '/');
                        // Check if it's already a full URL
                        if (filter_var($firstImage, FILTER_VALIDATE_URL)) {
                            $imageUrl = $firstImage;
                        } else {
                            // Construct storage URL
                            $imageUrl = asset('storage/' . $firstImage);
                        }
                    }
                    // Fallback to placeholder
                    if (!$imageUrl) {
                        $imageUrl = 'https://via.placeholder.com/400x300/f97316/ffffff?text=' . urlencode($property->name);
                    }
                @endphp
                
                <img src="{{ $imageUrl }}" 
                     alt="{{ $property->name }}" 
                     class="w-full h-full object-cover"
                     onerror="this.src='https://via.placeholder.com/400x300/f97316/ffffff?text={{ urlencode($property->name) }}'">
                
                <!-- Featured Badge -->
                @if($property->is_featured)
                    <span class="absolute top-2 left-2 bg-orange-600 text-white text-xs font-bold px-2 py-1 rounded shadow-md">
                        <i class="fas fa-star mr-1"></i> Featured
                    </span>
                @endif
                
                <!-- Status Badge -->
                <span class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold rounded-full shadow-md
                    {{ strtolower($property->status) == 'available' ? 'bg-green-500 text-white' : 
                       (strtolower($property->status) == 'occupied' ? 'bg-red-500 text-white' : 
                       (strtolower($property->status) == 'partially_occupied' ? 'bg-yellow-500 text-white' : 
                       (strtolower($property->status) == 'fully_occupied' ? 'bg-red-500 text-white' : 
                       'bg-gray-500 text-white'))) }}">
                    {{ ucfirst(str_replace('_', ' ', $property->status)) }}
                </span>
                
                <!-- Image Count Badge (if multiple images) -->
                @if(!empty($property->images) && is_array($property->images) && count($property->images) > 1)
                    <span class="absolute bottom-2 right-2 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded">
                        <i class="fas fa-camera mr-1"></i> {{ count($property->images) }}
                    </span>
                @endif
            </div>
            
            <!-- Property Details -->
            <div class="p-4">
                <h3 class="text-lg font-bold text-gray-900 mb-1 truncate" title="{{ $property->name }}">
                    {{ $property->name }}
                </h3>
                <p class="text-gray-600 text-sm mb-2 line-clamp-1" title="{{ $property->address }}">
                    <i class="fas fa-map-marker-alt text-orange-500 mr-1"></i>
                    {{ $property->address }}
                </p>
                
                <!-- Property Type Badge -->
                <div class="mb-3">
                    <span class="inline-block bg-orange-100 text-orange-800 text-xs font-medium px-2 py-1 rounded">
                        {{ match($property->property_type) {
                            'single_house' => '🏠 Single House',
                            'apartment' => '🏢 Apartment',
                            'commercial' => '🏭 Commercial',
                            'mixed_use' => '🏬 Mixed Use',
                            default => ucfirst(str_replace('_', ' ', $property->property_type))
                        } }}
                    </span>
                </div>
                
                <!-- Quick Facts - Handle both properties with and without units -->
                <div class="flex flex-wrap gap-2 my-3">
                    @if($property->units->count() > 0)
                        <!-- Property has units - show unit information -->
                        <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                            <i class="fas fa-building text-orange-500 mr-1"></i> 
                            {{ $property->units->count() }} unit{{ $property->units->count() > 1 ? 's' : '' }}
                        </span>
                        @if($property->vacantUnits->count() > 0)
                            <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">
                                <i class="fas fa-check-circle mr-1"></i>
                                {{ $property->vacantUnits->count() }} available
                            </span>
                        @else
                            <span class="text-sm bg-gray-100 text-gray-600 px-2 py-1 rounded">
                                <i class="fas fa-times-circle mr-1"></i>
                                Fully occupied
                            </span>
                        @endif
                        
                        <!-- Show bedroom/bathroom range for residential properties with units -->
                        @if($property->property_type !== 'commercial')
                            @php
                                $unitBedrooms = $property->units->pluck('bedrooms')->filter();
                                $unitBathrooms = $property->units->pluck('bathrooms')->filter();
                                $minBeds = $unitBedrooms->min();
                                $maxBeds = $unitBedrooms->max();
                                $minBaths = $unitBathrooms->min();
                                $maxBaths = $unitBathrooms->max();
                            @endphp
                            @if($minBeds && $maxBeds)
                                <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                                    <i class="fas fa-bed text-orange-500 mr-1"></i> 
                                    @if($minBeds == $maxBeds)
                                        {{ $minBeds }} bed{{ $minBeds > 1 ? 's' : '' }}
                                    @else
                                        {{ $minBeds }}-{{ $maxBeds }} beds
                                    @endif
                                </span>
                            @endif
                            @if($minBaths && $maxBaths)
                                <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                                    <i class="fas fa-bath text-orange-500 mr-1"></i> 
                                    @if($minBaths == $maxBaths)
                                        {{ $minBaths }} bath{{ $minBaths > 1 ? 's' : '' }}
                                    @else
                                        {{ $minBaths }}-{{ $maxBaths }} baths
                                    @endif
                                </span>
                            @endif
                        @endif
                    @else
                        <!-- Property without units - show property-level info -->
                        @if($property->bedrooms)
                            <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                                <i class="fas fa-bed text-orange-500 mr-1"></i> 
                                {{ $property->bedrooms }} bed{{ $property->bedrooms > 1 ? 's' : '' }}
                            </span>
                        @endif
                        @if($property->bathrooms)
                            <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                                <i class="fas fa-bath text-orange-500 mr-1"></i> 
                                {{ $property->bathrooms }} bath{{ $property->bathrooms > 1 ? 's' : '' }}
                            </span>
                        @endif
                        @if($property->square_footage)
                            <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                                <i class="fas fa-ruler-combined text-orange-500 mr-1"></i> 
                                {{ number_format($property->square_footage) }} sqft
                            </span>
                        @endif
                    @endif
                </div>
                
                <!-- Amenities preview (first 3) -->
                @if($property->amenities && count($property->amenities) > 0)
                    <div class="mb-3">
                        <div class="flex flex-wrap gap-1">
                            @foreach(array_slice($property->amenities, 0, 3) as $amenity)
                                <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">
                                    {{ ucfirst($amenity) }}
                                </span>
                            @endforeach
                            @if(count($property->amenities) > 3)
                                <span class="text-xs text-gray-500 flex items-center">
                                    +{{ count($property->amenities) - 3 }} more
                                </span>
                            @endif
                        </div>
                    </div>
                @endif
                
                <!-- Price and CTA -->
                <div class="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
                    <div>
                        @if($property->units->count() > 0)
                            <!-- Show price range for properties with units -->
                            @php
                                $unitRents = $property->units->pluck('rent_amount')->filter();
                                $minRent = $unitRents->min();
                                $maxRent = $unitRents->max();
                            @endphp
                            @if($minRent && $maxRent)
                                @if($minRent == $maxRent)
                                    <span class="text-xl font-bold text-orange-600">
                                        UGX {{ number_format($minRent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                                    </span>
                                @else
                                    <div class="flex flex-col">
                                        <span class="text-xs text-gray-500 uppercase tracking-wide">Starting from</span>
                                        <span class="text-xl font-bold text-orange-600">
                                            UGX {{ number_format($minRent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                                        </span>
                                    </div>
                                @endif
                            @else
                                <span class="text-xl font-bold text-orange-600">
                                    UGX {{ number_format($property->monthly_rent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                                </span>
                            @endif
                        @else
                            <!-- Show property-level rent -->
                            <span class="text-xl font-bold text-orange-600">
                                UGX {{ number_format($property->monthly_rent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                            </span>
                        @endif
                    </div>
                    <a href="{{ route('properties.show', $property) }}" 
                       class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors inline-flex items-center gap-1">
                        View Details
                        <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- View All Button -->
    <div class="text-center mt-12">
        <a href="{{ route('properties.index') }}" 
           class="inline-flex items-center gap-2 bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-md hover:shadow-lg">
            View All Properties
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
</section>
<!-- Why Choose Rentor Section -->


<!-- Team & Culture Section -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-6">Meet the Rentor Team</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-8"></div>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                We’re a small but passionate group working hard to bring fresh ideas to property management. Different backgrounds, one goal: make renting easier for everyone.
            </p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-r from-orange-500 to-pink-600 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-user-tie text-white text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-gray-900 mb-2">Founders</h4>
                <p class="text-gray-600 text-sm">Driven entrepreneurs shaping Rentor’s vision from scratch</p>
            </div>
            
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-r from-pink-600 to-purple-700 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-code text-white text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-gray-900 mb-2">Developers</h4>
                <p class="text-gray-600 text-sm">Building the tools that make property management simple</p>
            </div>
            
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-r from-purple-700 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-building text-white text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-gray-900 mb-2">Property Specialists</h4>
                <p class="text-gray-600 text-sm">Bringing rental market know-how to guide our features</p>
            </div>
            
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-r from-orange-500 to-purple-700 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-heart text-white text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-gray-900 mb-2">Customer Care</h4>
                <p class="text-gray-600 text-sm">Real people ready to help whenever you need us</p>
            </div>
        </div>
    </div>
</section>
@endsection