@props([
    'formattedTotalDonations',
    'monthlyStats'
])

@php
    // Define constants for better maintainability
    $HERO_IMAGE_URL = 'https://images.unsplash.com/photo-1516307365426-bea591f05011?q=80&w=1740&auto=format&fit=crop';
    $HERO_IMAGE_ALT = 'Elderly woman smiling with caregiver';
@endphp

<section class="relative overflow-hidden pt-24 pb-16 md:pt-32 md:pb-24">
    {{-- Background Pattern - Using CSS variables for easy theming --}}
    <div class="absolute inset-0 z-0 opacity-10">
        <div class="absolute right-0 bottom-0 -mb-48 -mr-48 w-96 h-96 rounded-full bg-primary/40 blur-3xl"></div>
        <div class="absolute left-0 top-0 -mt-48 -ml-48 w-96 h-96 rounded-full bg-secondary/40 blur-3xl"></div>
    </div>
    
    <div class="container relative z-10 mx-auto px-4 md:px-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-8 max-w-xl animate-fade-in-up">
                <div>
                    {{-- Badge component - Extracted for reusability --}}
                    <div class="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary animate-fade-in">
                        Making a difference together
                    </div>
                    
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mt-4 text-balance">
                        Connecting Hearts, <span class="text-primary">Supporting Elders</span>
                    </h1>
                    <p class="mt-6 text-xl text-muted-foreground text-balance">
                        Join our mission to provide care, dignity, and support for elderly individuals in need around the world.
                    </p>
                </div>
                
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('donate') }}"
                       class="inline-flex items-center justify-center rounded-full px-8 text-base h-12 bg-primary text-primary-foreground hover:bg-primary/90 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                       data-analytics="hero-donate-button"
                    >
                        Donate Now
                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
                        </svg>
                    </a>
                    
                    <a href="{{ route('profiles') }}"
                       class="inline-flex items-center justify-center rounded-full px-8 text-base h-12 border border-input bg-background hover:bg-accent hover:text-accent-foreground font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                       data-analytics="hero-profiles-button"
                    >
                        View Elderly Profiles
                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M5 12h14"/>
                            <path d="m12 5 7 7-7 7"/>
                        </svg>
                    </a>
                </div>
                
                <div class="flex flex-wrap gap-8 pt-4">
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
                        </svg>
                        <span class="text-sm font-medium">100% Transparent</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                        <span class="text-sm font-medium">1,000+ Elders Supported</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="8" r="6"/>
                            <path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/>
                        </svg>
                        <span class="text-sm font-medium">Trusted Organization</span>
                    </div>
                </div>
            </div>
            
            <div class="relative animate-fade-in order-first lg:order-last">
                <div class="relative aspect-[4/3] overflow-hidden rounded-xl border shadow-xl">
                    <img
                        src="{{ $HERO_IMAGE_URL }}"
                        alt="{{ $HERO_IMAGE_ALT }}"
                        class="object-cover w-full h-full"
                        width="740"
                        height="555"
                        loading="eager"
                        fetchpriority="high"
                    />
                </div>
                
                {{-- Floating Stats Card --}}
                <div class="absolute -bottom-10 -left-10 bg-white rounded-lg p-4 shadow-lg border border-border/50 w-48 animate-fade-in-up">
                    <p class="text-sm font-medium text-muted-foreground">Total Donations</p>
                    <p class="text-2xl font-bold text-primary">{{ $formattedTotalDonations }}</p>
                    <div class="flex items-center mt-2">
                        @if($monthlyStats['is_increase'])
                            <span class="text-xs text-green-500 font-medium">↑ {{ $monthlyStats['percentage'] }}% increase</span>
                        @else
                            <span class="text-xs text-red-500 font-medium">↓ {{ abs($monthlyStats['percentage']) }}% decrease</span>
                        @endif
                        <span class="text-xs text-muted-foreground ml-1">this month</span>
                    </div>
                </div>
                
                {{-- Floating Donors Card --}}
                <div class="absolute -top-8 -right-8 bg-white rounded-lg p-4 shadow-lg border border-border/50 w-48 animate-fade-in-up" style="animation-delay: 0.2s">
                    <div class="flex -space-x-2 mb-2">
                        <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Donor" />
                        <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Donor" />
                        <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Donor" />
                        <div class="w-8 h-8 rounded-full border-2 border-white bg-primary flex items-center justify-center text-xs text-white font-medium">
                            +50
                        </div>
                    </div>
                    <p class="text-sm font-medium">Recent donors supporting our cause</p>
                </div>
            </div>
        </div>
    </div>
</section>