@props(['featuredElderly' => []])

<section class="py-16 md:py-24 bg-muted/30">
    <div class="container mx-auto px-4 md:px-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
            <div>
                @if(!empty($featuredElderly) && isset($featuredElderly[0]['is_featured']) && $featuredElderly[0]['is_featured'])
                    <h2 class="text-3xl font-bold tracking-tight">Featured Elderly</h2>
                    <p class="text-muted-foreground mt-2 max-w-2xl">
                        Meet the elderly individuals who need your support. Your donation can make a significant difference in their lives.
                    </p>
                @else
                    <h2 class="text-3xl font-bold tracking-tight">Recent Profiles</h2>
                    <p class="text-muted-foreground mt-2 max-w-2xl">
                        Meet some of our recent elderly profiles who need your support. Your donation can make a significant difference in their lives.
                    </p>
                @endif
            </div>
            <a href="{{ route('profiles') }}"
               class="mt-4 md:mt-0 inline-flex items-center text-sm font-medium transition-colors hover:text-primary"
               data-analytics="view-all-profiles">
                View all profiles
                <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m9 18 6-6-6-6"/>
                </svg>
            </a>
        </div>

        @if(empty($featuredElderly))
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @for($i = 0; $i < 3; $i++)
                    <div class="border rounded-lg overflow-hidden">
                        <div class="aspect-[4/3] bg-muted animate-pulse"></div>
                        <div class="p-4 space-y-3">
                            <div class="h-6 bg-muted rounded-md animate-pulse w-3/4"></div>
                            <div class="h-4 bg-muted rounded-md animate-pulse w-1/2"></div>
                            <div class="space-y-2">
                                <div class="h-4 bg-muted rounded-md animate-pulse"></div>
                                <div class="h-4 bg-muted rounded-md animate-pulse w-5/6"></div>
                            </div>
                            <div class="h-2 bg-muted rounded-md animate-pulse"></div>
                            <div class="flex gap-2 pt-2">
                                <div class="h-10 bg-muted rounded-full animate-pulse w-1/2"></div>
                                <div class="h-10 bg-muted rounded-full animate-pulse w-1/2"></div>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($featuredElderly as $index => $profile)
                    <div class="animate-fade-in-up" style="animation-delay: {{ $index * 0.1 }}s">
                        <div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 {{ $index === 0 ? 'border-primary/20' : '' }}">
                            <div class="aspect-[4/3] overflow-hidden relative">
                                <div class="absolute inset-0 bg-muted/50 flex items-center justify-center" id="loading-placeholder-{{ $profile['id'] }}">
                                    <div class="w-10 h-10 rounded-full border-2 border-primary/30 border-t-primary animate-spin" aria-label="Loading profile image"></div>
                                </div>
                                
                                @php
                                    $imageUrl = isset($profile['image']) ? $profile['image'] :
                                              (isset($profile['images']) && !empty($profile['images']) ? $profile['images'][0] :
                                              asset('images/placeholder.jpg'));
                                    // Create descriptive alt text
                                    $imageAlt = "{$profile['name']}, {$profile['age']} years old from {$profile['location']}";
                                @endphp
                                
                                <img
                                    src="{{ $imageUrl }}"
                                    alt="{{ $imageAlt }}"
                                    class="w-full h-full object-cover transition-all duration-700 opacity-0 scale-110"
                                    id="profile-image-{{ $profile['id'] }}"
                                    data-profile-id="{{ $profile['id'] }}"
                                    loading="lazy"
                                    decoding="async"
                                    width="400"
                                    height="300"
                                />
                                @if(isset($profile['is_featured']) && $profile['is_featured'])
                                    <div class="absolute top-3 left-3 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                                        Featured
                                    </div>
                                @endif
                            </div>
                            
                            <div class="p-4 space-y-4">
                                <div>
                                    <div class="flex items-center justify-between">
                                        <h3 class="text-lg font-semibold">{{ $profile['name'] }}</h3>
                                        <span class="text-sm text-muted-foreground">{{ $profile['age'] }} years</span>
                                    </div>
                                    
                                    <div class="flex items-center text-sm text-muted-foreground mt-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                                            <circle cx="12" cy="10" r="3" />
                                        </svg>
                                        <span>{{ $profile['location'] }}</span>
                                    </div>
                                </div>
                                
                                <p class="text-sm text-muted-foreground">
                                    {{ \Illuminate\Support\Str::limit($profile['story'], 120) }}
                                </p>
                                
                                <div class="space-y-3">
                                    <div class="w-full space-y-2" data-testid="donation-progress">
                                        @php
                                            // Prevent division by zero
                                            $goalAmount = $profile['goal'] ?? 0;
                                            $raisedAmount = $profile['raised'] ?? 0;
                                            $progressPercentage = isset($profile['progress_percentage']) ? $profile['progress_percentage'] :
                                                ($goalAmount > 0 ? min(round(($raisedAmount / $goalAmount) * 100), 100) : 0);
                                            $progressId = 'progress-' . md5($goalAmount . $raisedAmount . uniqid());
                                        @endphp
                                        
                                        <div class="relative h-1.5 bg-muted rounded-full overflow-hidden" id="{{ $progressId }}">
                                            <progress
                                                value="{{ $progressPercentage }}"
                                                max="100"
                                                class="sr-only"
                                                aria-label="{{ $progressPercentage }}% of the goal amount raised">
                                                {{ $progressPercentage }}%
                                            </progress>
                                            <div class="progress-indicator absolute h-full bg-primary rounded-full" style="width: 0%"></div>
                                        </div>
                                        
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-muted-foreground">
                                                <span class="font-medium text-foreground">{{ isset($profile['formatted_raised']) ? $profile['formatted_raised'] : ('$' . number_format($raisedAmount, 0, '.', ',')) }}</span> raised
                                            </span>
                                            <span class="text-muted-foreground">
                                                Goal: <span class="font-medium text-foreground">{{ isset($profile['formatted_goal']) ? $profile['formatted_goal'] : ('$' . number_format($goalAmount, 0, '.', ',')) }}</span>
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="flex gap-2">
                                        <a href="{{ route('profiles') . '/' . $profile['id'] }}"
                                           class="inline-flex items-center justify-center rounded-full px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground text-sm 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 w-1/2"
                                           aria-label="Learn more about {{ $profile['name'] }}">
                                            Learn More
                                        </a>
                                        <a href="{{ route('donate', ['elderly_id' => $profile['id']]) }}"
                                           class="inline-flex items-center justify-center rounded-full px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 text-sm 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 w-1/2"
                                           aria-label="Donate to {{ $profile['name'] }}">
                                            Donate
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

