@extends('layouts.site')

@section('content')

<!-- Hero Section -->
<section class="relative h-auto md:h-[500px] 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 -->
        <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>

        <!-- Right Image - Dashboard Preview -->
        <div class="w-full md:w-1/2 h-64 md:h-full relative mt-8 md:mt-0">
            <img src="{{ asset('images/dashboard-preview.png') }}" alt="Rentor Dashboard" 
                 class="absolute bottom-0 w-full h-full object-contain rounded-lg md:rounded-none drop-shadow-2xl">
        </div>
    </div>

    <!-- Floating Particles -->
    <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 -->
<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>

<!-- ══════════════════════════════════════════════════════════
     JOIN AS — Role Selection Section
     ══════════════════════════════════════════════════════════ -->
<section id="join-as" class="py-20 bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">

    <!-- Subtle grid texture -->
    <div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 40px 40px;"></div>

    <!-- Glow accents -->
    <div class="absolute -top-32 -left-32 w-96 h-96 bg-orange-500 rounded-full blur-3xl opacity-10 pointer-events-none"></div>
    <div class="absolute -bottom-32 -right-32 w-96 h-96 bg-pink-600 rounded-full blur-3xl opacity-10 pointer-events-none"></div>

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

        <!-- Header -->
        <div class="text-center mb-14">
            <span class="inline-block bg-orange-500/10 text-orange-400 text-xs font-semibold tracking-widest uppercase px-4 py-1.5 rounded-full border border-orange-500/20 mb-4">
                Get Started Free
            </span>
            <h2 class="text-4xl md:text-5xl font-extrabold text-white mb-4 leading-tight">
                How will you use <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-pink-500">Rentor?</span>
            </h2>
            <p class="text-gray-400 text-lg max-w-xl mx-auto">
                Choose your role to get started. Each account is tailored to exactly what you need.
            </p>
        </div>

        <!-- Role Cards -->
        <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">

            <!-- ── Landlord Card ── -->
            <div class="role-card group relative rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 cursor-pointer transition-all duration-300 hover:border-orange-500/50 hover:bg-white/8 hover:shadow-2xl hover:shadow-orange-500/10 hover:-translate-y-1"
                 onclick="selectRole('landlord')">

                <!-- Selected ring (hidden by default) -->
                <div class="role-ring absolute inset-0 rounded-2xl border-2 border-orange-500 opacity-0 transition-opacity duration-200 pointer-events-none" id="ring-landlord"></div>

                <!-- Icon -->
                <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <i class="fas fa-home text-white text-2xl"></i>
                </div>

                <!-- Badge -->
                <span class="inline-block text-xs font-bold tracking-wider text-orange-400 uppercase bg-orange-500/10 border border-orange-500/20 px-3 py-1 rounded-full mb-3">
                    Property Owner / Landlord
                </span>

                <h3 class="text-2xl font-bold text-white mb-3">I own properties</h3>
                <p class="text-gray-400 leading-relaxed mb-6">
                    List your properties, add units, manage tenants directly, track rent, and monitor your portfolio — all in one place.
                </p>

                <!-- Feature list -->
                <ul class="space-y-2 mb-8">
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-orange-400 text-xs flex-shrink-0"></i>
                        Add unlimited properties & units
                    </li>
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-orange-400 text-xs flex-shrink-0"></i>
                        Manage tenants & leases
                    </li>
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-orange-400 text-xs flex-shrink-0"></i>
                        Track payments & finances
                    </li>
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-orange-400 text-xs flex-shrink-0"></i>
                        Public listing on Rentor marketplace
                    </li>
                </ul>

                <!-- CTA -->
                <a href="{{ route('register') }}?role=landlord"
                   class="block w-full text-center py-3.5 rounded-xl bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold text-base shadow-lg shadow-orange-500/25 hover:from-orange-600 hover:to-orange-700 transition-all duration-200 group-hover:shadow-orange-500/40">
                    Register as Landlord
                    <i class="fas fa-arrow-right ml-2 text-sm"></i>
                </a>
            </div>

            <!-- ── Manager Card ── -->
            <div class="role-card group relative rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 cursor-pointer transition-all duration-300 hover:border-pink-500/50 hover:bg-white/8 hover:shadow-2xl hover:shadow-pink-500/10 hover:-translate-y-1"
                 onclick="selectRole('manager')">

                <!-- Selected ring -->
                <div class="role-ring absolute inset-0 rounded-2xl border-2 border-pink-500 opacity-0 transition-opacity duration-200 pointer-events-none" id="ring-manager"></div>

                <!-- Icon -->
                <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <i class="fas fa-briefcase text-white text-2xl"></i>
                </div>

                <!-- Badge -->
                <span class="inline-block text-xs font-bold tracking-wider text-pink-400 uppercase bg-pink-500/10 border border-pink-500/20 px-3 py-1 rounded-full mb-3">
                    Property Manager
                </span>

                <h3 class="text-2xl font-bold text-white mb-3">I manage properties</h3>
                <p class="text-gray-400 leading-relaxed mb-6">
                    Manage multiple properties on behalf of owners. Handle tenants, maintenance, payments, and reporting — all from one dashboard.
                </p>

                <!-- Feature list -->
                <ul class="space-y-2 mb-8">
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-pink-400 text-xs flex-shrink-0"></i>
                        Manage multiple owner portfolios
                    </li>
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-pink-400 text-xs flex-shrink-0"></i>
                        Full tenant & lease management
                    </li>
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-pink-400 text-xs flex-shrink-0"></i>
                        Maintenance request tracking
                    </li>
                    <li class="flex items-center gap-2 text-gray-300 text-sm">
                        <i class="fas fa-check-circle text-pink-400 text-xs flex-shrink-0"></i>
                        Generate owner & financial reports
                    </li>
                </ul>

                <!-- CTA -->
                <a href="{{ route('register') }}?role=manager"
                   class="block w-full text-center py-3.5 rounded-xl bg-gradient-to-r from-pink-500 to-purple-600 text-white font-semibold text-base shadow-lg shadow-pink-500/25 hover:from-pink-600 hover:to-purple-700 transition-all duration-200 group-hover:shadow-pink-500/40">
                    Register as Manager
                    <i class="fas fa-arrow-right ml-2 text-sm"></i>
                </a>
            </div>
        </div>

        <!-- Already have account -->
        {{-- <p class="text-center text-gray-500 mt-10 text-sm">
            Already have an account? 
            <a href="" class="text-orange-400 hover:text-orange-300 font-medium underline underline-offset-2 transition-colors">
                Sign in here
            </a>
        </p> --}}

        <!-- Comparison Table (collapsible) -->
        <div class="mt-12 max-w-4xl mx-auto">
            <button onclick="toggleComparison()" id="compare-btn"
                class="flex items-center gap-2 mx-auto text-gray-400 hover:text-white text-sm font-medium transition-colors">
                <i class="fas fa-table text-xs"></i>
                Compare roles side by side
                <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="compare-chevron"></i>
            </button>

            <div id="comparison-table" class="hidden mt-6 rounded-2xl overflow-hidden border border-white/10">
                <table class="w-full text-sm text-left">
                    <thead>
                        <tr class="bg-white/5">
                            <th class="px-6 py-4 text-gray-400 font-semibold w-1/2">Feature</th>
                            <th class="px-6 py-4 text-orange-400 font-semibold text-center">
                                <i class="fas fa-home mr-1"></i> Landlord
                            </th>
                            <th class="px-6 py-4 text-pink-400 font-semibold text-center">
                                <i class="fas fa-briefcase mr-1"></i> Manager
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        @php
                        $rows = [
                            ['Add & own properties',          true,  false],
                            ['Manage properties for owners',  false, true],
                            ['Add & manage units',            true,  true],
                            ['Add & manage tenants',          true,  true],
                            ['Create lease agreements',       true,  true],
                            ['Track rent payments',           true,  true],
                            ['Handle maintenance requests',   true,  true],
                            ['Generate financial reports',    true,  true],
                            ['Multi-owner portfolio view',    false, true],
                            ['Public marketplace listing',    true,  true],
                            ['Featured property listing',     'Admin only', 'Admin only'],
                        ];
                        @endphp
                        @foreach($rows as $row)
                        <tr class="bg-white/[0.02] hover:bg-white/5 transition-colors">
                            <td class="px-6 py-3.5 text-gray-300">{{ $row[0] }}</td>
                            <td class="px-6 py-3.5 text-center">
                                @if($row[1] === true)
                                    <i class="fas fa-check text-green-400"></i>
                                @elseif($row[1] === false)
                                    <i class="fas fa-times text-gray-600"></i>
                                @else
                                    <span class="text-xs text-gray-500">{{ $row[1] }}</span>
                                @endif
                            </td>
                            <td class="px-6 py-3.5 text-center">
                                @if($row[2] === true)
                                    <i class="fas fa-check text-green-400"></i>
                                @elseif($row[2] === false)
                                    <i class="fas fa-times text-gray-600"></i>
                                @else
                                    <span class="text-xs text-gray-500">{{ $row[2] }}</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- Quick Setup Guide for New Users -->
