<!-- Path: app/Views/home.view.php -->
<div class="bg-navy-950 text-white overflow-hidden relative">
    <div class="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80')] bg-cover bg-center"></div>
    <div class="absolute inset-0 bg-gradient-to-r from-navy-950 to-transparent"></div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-20 lg:py-32">
        <div class="md:w-2/3">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-alert/20 text-red-400 font-semibold text-sm mb-6 border border-red-500/30">
                <span class="w-2 h-2 rounded-full bg-alert animate-pulse"></span> Rapid Response Active
            </div>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-tight">
                When Seconds Count, <span class="text-brandBlue-500">We Are Here.</span>
            </h1>
            <p class="text-lg md:text-xl text-slate-300 mb-10 max-w-2xl leading-relaxed">
                The Emergency Response Coordination System connects you instantly with the nearest police, medical, or fire responders based on your exact location.
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="{{APP_URL}}/emergency/report" class="px-8 py-4 bg-alert hover:bg-red-600 text-white font-bold rounded-lg shadow-lg shadow-red-500/30 transition-all transform hover:-translate-y-1 text-center flex items-center justify-center gap-2 text-lg pulse-animation">
                    <i class="fas fa-exclamation-triangle"></i> Report Emergency Now
                </a>
                <a href="{{APP_URL}}/about" class="px-8 py-4 bg-navy-800 hover:bg-navy-700 text-white font-semibold rounded-lg shadow-md transition-all text-center">
                    Learn How It Works
                </a>
            </div>
        </div>
    </div>
</div>

<div class="py-20 bg-slate-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-3xl font-bold text-navy-900 mb-4">Smart Dispatch Technology</h2>
            <p class="text-slate-600 max-w-2xl mx-auto">Our platform uses intelligent routing and live GPS tracking to ensure help arrives faster than traditional phone calls.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Feature 1 -->
            <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 bg-brandBlue-100 text-brandBlue-600 rounded-lg flex items-center justify-center text-2xl mb-6">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <h3 class="text-xl font-bold text-navy-900 mb-3">Instant Geolocation</h3>
                <p class="text-slate-600 leading-relaxed">No need to explain where you are. We instantly capture your precise GPS coordinates and guide responders straight to you.</p>
            </div>

            <!-- Feature 2 -->
            <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 bg-red-100 text-alert rounded-lg flex items-center justify-center text-2xl mb-6">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3 class="text-xl font-bold text-navy-900 mb-3">Nearest Responder</h3>
                <p class="text-slate-600 leading-relaxed">Our algorithm calculates distance in real-time, pinging only the active units closest to your emergency to minimize travel time.</p>
            </div>

            <!-- Feature 3 -->
            <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center text-2xl mb-6">
                    <i class="fas fa-comments"></i>
                </div>
                <h3 class="text-xl font-bold text-navy-900 mb-3">Live Communication</h3>
                <p class="text-slate-600 leading-relaxed">Once dispatched, open a direct, secure chat line with the responder en route to provide critical updates or photos.</p>
            </div>
        </div>
    </div>
</div>