@extends('layouts.landing')

@section('content')
@if(isset($sliders) && $sliders->count() > 0)
<section class="relative overflow-hidden" x-data="{ current: 0, total: {{ $sliders->count() }} }" x-init="setInterval(() => current = (current + 1) % total, 6000)">
    @foreach($sliders as $i => $slide)
        <div x-show="current === {{ $i }}" x-transition.opacity.duration.700ms class="relative min-h-[460px]">
            <img src="{{ $slide->image_url }}" alt="{{ $slide->title }}" class="absolute inset-0 h-full w-full object-cover" onerror="this.onerror=null; this.src='{{ \App\Helpers\ImageHelper::placeholder(1920, 700) }}';">
            <div class="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-black/20"></div>
            <div class="relative mx-auto flex min-h-[460px] max-w-7xl items-center px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl text-white">
                    <h2 class="mb-4 overflow-hidden text-ellipsis whitespace-nowrap text-3xl font-extrabold leading-tight md:text-5xl">{{ $slide->title }}</h2>
                    @if($slide->subtitle)
                        <p class="mb-8 text-lg text-red-100 md:text-xl">{{ $slide->subtitle }}</p>
                    @endif
                    @if($slide->button_text && $slide->button_url)
                        <a href="{{ $slide->button_url }}" class="inline-flex items-center rounded-xl bg-red-600 px-7 py-3.5 text-base font-bold text-white shadow-lg transition hover:bg-red-700">
                            {{ $slide->button_text }}
                        </a>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
    <div class="absolute bottom-5 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2">
        @foreach($sliders as $i => $slide)
            <button @click="current = {{ $i }}" class="h-2.5 w-7 rounded-full transition" :class="current === {{ $i }} ? 'bg-red-500' : 'bg-white/40'"></button>
        @endforeach
    </div>
</section>
@endif

@if(!isset($sliders) || $sliders->count() === 0)
<!-- Hero Section -->
<div class="relative bg-gradient-to-br from-red-700 via-red-800 to-stone-950 text-white overflow-hidden">
    <!-- Animated Background Pattern -->
    <div class="absolute inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"1\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>
    
    <!-- Gradient Overlay -->
    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
        <div class="text-center mb-12 max-w-4xl mx-auto">
            <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6 leading-tight tracking-tight">
                {{ __('messages.real_estate_management_made_easy') ?? 'Real Estate Management Made Easy' }}
            </h1>
            <p class="text-lg md:text-xl lg:text-2xl text-red-100 mb-10 max-w-3xl mx-auto leading-relaxed">
                {{ __('messages.manage_properties_tenants_leases_payments') ?? 'Manage your properties, tenants, leases, and payments all in one powerful platform. Built for modern real estate companies.' }}
            </p>
            
            <!-- Primary CTA -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
                <a href="{{ route('properties.index') }}" class="group inline-flex items-center justify-center px-8 py-4 bg-white text-red-700 rounded-xl font-bold text-lg shadow-2xl hover:shadow-3xl hover:scale-105 transform transition-all duration-300 hover:bg-red-50">
                    <svg class="w-5 h-5 mr-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    {{ __('messages.browse_properties') ?? 'Browse Properties' }}
                </a>
                <a href="{{ route('register') }}" class="inline-flex items-center justify-center px-8 py-4 bg-red-600/90 backdrop-blur-sm text-white rounded-xl font-semibold text-lg border-2 border-white/30 hover:bg-red-500 hover:border-white/50 transition-all duration-300">
                    {{ __('messages.get_started') }}
                </a>
            </div>
            
            <p class="text-sm md:text-base text-red-200">
                {{ __('messages.no_credit_card_required') ?? 'No credit card required • 14-day free trial' }}
            </p>
        </div>

    </div>
</div>
@endif