<section class="py-16 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 md:text-4xl font-bold text-gray-900 mb-4">🚀 Get Started in 3 Simple Steps</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-6"></div>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Follow these steps to set up your property management system</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <div class="text-center group">
                <div class="relative">
                    <div class="w-24 h-24 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-user-plus text-white text-3xl"></i>
                    </div>
                    <div class="absolute -top-2 -right-2 w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-md">1</div>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">Create Your Account</h3>
                <p class="text-gray-600">Sign up as a Landlord or Property Manager and get instant access to your dashboard</p>
                <div class="mt-3 text-sm text-orange-600 font-medium">↓</div>
            </div>

            <div class="text-center group">
                <div class="relative">
                    <div class="w-24 h-24 bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-building text-white text-3xl"></i>
                    </div>
                    <div class="absolute -top-2 -right-2 w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-md">2</div>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">Add Properties & Units</h3>
                <p class="text-gray-600">List your properties, add units, set rent amounts, and upload images</p>
                <div class="mt-3 text-sm text-orange-600 font-medium">↓</div>
            </div>

            <div class="text-center group">
                <div class="relative">
                    <div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-users text-white text-3xl"></i>
                    </div>
                    <div class="absolute -top-2 -right-2 w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-md">3</div>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">Manage Tenants & Leases</h3>
                <p class="text-gray-600">Add tenants, create leases, track payments, and manage maintenance</p>
            </div>
        </div>

     <div class="mt-12 bg-gradient-to-r from-orange-50 to-pink-50 rounded-2xl p-6 md:p-8"> <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">📋 Detailed Setup Guide</h3> <div class="grid md:grid-cols-2 gap-6"> <div class="space-y-3"> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>1. Register Account</strong> — Create your account and login to the dashboard</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>2. Add Properties</strong> — Navigate to Property Management → Properties → Create New</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>3. Create Units</strong> — For multi-unit properties, add units under each property</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>4. Add Tenants</strong> — Go to Tenant Management → Tenants → Add New Tenant</span> </div> </div> <div class="space-y-3"> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>5. Create Leases</strong> — <span class="text-blue-600 font-medium">Auto-created automatically</span> when you assign a tenant to a unit with start/end dates. Bulk actions supported (select/deselect all items).</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>6. Add Rent</strong> — Go to <strong>Rent Management → Add Rent</strong> to record monthly rent amounts for each active lease.</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>7. Track Payments</strong> — Record rent payments and monitor outstanding balances</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>8. Manage Maintenance</strong> — Handle maintenance requests from tenants</span> </div> <div class="flex items-start space-x-3"> <i class="fas fa-check-circle text-green-500 mt-1"></i> <span class="text-gray-700"><strong>9. Generate Reports</strong> — Access financial reports and analytics</span> </div> </div> </div> </div>
    </div>
