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

<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>
        
        <img
            src="{{ $profile->profile_image_url }}"
            alt="{{ $profile->name }}, {{ $profile->age }} years old from {{ $profile->location }}"
            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($profile->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">
                    <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">
                <div class="relative h-1.5 bg-muted rounded-full overflow-hidden" id="progress-{{ $profile->id }}">
                    <progress
                        value="{{ $profile->progress_percentage }}"
                        max="100"
                        class="sr-only"
                        aria-label="{{ $profile->progress_percentage }}% of the goal amount raised">
                        {{ $profile->progress_percentage }}%
                    </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">{{ $profile->formatted_raised }}</span> raised
                    </span>
                    <span class="text-muted-foreground">
                        Goal: <span class="font-medium text-foreground">{{ $profile->formatted_goal }}</span>
                    </span>
                </div>
            </div>
            
            <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));
            
            // Initialize progress bars
            const progressBars = document.querySelectorAll('[id^="progress-"]');
            const progressObserver = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        const progressBar = entry.target;
                        const indicator = progressBar.querySelector('.progress-indicator');
                        
                        if (indicator && indicator.style.width === '0%') {
                            // Use requestAnimationFrame for smoother animation
                            requestAnimationFrame(() => {
                                indicator.style.transition = 'width 1s ease-out';
                                indicator.style.width = indicator.parentElement.querySelector('progress').value + '%';
                            });
                        }
                        
                        // Stop observing after animation
                        progressObserver.unobserve(progressBar);
                    }
                });
            }, { threshold: 0.1, rootMargin: '100px' });
            
            // Observe all progress bars
            progressBars.forEach(progressBar => progressObserver.observe(progressBar));
        });
    })();
</script>
@endonce