<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl">
        <!-- Header -->
        <div
            class="relative mb-8 overflow-hidden rounded-2xl bg-cover bg-center p-8"
            style="background-image: url('{{ asset('images/default_companion.jpg') }}');"
        >
            <div class="absolute inset-0 bg-zinc-900/45"></div>
            <div class="relative mx-auto max-w-4xl text-center">
                <flux:heading size="xl" class="mb-2 text-white">Happy Tails Gallery</flux:heading>
                <flux:text class="text-lg text-white/90">
                    Celebrating our recent successful adoptions and the joy they've brought to their new families
                </flux:text>
            </div>
        </div>

        <!-- Adoptions Grid -->
        <div>
            <div wire:loading.class="opacity-50 transition-opacity" class="min-h-screen">
                @if ($adoptedPets->count() > 0)
                    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($adoptedPets as $pet)
                            <a
                                wire:key="adopted-pet-{{ $pet->id }}"
                                href="{{ route('pets.show', $pet->slug) }}"
                                wire:navigate
                                class="group border-ocean-200 hover:border-ocean-400 hover:shadow-ocean-200/50 dark:border-ocean-800 dark:hover:border-ocean-600 dark:hover:shadow-ocean-900/50 overflow-hidden rounded-xl border-2 bg-white transition-all hover:shadow-lg dark:bg-zinc-900"
                            >
                                <!-- Pet Image -->
                                <div class="from-ocean-50 dark:from-ocean-950 relative aspect-square overflow-hidden bg-gradient-to-br to-teal-50 dark:to-zinc-800">
                                    @php
                                        $primaryPhoto = $pet->images[0] ?? null;
                                        $adoptionDate = $pet->adoption_date;
                                    @endphp
                                    @if ($primaryPhoto)
                                        <img
                                            src="{{ Storage::disk('public')->url($primaryPhoto) }}"
                                            alt="{{ $pet->name }}"
                                            class="h-full w-full object-cover transition-transform group-hover:scale-105"
                                            loading="lazy"
                                            onerror="
                                                this.onerror = null;
                                                this.style.display = 'none';
                                                this.nextElementSibling.style.display = 'flex';
                                            "
                                        />
                                        <div class="from-ocean-50 dark:from-ocean-950 hidden h-full w-full items-center justify-center bg-gradient-to-br to-teal-50 dark:to-zinc-800">
                                            <svg class="text-ocean-300 dark:text-ocean-700 h-24 w-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                            </svg>
                                        </div>
                                    @else
                                        <div class="from-ocean-50 dark:from-ocean-950 flex h-full w-full items-center justify-center bg-gradient-to-br to-teal-50 dark:to-zinc-800">
                                            <svg class="text-ocean-300 dark:text-ocean-700 h-24 w-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                            </svg>
                                        </div>
                                    @endif

                                    <!-- Adopted Badge -->
                                    <div class="absolute top-3 left-3">
                                        <flux:badge
                                            size="sm"
                                            class="border-2 border-zinc-900! bg-white! text-black! shadow-lg backdrop-blur-sm dark:border-zinc-100! dark:bg-white! dark:text-black!"
                                        >
                                            <svg class="mr-1 inline-block h-3 w-3 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
                                            </svg>
                                            Adopted
                                            @if ($adoptionDate) •{{ $adoptionDate->format('M Y') }}@endif
                                        </flux:badge>
                                    </div>
                                </div>

                                <!-- Pet Info -->
                                <div class="p-4">
                                    <div class="mb-2 flex items-start justify-between">
                                        <div class="flex-1">
                                            <flux:heading size="lg" class="mb-1">{{ $pet->name }}</flux:heading>
                                            <flux:text size="sm" class="text-zinc-600 dark:text-zinc-400">
                                                {{ $pet->breed?->name ?? $pet->species->name }}
                                            </flux:text>
                                        </div>
                                    </div>

                                    <!-- Pet Details -->
                                    <div class="mt-3 flex flex-wrap gap-2">
                                        @if ($pet->age_in_years)
                                            <flux:badge variant="outline" size="sm">
                                                {{ $pet->age_in_years }}
                                            </flux:badge>
                                        @endif
                                        @if ($pet->gender)
                                            <flux:badge variant="outline" size="sm">
                                                {{ ucfirst($pet->gender) }}
                                            </flux:badge>
                                        @endif
                                        @if ($pet->size)
                                            <flux:badge variant="outline" size="sm">
                                                {{ ucfirst(str_replace('_', ' ', $pet->size)) }}
                                            </flux:badge>
                                        @endif
                                    </div>

                                    <!-- Description Preview -->
                                    @if ($pet->description)
                                        <flux:text size="sm" class="mt-3 line-clamp-2 text-zinc-600 dark:text-zinc-400">
                                            {{ $pet->description }}
                                        </flux:text>
                                    @endif
                                </div>
                            </a>
                        @endforeach
                    </div>

                    <!-- CTA Section -->
                    <div class="border-ocean-200 from-ocean-50 dark:border-ocean-800 dark:from-ocean-950 mt-12 rounded-xl border-2 bg-gradient-to-br to-teal-50 p-8 shadow-sm dark:to-zinc-900">
                        <div class="mx-auto max-w-3xl text-center">
                            <svg class="text-ocean-600 dark:text-ocean-400 mx-auto mb-4 h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                            </svg>
                            <flux:heading size="xl" class="text-ocean-900 dark:text-ocean-100 mb-3">
                                Ready to Make a Difference?
                            </flux:heading>
                            <flux:text class="text-ocean-700 dark:text-ocean-300 mb-6 text-lg">
                                Join these happy families and find your perfect companion. Browse our available pets and
                                start your adoption journey today.
                            </flux:text>
                            <flux:button
                                href="{{ route('pets.index') }}"
                                wire:navigate
                                variant="primary"
                                size="base"
                                class="bg-ocean-600 hover:bg-ocean-700 dark:bg-ocean-500 dark:hover:bg-ocean-600 border-ocean-600 dark:border-ocean-500 text-white"
                            >
                                Browse Available Pets
                            </flux:button>
                        </div>
                    </div>
                @else
                    <!-- Empty State -->
                    <div class="border-ocean-200 from-ocean-50 dark:border-ocean-800 dark:from-ocean-950 flex min-h-[400px] items-center justify-center rounded-xl border-2 bg-gradient-to-br to-teal-50 p-12 dark:to-zinc-900">
                        <div class="text-center">
                            <svg class="text-ocean-300 dark:text-ocean-700 mx-auto h-24 w-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                            </svg>
                            <flux:heading size="lg" class="text-ocean-900 dark:text-ocean-100 mt-4 mb-2"
                                >No adoptions yet</flux:heading>
                            <flux:text class="text-ocean-700 dark:text-ocean-300 mb-4">
                                Check back soon to see our happy adoption stories
                            </flux:text>
                            <flux:button
                                href="{{ route('pets.index') }}"
                                wire:navigate
                                variant="primary"
                                class="bg-ocean-600 hover:bg-ocean-700 dark:bg-ocean-500 dark:hover:bg-ocean-600 border-ocean-600 dark:border-ocean-500 text-white"
                            >View Available Pets</flux:button>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Loading Indicator -->
            <div wire:loading class="fixed inset-0 z-50 flex items-center justify-center bg-black/5 backdrop-blur-sm">
                <div class="border-ocean-300 shadow-ocean-200/50 dark:border-ocean-700 dark:shadow-ocean-900/50 rounded-lg border-2 bg-white px-6 py-4 shadow-lg dark:bg-zinc-900">
                    <div class="flex items-center gap-3">
                        <svg class="text-ocean-600 dark:text-ocean-400 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <flux:text class="text-ocean-700 dark:text-ocean-300">Loading...</flux:text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