</section>

<!-- System Dashboard Preview Section -->
<section class="py-16 bg-gray-50">
    <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 md:text-4xl font-bold text-gray-900 mb-4">📊 Powerful Dashboard at Your Fingertips</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-6"></div>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to manage your properties from one central dashboard</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <div class="bg-white rounded-xl shadow-md p-6 text-center hover:shadow-lg transition">
                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-building text-orange-600 text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800">Property Management</h3>
                <p class="text-sm text-gray-600 mt-2">Manage properties, units, and occupancy rates</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 text-center hover:shadow-lg transition">
                <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-users text-pink-600 text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800">Tenant Management</h3>
                <p class="text-sm text-gray-600 mt-2">Track tenants, leases, and payment history</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 text-center hover:shadow-lg transition">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-chart-line text-purple-600 text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800">Financial Reports</h3>
                <p class="text-sm text-gray-600 mt-2">Income, expenses, and profit analysis</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 text-center hover:shadow-lg transition">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-tools text-green-600 text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800">Maintenance</h3>
                <p class="text-sm text-gray-600 mt-2">Track and manage maintenance requests</p>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200">
            <div class="bg-gradient-to-r from-orange-500 to-pink-600 px-6 py-3">
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                    <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                    <span class="text-white text-sm ml-2">Rentor Dashboard Preview</span>
                </div>
            </div>
            <div class="p-2 bg-gray-100">
                <img src="{{ asset('images/dashboard-full.png') }}" alt="Rentor Dashboard Full View" 
                     class="w-full rounded-lg shadow-md"
                     onerror="this.src='https://via.placeholder.com/1200x600/f97316/ffffff?text=Rentor+Dashboard+Preview'">
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-16 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 md:text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-6"></div>
            <p class="text-lg 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-gray-50 p-8 rounded-2xl shadow hover:shadow-lg transition group">
                <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-pink-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <i class="fas fa-file-signature text-white text-2xl"></i>
                </div>
                <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-gray-50 p-8 rounded-2xl shadow hover:shadow-lg transition group">
                <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <i class="fas fa-credit-card text-white text-2xl"></i>
                </div>
                <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>
            </div>
            <div class="bg-gray-50 p-8 rounded-2xl shadow hover:shadow-lg transition group">
                <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-orange-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <i class="fas fa-tools text-white text-2xl"></i>
                </div>
                <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-gray-50 p-8 rounded-2xl shadow hover:shadow-lg transition group">
                <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-pink-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <i class="fas fa-chart-line text-white text-2xl"></i>
                </div>
                <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>