<!-- Quick Search Section -->
<div class="bg-gradient-to-r from-gray-50 to-blue-50 py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-xl shadow-lg p-6">
            <form action="{{ route('properties.index') }}" method="GET" class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <input type="text" 
                           name="location"
                           value="{{ request('location') }}"
                           placeholder="{{ __('messages.search_by_location') ?? 'Search by location, city, or address' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div class="md:w-48">
                    <select name="type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('messages.all_types') ?? 'All Types' }}</option>
                        <option value="house" {{ request('type') === 'house' ? 'selected' : '' }}>{{ __('messages.house') ?? 'House' }}</option>
                        <option value="apartment" {{ request('type') === 'apartment' ? 'selected' : '' }}>{{ __('messages.apartment') ?? 'Apartment' }}</option>
                        <option value="plot" {{ request('type') === 'plot' ? 'selected' : '' }}>{{ __('messages.plot') ?? 'Plot' }}</option>
                        <option value="commercial" {{ request('type') === 'commercial' ? 'selected' : '' }}>{{ __('messages.commercial') ?? 'Commercial' }}</option>
                    </select>
                </div>
                <button type="submit" 
                        class="bg-brand-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-brand-700 transition duration-300 flex items-center justify-center shadow-sm hover:shadow-md">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    {{ __('messages.search') ?? 'Search' }}
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Featured Properties Section -->
@if($featuredProperties->count() > 0)
<div class="bg-gradient-to-b from-white to-gray-50 py-20 md:py-28">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 md:mb-16">
            <div class="inline-flex items-center gap-2 bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-semibold mb-4">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                </svg>
                {{ __('messages.featured') }}
            </div>
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
                {{ __('messages.featured_properties') ?? 'Featured Properties' }}
            </h2>
            <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
                {{ __('messages.discover_our_featured_listings') ?? 'Discover our handpicked selection of premium properties' }}
            </p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
            @foreach($featuredProperties as $property)
                <x-property-card :property="$property" />
            @endforeach
        </div>
        @if($featuredProperties->count() >= 6)
        <div class="text-center mt-12">
            <a href="{{ route('properties.index') }}" class="inline-flex items-center gap-2 bg-red-600 text-white px-8 py-4 rounded-xl font-semibold hover:bg-red-700 hover:shadow-xl transform hover:scale-105 transition-all duration-300">
                {{ __('messages.view_all_properties') }}
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </a>
        </div>
        @endif
    </div>
</div>
@endif

