@extends('layouts.app')

@section('title', 'Home')

@section('content')
{{-- Hero with Search - RoktoLagbe style --}}
<section class="hero-search">
    <div class="container">
        <div class="hero-logo">
            <i class="fas fa-heart-pulse"></i>
            <h1>AsthaLink</h1>
            <p>Trusted Emergency Network</p>
        </div>

        @if($activeSosRequests->isNotEmpty())
        <div class="live-requests">
            <div class="live-requests-header">
                <span class="live-requests-badge"><i class="fas fa-bell"></i> Act Now</span>
                <h3 class="live-requests-title">Someone Needs Your Help</h3>
                <p class="live-requests-subtitle">Emergency blood requests in your network</p>
            </div>
            <div class="live-requests-list">
                @foreach($activeSosRequests->take(3) as $sos)
                <a href="{{ route('sos.show', $sos) }}" class="request-card">
                    <span class="urgent-badge"><i class="fas fa-bolt"></i> Urgent</span>
                    <span class="request-card-blood">{{ $sos->user->blood_group ?? 'Blood' }} needed!</span>
                    <small class="request-card-location"><i class="fas fa-map-marker-alt"></i> {{ $sos->user->city ?? 'Location' }}</small>
                    <span class="request-card-cta">Respond <i class="fas fa-chevron-right"></i></span>
                </a>
                @endforeach
            </div>
            <a href="{{ route('sos.index') }}" class="live-requests-view-all">View All SOS Requests <i class="fas fa-arrow-right"></i></a>
        </div>
        @endif

        <div class="search-box search-box--compact">
            <h3><i class="fas fa-search"></i> I am looking for</h3>
            <form method="GET" action="{{ route('blood.index') }}" class="search-form">
                <div class="search-grid search-grid--compact">
                    <div class="search-field">
                        <label>Blood</label>
                        <select name="blood_group" class="form-select form-select--compact">
                            <option value="">All</option>
                            @foreach(\App\Models\User::BLOOD_GROUPS as $bg)
                                <option value="{{ $bg }}">{{ $bg }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="search-field">
                        <label>Status</label>
                        <select name="availability" class="form-select form-select--compact">
                            <option value="">All</option>
                            <option value="available">Ready</option>
                            <option value="not_available">Not Ready</option>
                        </select>
                    </div>
                    <div class="search-field">
                        <label>City</label>
                        <input type="text" name="city" class="form-input form-input--compact" placeholder="e.g. Delhi, Mumbai">
                    </div>
                    <div class="search-field search-submit">
                        <button type="submit" class="btn btn-primary btn-sm btn-block"><i class="fas fa-search"></i> Search</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

{{-- Inspirational Quote --}}
<section class="quote-section">
    <div class="container">
        <blockquote>
            "Saving one life is like saving the whole of humanity."
        </blockquote>
        <cite>— Quran 5:32</cite>
    </div>
</section>

{{-- Latest Registered Donors - Modern cards, scroll, 2 per row, max 10 --}}
<section class="donors-section">
    <div class="container">
        <div class="donors-section-header">
            <div class="donors-section-title-wrap">
                <span class="donors-section-badge"><i class="fas fa-heart-pulse"></i> Fresh Heroes</span>
                <h2 class="donors-section-title">Our Newest Life Savers</h2>
                <p class="donors-section-subtitle">Recently joined donors ready to help in emergencies</p>
            </div>
            <a href="{{ route('blood.index') }}" class="btn btn-primary btn-sm donors-view-all">
                <span>Explore All Donors</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="latest-donors-scroll">
            @forelse($latestDonors as $donor)
            <a href="{{ route('blood.show', $donor) }}" class="donor-card-latest">
                <div class="donor-card-latest-header">
                    <img src="{{ $donor->profile_photo ? asset('storage/'.$donor->profile_photo) : 'https://ui-avatars.com/api/?name='.urlencode($donor->name).'&size=64&background=c41e3a&color=fff' }}" class="donor-card-latest-avatar" alt="">
                    <span class="blood-badge-inline"><i class="fas fa-droplet"></i> {{ $donor->blood_group }}</span>
                </div>
                <h3>{{ $donor->name }}</h3>
                <p class="donor-card-latest-city"><i class="fas fa-map-marker-alt"></i> {{ $donor->city ?? 'N/A' }}</p>
                <span class="donor-status {{ $donor->availability_status === 'available' ? 'available' : 'unavailable' }}">
                    {{ $donor->availability_status === 'available' ? 'Ready' : 'Not Ready' }}
                </span>
                <span class="donor-card-latest-link">Full Biodata <i class="fas fa-chevron-right"></i></span>
            </a>
            @empty
            <p class="text-muted" style="padding:20px;text-align:center">No donors registered yet. Be the first!</p>
            @endforelse
        </div>
    </div>
</section>

{{-- Create Donor Profile CTA --}}
<section class="cta-section">
    <div class="container">
        <div class="cta-card">
            <h2><i class="fas fa-user-plus"></i> Create Your Donor Profile</h2>
            <p>Join the life-saving community. Register as a blood donor and help save lives in emergencies.</p>
            <a href="{{ route('register') }}" class="btn btn-primary btn-lg">Register as Donor</a>
        </div>
    </div>
</section>

{{-- Features Section --}}
<section class="features-section">
    <div class="container">
        <h2 class="section-heading">AsthaLink Features</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
                <h3>Data Security</h3>
                <p>Your phone number and email are not displayed publicly. Contact is shared only when you connect.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-toggle-off"></i></div>
                <h3>Not Ready Mode</h3>
                <p>Unable to donate temporarily? Use "Not Ready" option to pause your availability without losing your profile.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-network-wired"></i></div>
                <h3>Emergency Network</h3>
                <p>Connect with verified donors nearby. SOS alerts notify donors in your area during emergencies.</p>
            </div>
        </div>
    </div>
</section>

{{-- Common Myths --}}
<section class="myths-section">
    <div class="container">
        <h2 class="section-heading">Common Myths About Blood Donation</h2>
        <div class="myths-list">
            <div class="myth-item">
                <i class="fas fa-times-circle myth-wrong"></i>
                <span><strong>Blood donation is painful</strong> — Wrong. You only feel a slight pinch when the needle is inserted.</span>
            </div>
            <div class="myth-item">
                <i class="fas fa-times-circle myth-wrong"></i>
                <span><strong>Donating weakens your health</strong> — Wrong. Donation reduces heart disease risk and prevents iron overload.</span>
            </div>
            <div class="myth-item">
                <i class="fas fa-times-circle myth-wrong"></i>
                <span><strong>Diabetics cannot donate</strong> — Wrong. If your blood sugar is within acceptable range, you can donate.</span>
            </div>
            <div class="myth-item">
                <i class="fas fa-times-circle myth-wrong"></i>
                <span><strong>High BP prevents donation</strong> — Wrong. You can donate if BP is between 180 systolic and 100 diastolic.</span>
            </div>
            <div class="myth-item">
                <i class="fas fa-times-circle myth-wrong"></i>
                <span><strong>You may faint after donating</strong> — Wrong. You won't feel unwell if you're healthy and hydrated.</span>
            </div>
        </div>
    </div>
</section>

@auth
{{-- Quick Actions - Compact app grid --}}
<section class="cta-section">
    <div class="container">
        <div class="card" style="padding:12px">
            <h2 class="section-heading">Quick Actions</h2>
            <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
                <a href="{{ route('sos.index') }}" class="btn btn-primary btn-block" style="margin:0"><i class="fas fa-bell"></i> SOS</a>
                <a href="{{ route('blood.index') }}" class="btn btn-outline btn-block" style="margin:0"><i class="fas fa-droplet"></i> Donors</a>
                <a href="{{ route('ambulance.index') }}" class="btn btn-outline btn-block" style="margin:0"><i class="fas fa-ambulance"></i> Ambulance</a>
                <a href="{{ route('events.index') }}" class="btn btn-outline btn-block" style="margin:0"><i class="fas fa-calendar"></i> Events</a>
            </div>
        </div>
    </div>
</section>
@endauth

@guest
{{-- Join CTA --}}
<section class="join-section">
    <div class="container">
        <div class="join-card">
            <h2>AsthaLink is now in your city</h2>
            <p>Register today and become a proud member of our life-saving team.</p>
            <a href="{{ route('register') }}" class="btn btn-primary btn-lg">Join as Volunteer</a>
        </div>
    </div>
</section>
@endguest
@endsection