@props([
    'profile',
    'featured' => false
])

<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 {{ $featured ? '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($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">
                <x-ui.icon name="map-pin" class="h-3.5 w-3.5 mr-1" />
                <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">
            <x-homepage.donation-progress
                :goalAmount="$profile['goal'] ?? 0"
                :raisedAmount="$profile['raised'] ?? 0"
                size="sm"
            />
            
            <div class="flex gap-2">
                <a href="{{ route('profiles.show', $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>

@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;
            
            // Use Intersection Observer for better performance and lazy loading
            const imageObserver = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        const profileId = img.getAttribute('data-profile-id');
                        
                        // Handle image load event
                        img.addEventListener('load', function() {
                            this.classList.remove('opacity-0', 'scale-110');
                            this.classList.add('opacity-100', 'scale-100');
                            
                            const placeholder = document.getElementById('loading-placeholder-' + profileId);
                            if (placeholder) placeholder.classList.add('hidden');
                        });
                        
                        // Handle image error event
                        img.addEventListener('error', function() {
                            this.classList.remove('opacity-0', 'scale-110');
                            this.classList.add('opacity-100', 'scale-100');
                            
                            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") }}';
                            }
                        });
                        
                        // Stop observing after handling
                        imageObserver.unobserve(img);
                    }
                });
            }, { threshold: 0.1, rootMargin: '100px' });
            
            // Observe all profile images
            profileImages.forEach(img => imageObserver.observe(img));
        });
    })();
</script>
@endonce