<!-- How It Works Section -->
<div class="bg-white py-20">
    <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-4">
                {{ __('messages.how_it_works') ?? 'How It Works' }}
            </h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                {{ __('messages.get_started_in_minutes') ?? 'Get started in minutes with our simple 4-step process' }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <span class="text-3xl font-bold text-blue-600">1</span>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ __('messages.sign_up') ?? 'Sign Up' }}</h3>
                <p class="text-gray-600">{{ __('messages.create_account') ?? 'Create your free account in less than 2 minutes' }}</p>
            </div>
            <div class="text-center">
                <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <span class="text-3xl font-bold text-green-600">2</span>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ __('messages.add_properties') ?? 'Add Properties' }}</h3>
                <p class="text-gray-600">{{ __('messages.list_properties') ?? 'List and manage your properties with photos and details' }}</p>
            </div>
            <div class="text-center">
                <div class="bg-yellow-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <span class="text-3xl font-bold text-yellow-600">3</span>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ __('messages.manage_tenants') ?? 'Manage Tenants' }}</h3>
                <p class="text-gray-600">{{ __('messages.track_leases') ?? 'Track leases, tenants, and rental agreements' }}</p>
            </div>
            <div class="text-center">
                <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <span class="text-3xl font-bold text-purple-600">4</span>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ __('messages.track_payments') ?? 'Track Payments' }}</h3>
                <p class="text-gray-600">{{ __('messages.monitor_revenue') ?? 'Monitor payments and generate reports automatically' }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Property Statistics Section -->
<div class="bg-white py-16 md:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 md:mb-16">
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
                {{ __('messages.property_statistics') ?? 'Property Statistics' }}
            </h2>
            <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
                {{ __('messages.explore_our_property_portfolio') ?? 'Explore our extensive property portfolio' }}
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-5 md:gap-6">
            <div class="group bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 text-center border border-blue-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300" x-data="{ target: {{ (int) $totalPublicProperties }}, value: 0 }" x-init="let step = 0; const totalSteps = 40; const increment = target / totalSteps; const timer = setInterval(() => { step++; value = step >= totalSteps ? target : Math.round(increment * step); if (step >= totalSteps) clearInterval(timer); }, 25)">
                <div class="inline-flex items-center justify-center w-14 h-14 bg-blue-100 rounded-2xl mb-3 group-hover:bg-blue-200 group-hover:scale-110 transition-all duration-300">
                    <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                </div>
                <div class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-1" x-text="Math.round(value).toLocaleString()"></div>
                <div class="text-gray-600 font-medium">{{ __('messages.total_properties') ?? 'Total Properties' }}</div>
            </div>
            <div class="group bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6 text-center border border-green-100 hover:border-green-200 hover:shadow-xl transition-all duration-300" x-data="{ target: {{ (int) $availableProperties }}, value: 0 }" x-init="let step = 0; const totalSteps = 40; const increment = target / totalSteps; const timer = setInterval(() => { step++; value = step >= totalSteps ? target : Math.round(increment * step); if (step >= totalSteps) clearInterval(timer); }, 25)">
                <div class="inline-flex items-center justify-center w-14 h-14 bg-green-100 rounded-2xl mb-3 group-hover:bg-green-200 group-hover:scale-110 transition-all duration-300">
                    <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-1" x-text="Math.round(value).toLocaleString()"></div>
                <div class="text-gray-600 font-medium">{{ __('messages.available_properties') ?? 'Available Properties' }}</div>
            </div>
            <div class="group bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl p-6 text-center border border-orange-100 hover:border-orange-200 hover:shadow-xl transition-all duration-300" x-data="{ target: {{ (int) $rentedProperties }}, value: 0 }" x-init="let step = 0; const totalSteps = 40; const increment = target / totalSteps; const timer = setInterval(() => { step++; value = step >= totalSteps ? target : Math.round(increment * step); if (step >= totalSteps) clearInterval(timer); }, 25)">
                <div class="inline-flex items-center justify-center w-14 h-14 bg-orange-100 rounded-2xl mb-3 group-hover:bg-orange-200 group-hover:scale-110 transition-all duration-300">
                    <svg class="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <div class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-1" x-text="Math.round(value).toLocaleString()"></div>
                <div class="text-gray-600 font-medium">{{ __('messages.rented_properties') ?? 'Rented Properties' }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Testimonials Section -->
<div class="bg-white py-12 md:py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10 md:mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
                {{ __('messages.what_our_customers_say') ?? 'What Our Customers Say' }}
            </h2>
            <p class="text-lg md:text-xl text-gray-600">
                {{ __('messages.trusted_by_companies') ?? 'Trusted by real estate companies across Tanzania' }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </div>
                </div>
                <p class="text-gray-700 mb-5 italic">"This platform has transformed how we manage our properties. The ease of use and comprehensive features make it a must-have for any real estate company."</p>
                <div class="flex items-center">
                    <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                        <span class="text-blue-600 font-bold">JD</span>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">John Doe</p>
                        <p class="text-sm text-gray-600">CEO, Dar Properties</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </div>
                </div>
                <p class="text-gray-700 mb-5 italic">"The payment tracking and reporting features have saved us hours of work each week. Highly recommend!"</p>
                <div class="flex items-center">
                    <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                        <span class="text-green-600 font-bold">SM</span>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">Sarah Mwangi</p>
                        <p class="text-sm text-gray-600">Property Manager, Arusha Realty</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </div>
                </div>
                <p class="text-gray-700 mb-5 italic">"The multi-tenant architecture ensures our data is secure and isolated. Perfect for our growing business needs."</p>
                <div class="flex items-center">
                    <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                        <span class="text-purple-600 font-bold">AK</span>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">Ahmed Kassim</p>
                        <p class="text-sm text-gray-600">Director, Zanzibar Properties</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pricing Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <div class="text-center mb-16">
        <h2 class="text-4xl font-bold text-gray-900 mb-4">
            {{ __('messages.choose_your_plan') ?? 'Choose Your Plan' }}
        </h2>
        <p class="text-xl text-gray-600">
            {{ __('messages.flexible_pricing') ?? 'Flexible pricing plans to suit your business needs' }}
        </p>
    </div>
    @php
        $subscriptionPlans = $subscriptionPlans ?? collect();
        $planCount = $subscriptionPlans->count();
        $gridCols = $planCount >= 4 ? 'md:grid-cols-4' : 'md:grid-cols-3';
    @endphp

    @if($planCount > 0)
        <div class="grid grid-cols-1 {{ $gridCols }} gap-8">
            @foreach($subscriptionPlans as $plan)
                @php
                    $isPopular = $loop->iteration === 2 && $planCount >= 2;
                    $features = is_array($plan->features) ? $plan->features : [];
                    $featureItems = array_slice($features, 0, 2);

                    $propertiesLimit = $plan->properties_limit === null ? '∞' : $plan->properties_limit;
                    $usersLimit = $plan->users_limit === null ? '∞' : $plan->users_limit;

                    $interval = $plan->interval ?? 'monthly';
                    $intervalUnit = $interval === 'yearly' ? 'year' : 'month';
                    $priceValue = number_format((float) $plan->price, 0);
                    $priceLabel = $priceValue . ' ' . $plan->currency . '/' . $intervalUnit;

                    $listItems = array_merge(
                        ["Up to {$propertiesLimit} Properties", "Up to {$usersLimit} Users"],
                        $featureItems
                    );
                    $listItems = array_slice($listItems, 0, 4);
                @endphp

                <div class="{{ $isPopular
                    ? 'bg-gradient-to-br from-red-700 to-stone-900 text-white p-8 rounded-xl shadow-2xl border-2 border-red-500 transform scale-105'
                    : 'bg-white p-8 rounded-xl shadow-lg border-2 border-gray-200 hover:border-red-500 transition duration-300' }}">

                    @if($isPopular)
                        <div class="text-center mb-4">
                            <span class="bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full">
                                {{ __('messages.popular') ?? 'POPULAR' }}
                            </span>
                        </div>
                    @endif

                    <h3 class="{{ $isPopular ? 'text-2xl font-bold' : 'text-2xl font-bold text-gray-900' }} mb-2">
                        {{ $plan->name }}
                    </h3>

                    <div class="mb-6">
                        @if($plan->price === null)
                            <span class="{{ $isPopular ? 'text-4xl font-bold' : 'text-4xl font-bold text-gray-900' }}">Custom</span>
                        @else
                            <span class="{{ $isPopular ? 'text-4xl font-bold' : 'text-4xl font-bold text-gray-900' }}">
                                {{ $priceValue }}
                            </span>
                            <span class="{{ $isPopular ? 'text-red-200' : 'text-gray-600' }}">
                                {{ ' ' . $plan->currency . '/' . $intervalUnit }}
                            </span>
                        @endif
                    </div>

                    <ul class="space-y-3 mb-8">
                        @foreach($listItems as $item)
                            <li class="flex items-center {{ $isPopular ? '' : 'text-gray-600' }}">
                                <svg class="w-5 h-5 {{ $isPopular ? 'text-green-300' : 'text-green-500' }} mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                {{ $item }}
                            </li>
                        @endforeach
                    </ul>

                    <a href="{{ route('register') }}"
                       class="{{ $isPopular
                           ? 'block w-full text-center bg-white text-red-700 px-6 py-3 rounded-lg font-semibold hover:bg-red-50 transition'
                           : 'block w-full text-center bg-gray-200 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition' }}">
                        {{ __('messages.get_started') ?? 'Get Started' }}
                    </a>
                </div>
            @endforeach
        </div>
    @else
        <div class="rounded-2xl border border-gray-200 bg-white p-10 text-center">
            <p class="text-gray-600">No subscription plans are available right now.</p>
            <a href="{{ route('register') }}" class="mt-4 inline-flex items-center justify-center rounded-lg bg-red-600 px-6 py-3 text-white font-semibold hover:bg-red-700">
                {{ __('messages.get_started') ?? 'Get Started' }}
            </a>
        </div>
    @endif
</div>

<!-- CTA Section -->
<div class="bg-gradient-to-r from-red-700 to-stone-900 text-white py-10">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-3">
            {{ __('messages.ready_to_get_started') ?? 'Ready to Get Started?' }}
        </h2>
        <p class="text-lg md:text-xl text-red-100 mb-6">
            {{ __('messages.join_thousands_companies') ?? 'Join thousands of real estate companies already using our platform' }}
        </p>
        <a href="{{ route('register') }}" class="inline-block bg-white text-red-700 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-red-50 transition duration-300 shadow-lg hover:shadow-xl">
            {{ __('messages.start_free_trial') ?? 'Start Your Free Trial' }}
        </a>
    </div>
</div>
@endsection