<!-- Navigation Menu Overview -->
<section class="py-16 bg-gray-50">
    <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 md:text-4xl font-bold text-gray-900 mb-4">🗺️ Complete System Navigation</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-6"></div>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything organized for easy access</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white rounded-xl shadow-md p-5">
                <div class="flex items-center space-x-3 mb-3">
                    <i class="fas fa-tachometer-alt text-orange-500 text-xl"></i>
                    <h3 class="font-bold text-gray-800">Dashboard</h3>
                </div>
                <p class="text-sm text-gray-600">Quick overview of your property management metrics</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-5">
                <div class="flex items-center space-x-3 mb-3">
                    <i class="fas fa-users text-blue-500 text-xl"></i>
                    <h3 class="font-bold text-gray-800">Users & Tenants</h3>
                </div>
                <p class="text-sm text-gray-600">Manage system users, tenants, and lease agreements</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-5">
                <div class="flex items-center space-x-3 mb-3">
                    <i class="fas fa-building text-green-500 text-xl"></i>
                    <h3 class="font-bold text-gray-800">Property Management</h3>
                </div>
                <p class="text-sm text-gray-600">Properties, units, and maintenance requests</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-5">
                <div class="flex items-center space-x-3 mb-3">
                    <i class="fas fa-chart-pie text-purple-500 text-xl"></i>
                    <h3 class="font-bold text-gray-800">Financial Management</h3>
                </div>
                <p class="text-sm text-gray-600">Expenses, invoices, and financial reports</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-5">
                <div class="flex items-center space-x-3 mb-3">
                    <i class="fas fa-credit-card text-yellow-500 text-xl"></i>
                    <h3 class="font-bold text-gray-800">Rent & Billing</h3>
                </div>
                <p class="text-sm text-gray-600">Rent tracking, payments, and billing management</p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-5">
                <div class="flex items-center space-x-3 mb-3">
                    <i class="fas fa-file-alt text-red-500 text-xl"></i>
                    <h3 class="font-bold text-gray-800">Reports</h3>
                </div>
                <p class="text-sm text-gray-600">Owner reports, rent collection, and expense analysis</p>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-16 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 class="bg-gray-50 rounded-xl p-6">
                <h4 class="font-semibold text-gray-900 mb-2">What's the difference between a Landlord and a Manager account?</h4>
                <p class="text-gray-600">A <strong>Landlord</strong> owns properties and manages them directly. A <strong>Manager</strong> manages properties on behalf of one or more owners — ideal for property management companies.</p>
            </div>
            <div class="bg-gray-50 rounded-xl p-6">
                <h4 class="font-semibold text-gray-900 mb-2">How do I get started with Rentor?</h4>
                <p class="text-gray-600">Simply register as a Landlord or Manager above, then follow our 3-step setup guide to add properties, units, and tenants.</p>
            </div>
            <div class="bg-gray-50 rounded-xl p-6">
                <h4 class="font-semibold text-gray-900 mb-2">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 class="bg-gray-50 rounded-xl p-6">
                <h4 class="font-semibold text-gray-900 mb-2">Can tenants pay rent through Rentor?</h4>
                <p class="text-gray-600">Not yet, but this feature is coming soon!</p>
            </div>
            <div class="bg-gray-50 rounded-xl p-6">
                <h4 class="font-semibold text-gray-900 mb-2">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>
    </div>
