@php
    $ctaImage = 'https://images.unsplash.com/photo-1526662092594-e98c1e356d6a?q=80&w=2825&auto=format&fit=crop';
@endphp

<section class="py-16 md:py-24">
    <div class="container mx-auto px-4 md:px-6">
        <div class="bg-muted/30 border rounded-2xl p-8 md:p-12 max-w-5xl mx-auto relative overflow-hidden">
            {{-- Background Pattern --}}
            <div class="absolute inset-0 z-0 opacity-10">
                <div class="absolute right-0 bottom-0 -mb-24 -mr-24 w-72 h-72 rounded-full bg-primary/40 blur-3xl"></div>
                <div class="absolute left-0 top-0 -mt-24 -ml-24 w-72 h-72 rounded-full bg-secondary/40 blur-3xl"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative z-10">
                <div class="space-y-4 animate-fade-in-up">
                    <h2 class="text-3xl font-bold tracking-tight">Ready to Make a Difference?</h2>
                    <p class="text-muted-foreground">
                        Your contribution, no matter how small, can have a profound impact on the life of an elderly person in need.
                    </p>
                    <div class="pt-4 flex flex-wrap gap-4">
                        <a href="{{ route('donate') }}" 
                           class="inline-flex items-center justify-center rounded-full px-8 py-3 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="cta-donate-button">
                            Donate Now
                            <x-ui.icon name="heart" class="ml-2 h-5 w-5" />
                        </a>
                        <a href="{{ route('profiles') }}" 
                           class="inline-flex items-center justify-center rounded-full px-8 py-3 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="cta-browse-profiles">
                            Browse Profiles
                            <x-ui.icon name="chevron-right" class="ml-2 h-5 w-5" />
                        </a>
                    </div>
                </div>
                
                <div class="relative animate-fade-in">
                    <div class="aspect-square rounded-xl overflow-hidden shadow-lg">
                        <img 
                            src="{{ $ctaImage }}" 
                            alt="Elderly woman smiling" 
                            class="w-full h-full object-cover transition-transform hover:scale-105 duration-700"
                            width="600"
                            height="600"
                            loading="lazy"
                        />
                    </div>
                    
                    <div class="absolute -bottom-4 -right-4 bg-white/90 backdrop-blur-sm border border-gray-200 rounded-lg p-4 max-w-xs shadow-lg animate-fade-in-up" style="animation-delay: 0.2s">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
                            <p class="text-xs font-medium text-green-600">Recurring Donation</p>
                        </div>
                        <p class="text-sm font-medium">"Become a monthly donor and provide consistent support to elderly individuals in need."</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>