@once
<script>
    // Use IIFE to avoid global scope pollution
    (function() {
        document.addEventListener('DOMContentLoaded', function() {
            const profileImages = document.querySelectorAll('img[data-profile-id]');
            
            if (!profileImages.length) return;
            
            // Debug information
            console.log('Found ' + profileImages.length + ' profile images to load');
            
            // Immediately show all images without waiting for intersection
            profileImages.forEach(function(img) {
                const profileId = img.getAttribute('data-profile-id');
                const originalSrc = img.src;
                
                console.log('Loading image for profile ID: ' + profileId + ', src: ' + originalSrc);
                
                // Force image to be visible immediately
                img.classList.remove('opacity-0', 'scale-110');
                img.classList.add('opacity-100', 'scale-100');
                
                // Handle image load event
                img.addEventListener('load', function() {
                    console.log('Successfully loaded image for profile ID: ' + profileId);
                    const placeholder = document.getElementById('loading-placeholder-' + profileId);
                    if (placeholder) placeholder.classList.add('hidden');
                });
                
                // Handle image error event
                img.addEventListener('error', function() {
                    console.error('Failed to load image for profile ID: ' + profileId + ', src: ' + originalSrc);
                    
                    // Try loading with a modified path
                    const modifiedSrc = originalSrc.replace('/storage/', '/storage/elderly/profiles/');
                    console.log('Attempting with modified path: ' + modifiedSrc);
                    
                    if (originalSrc !== modifiedSrc) {
                        this.src = modifiedSrc;
                        return;
                    }
                    
                    const placeholder = document.getElementById('loading-placeholder-' + profileId);
                    if (placeholder) placeholder.classList.add('hidden');
                    
                    // Set fallback image on error
                    if (this.src !== '{{ asset("images/placeholder.jpg") }}') {
                        this.src = '{{ asset("images/placeholder.jpg") }}';
                    }
                });
            });
            
            // Initialize progress bars
            const progressBars = document.querySelectorAll('[id^="progress-"]');
            if (progressBars.length) {
                const progressObserver = new IntersectionObserver(function(entries) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            const bar = entry.target;
                            const indicator = bar.querySelector('.progress-indicator');
                            
                            if (indicator) {
                                // Use requestAnimationFrame for smoother animation
                                requestAnimationFrame(function() {
                                    indicator.style.transition = 'width 1s ease-out';
                                    indicator.style.width = indicator.parentElement.querySelector('progress').value + '%';
                                });
                            }
                            
                            // Stop observing after animation
                            progressObserver.unobserve(bar);
                        }
                    });
                }, { threshold: 0.1, rootMargin: '50px' });
                
                progressBars.forEach(bar => progressObserver.observe(bar));
            }
        });
    })();
</script>
@endonce