</section>

<!-- Beta Program CTA -->
<section class="relative py-20 text-white text-center bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 overflow-hidden">
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1545315003-c5ad6226c272?w=800&auto=format&fit=crop" 
             alt="Beta Program Background" 
             class="w-full h-full object-cover opacity-20">
    </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-8 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>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('beta') }}?role=property_owner" 
                   class="inline-block px-7 py-4 rounded-xl bg-white text-orange-600 font-bold text-base shadow-lg hover:bg-gray-100 transition">
                    <i class="fas fa-home mr-2"></i>Join as Landlord
                </a>
                <a href="{{ route('beta') }}?role=manager" 
                   class="inline-block px-7 py-4 rounded-xl bg-white/15 border border-white/30 text-white font-bold text-base shadow-lg hover:bg-white/25 transition backdrop-blur">
                    <i class="fas fa-briefcase mr-2"></i>Join as Manager
                </a>
            </div>
            <p class="mt-5 text-sm text-white/70">Limited spots available before official launch.</p>
        </div>
    </div>
</section>


<!-- Browse Properties CTA -->
<section class="py-16 bg-gradient-to-r from-orange-500 to-pink-600 text-white px-6 text-center">
    <h1 class="text-4xl 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-orange-600 font-semibold text-lg shadow hover:bg-gray-100 transition">
        Browse Properties
    </a>
</section>

<!-- Featured Properties -->
<section class="py-16 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">
        @forelse($properties as $property)
        <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-gray-100">
            <div class="relative h-48 overflow-hidden bg-gray-200">
                @php
                    $imageUrl = null;
                    if (!empty($property->images) && is_array($property->images) && count($property->images) > 0) {
                        $firstImage = ltrim($property->images[0], '/');
                        if (filter_var($firstImage, FILTER_VALIDATE_URL)) {
                            $imageUrl = $firstImage;
                        } else {
                            $imageUrl = asset('storage/' . $firstImage);
                        }
                    }
                    if (!$imageUrl) {
                        $imageUrl = asset('no-image.png');
                    }
                @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) }}'">
                @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
                <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' : 'bg-gray-500 text-white') }}">
                    {{ ucfirst(str_replace('_', ' ', $property->status)) }}
                </span>
            </div>
            <div class="p-4">
                <h3 class="text-lg font-bold text-gray-900 mb-1 truncate">{{ $property->name }}</h3>
                <p class="text-gray-600 text-sm mb-2">
                    <i class="fas fa-map-marker-alt text-orange-500 mr-1"></i>
                    {{ $property->address }}
                </p>
                <div class="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-xl font-bold text-orange-600">UGX {{ number_format($property->monthly_rent) }}</span>
                    <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">
                        View Details <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
            </div>
        </div>
        @empty
        <div class="col-span-3 text-center py-12">
            <p class="text-gray-500">No properties available at the moment.</p>
        </div>
        @endforelse
    </div>

    @if($properties->count() > 0)
    <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">
            View All Properties
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    @endif
</section>

<!-- Team Section -->
<section class="py-16 bg-gray-50">
    <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 md:text-4xl font-bold text-gray-900 mb-4">Meet the Rentor Team</h2>
            <div class="w-24 h-1 bg-gradient-to-r from-orange-500 to-pink-600 mx-auto mb-6"></div>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                We're a small but passionate group working hard to bring fresh ideas to property management.
            </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</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 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>

<script>
function selectRole(role) {
    // Visual highlight the selected card
    document.querySelectorAll('[id^="ring-"]').forEach(el => el.style.opacity = '0');
    const ring = document.getElementById('ring-' + role);
    if (ring) ring.style.opacity = '1';
}

function toggleComparison() {
    const table  = document.getElementById('comparison-table');
    const chev   = document.getElementById('compare-chevron');
    const isOpen = !table.classList.contains('hidden');
    table.classList.toggle('hidden', isOpen);
    chev.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
}
</script>

@endsection