@props(['golfer', 'viewMode' => 'grid'])

@if($viewMode === 'grid')
    <!-- Grid View Card -->
    <div class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
        <!-- Profile Image -->
        <div class="relative h-56 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900/30 dark:to-purple-900/30 overflow-hidden">
            @if($golfer->getFirstMedia('photos'))
                <img src="{{ $golfer->getFirstMediaUrl('photos', 'thumb') }}"
                     alt="{{ $golfer->user->name }}"
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
            @else
                <div class="w-full h-full flex items-center justify-center">
                    <svg class="w-24 h-24 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                    </svg>
                </div>
            @endif

            <!-- Overlay Gradient -->
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

            @if($golfer->willing_to_travel)
                <div class="absolute top-3 right-3 flex items-center space-x-1 px-3 py-1.5 bg-emerald-500 text-white text-xs font-semibold rounded-full shadow-lg">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Will Travel</span>
                </div>
            @endif
        </div>

        <!-- Card Content -->
        <div class="p-5">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white truncate mb-1 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
                        {{ $golfer->user->name }}
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                        <svg class="w-4 h-4 mr-1.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <span class="truncate">{{ $golfer->home_location }}</span>
                    </p>
                </div>
                <div class="text-right ml-3 flex-shrink-0">
                    <div class="inline-flex flex-col items-end px-3 py-2 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-xl">
                        <p class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
                            ${{ number_format($golfer->hourly_rate, 0) }}
                        </p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 font-medium">per hour</p>
                    </div>
                </div>
            </div>

            <!-- Bio Preview -->
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2 leading-relaxed">
                {{ $golfer->bio }}
            </p>

            <!-- Tags -->
            @if($golfer->tags->count() > 0)
                <div class="flex flex-wrap gap-1.5 mb-4">
                    @foreach($golfer->tags->take(3) as $tag)
                        <span class="inline-flex items-center px-2.5 py-1 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 text-indigo-700 dark:text-indigo-300 text-xs font-medium rounded-lg">
                            {{ $tag->name }}
                        </span>
                    @endforeach
                    @if($golfer->tags->count() > 3)
                        <span class="inline-flex items-center px-2.5 py-1 text-gray-500 dark:text-gray-400 text-xs font-medium">
                            +{{ $golfer->tags->count() - 3 }}
                        </span>
                    @endif
                </div>
            @endif

            <!-- CTA Button -->
            <a href="{{ route('golfers.show', $golfer->id) }}"
               class="flex items-center justify-center space-x-2 w-full px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all duration-200">
                <span>View Full Profile</span>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
        </div>
    </div>
@else
    <!-- List View Card -->
    <div class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-0.5">
        <div class="flex flex-col sm:flex-row">
            <!-- Profile Image -->
            <div class="relative w-full sm:w-64 h-48 sm:h-auto flex-shrink-0 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900/30 dark:to-purple-900/30 overflow-hidden">
                @if($golfer->getFirstMedia('photos'))
                    <img src="{{ $golfer->getFirstMediaUrl('photos', 'thumb') }}"
                         alt="{{ $golfer->user->name }}"
                         class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                @else
                    <div class="w-full h-full flex items-center justify-center">
                        <svg class="w-24 h-24 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                @endif

                <!-- Overlay Gradient -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                @if($golfer->willing_to_travel)
                    <div class="absolute top-3 right-3 flex items-center space-x-1 px-3 py-1.5 bg-emerald-500 text-white text-xs font-semibold rounded-full shadow-lg">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Will Travel</span>
                    </div>
                @endif
            </div>

            <!-- Card Content -->
            <div class="flex-1 p-6">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between mb-4">
                    <div class="flex-1 mb-3 lg:mb-0">
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
                            {{ $golfer->user->name }}
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            {{ $golfer->home_location }}
                        </p>
                    </div>
                    <div class="flex-shrink-0">
                        <div class="inline-flex flex-col items-end px-4 py-3 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-2xl">
                            <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">
                                ${{ number_format($golfer->hourly_rate, 0) }}
                            </p>
                            <p class="text-xs text-gray-600 dark:text-gray-400 font-medium">per hour</p>
                        </div>
                    </div>
                </div>

                <!-- Bio Preview -->
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2 leading-relaxed">
                    {{ $golfer->bio }}
                </p>

                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <!-- Tags -->
                    @if($golfer->tags->count() > 0)
                        <div class="flex flex-wrap gap-1.5">
                            @foreach($golfer->tags->take(5) as $tag)
                                <span class="inline-flex items-center px-2.5 py-1 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 text-indigo-700 dark:text-indigo-300 text-xs font-medium rounded-lg">
                                    {{ $tag->name }}
                                </span>
                            @endforeach
                            @if($golfer->tags->count() > 5)
                                <span class="inline-flex items-center px-2.5 py-1 text-gray-500 dark:text-gray-400 text-xs font-medium">
                                    +{{ $golfer->tags->count() - 5 }}
                                </span>
                            @endif
                        </div>
                    @endif

                    <!-- CTA Button -->
                    <a href="{{ route('golfers.show', $golfer->id) }}"
                       class="inline-flex items-center justify-center space-x-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all duration-200 whitespace-nowrap">
                        <span>View Full Profile</span>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endif