@extends('layouts.public')

@section('title', 'Play Golf with Professional Golfers')
@section('meta_description', 'Book unforgettable golf experiences with PGA, LPGA, and college professional golfers. Find verified pros near you for personalized golf sessions.')

@section('content')
    {{-- Hero Section --}}
    <section class="bg-gradient-to-br from-green-50 via-emerald-50 to-blue-50 py-16 lg:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 mb-6">
                        <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                        Trusted by {{ number_format($stats['total_clients'] ?: 500) }}+ golfers
                    </span>

                    <h1 class="text-4xl lg:text-6xl font-extrabold text-gray-900 leading-tight mb-6">
                        Play Golf with <span class="text-green-600">Professional</span> Golfers
                    </h1>
                    <p class="text-xl text-gray-600 mb-8 leading-relaxed">
                        Book unforgettable golf experiences with PGA, LPGA, and college players. Learn from the best, improve your game, and create lasting memories on the course.
                    </p>

                    {{-- Search Bar --}}
                    <form action="{{ auth()->check() ? route('search.index') : route('register') }}" method="GET" class="bg-white rounded-2xl shadow-xl p-2 flex flex-col sm:flex-row items-stretch sm:items-center max-w-2xl">
                        <div class="flex-1 relative">
                            <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <input
                                type="text"
                                name="q"
                                placeholder="Search by location or name..."
                                class="w-full pl-12 pr-4 py-4 rounded-xl border-none focus:outline-none focus:ring-0 text-gray-900"
                            >
                        </div>
                        <button type="submit" class="mt-2 sm:mt-0 bg-green-600 text-white px-8 py-4 rounded-xl hover:bg-green-700 transition font-semibold flex items-center justify-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            Search
                        </button>
                    </form>

                    {{-- Stats --}}
                    <div class="mt-10 flex flex-wrap items-center gap-8">
                        <div class="flex items-center space-x-3">
                            <div class="flex -space-x-3">
                                <div class="w-10 h-10 rounded-full bg-green-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">JD</div>
                                <div class="w-10 h-10 rounded-full bg-blue-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">SM</div>
                                <div class="w-10 h-10 rounded-full bg-purple-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">MR</div>
                            </div>
                            <p class="text-gray-600">
                                <span class="font-bold text-gray-900">{{ $stats['total_golfers'] ?: '500' }}+</span> verified pros
                            </p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <div class="flex text-yellow-400">
                                @for($i = 0; $i < 5; $i++)
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                @endfor
                            </div>
                            <span class="text-gray-600"><span class="font-bold text-gray-900">{{ number_format($stats['average_rating'], 1) }}</span> avg rating</span>
                        </div>
                    </div>
                </div>

                {{-- Hero Image/Visual --}}
                <div class="hidden lg:block relative">
                    <div class="absolute -top-4 -left-4 w-72 h-72 bg-green-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div>
                    <div class="absolute -bottom-8 -right-4 w-72 h-72 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse animation-delay-2000"></div>
                    <div class="relative">
                        <div class="bg-white rounded-3xl shadow-2xl p-6 transform rotate-3 hover:rotate-0 transition-transform duration-300">
                            <div class="bg-gradient-to-br from-green-400 to-emerald-600 h-80 rounded-2xl flex items-center justify-center">
                                <div class="text-center text-white p-8">
                                    <svg class="w-24 h-24 mx-auto mb-4 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <p class="text-2xl font-bold">Book Your Session</p>
                                    <p class="text-green-100 mt-2">Play with a pro today</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Trust Badges --}}
    <section class="bg-white py-8 border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- <div class="flex flex-wrap justify-center items-center gap-6 md:gap-12 text-gray-600"> --}}
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-gray-600 md:justify-self-center">
                <div class="flex items-center space-x-2">
                    <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span class="font-medium">Verified Professionals</span>
                </div>
                <div class="flex items-center space-x-2">
                    <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"/>
                    </svg>
                    <span class="font-medium">Secure Payments</span>
                </div>
                <div class="flex items-center space-x-2">
                    <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                    </svg>
                    <span class="font-medium">Easy Booking</span>
                </div>
                <div class="flex items-center space-x-2">
                    <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z" clip-rule="evenodd"/>
                    </svg>
                    <span class="font-medium">24/7 Support</span>
                </div>
            </div>
        </div>
    </section>

    {{-- How It Works --}}
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Simple Process</span>
                <h2 class="text-3xl lg:text-5xl font-bold text-gray-900 mt-2 mb-4">How It Works</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Book your perfect golf experience in three simple steps</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 lg:gap-12">
                {{-- Step 1 --}}
                <div class="relative text-center group">
                    <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 group-hover:shadow-xl group-hover:-translate-y-1">
                        <div class="bg-green-100 w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-green-600 transition-colors duration-300">
                            <svg class="w-10 h-10 text-green-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                        <span class="absolute top-4 left-4 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold text-sm">1</span>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Find Your Pro</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Browse verified professional golfers by location, skill level, and specialization. Filter by PGA Tour, LPGA, college players, and teaching pros.
                        </p>
                    </div>
                </div>

                {{-- Step 2 --}}
                <div class="relative text-center group">
                    <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 group-hover:shadow-xl group-hover:-translate-y-1">
                        <div class="bg-blue-100 w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-600 transition-colors duration-300">
                            <svg class="w-10 h-10 text-blue-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                            </svg>
                        </div>
                        <span class="absolute top-4 left-4 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm">2</span>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Book & Pay</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Select your preferred date, time, and course. Message the pro directly and complete your booking with secure payment processing.
                        </p>
                    </div>
                </div>

                {{-- Step 3 --}}
                <div class="relative text-center group">
                    <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 group-hover:shadow-xl group-hover:-translate-y-1">
                        <div class="bg-purple-100 w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-purple-600 transition-colors duration-300">
                            <svg class="w-10 h-10 text-purple-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <span class="absolute top-4 left-4 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-sm">3</span>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Play & Enjoy</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Meet your pro on the course, learn from their expertise, and enjoy an unforgettable round of golf. Leave a review after your session.
                        </p>
                    </div>
                </div>
            </div>

            <div class="text-center mt-12">
                <a href="{{ route('page.how-it-works') }}" class="inline-flex items-center text-green-600 hover:text-green-700 font-semibold">
                    Learn more about how it works
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </a>
            </div>
        </div>
    </section>

    {{-- Featured Golfers --}}
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Top Professionals</span>
                <h2 class="text-3xl lg:text-5xl font-bold text-gray-900 mt-2 mb-4">Featured Golfers</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Connect with verified professionals ready to elevate your game</p>
            </div>

            @if($featuredGolfers->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($featuredGolfers as $golfer)
                        <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 group border border-gray-100">
                            <div class="relative h-52 bg-gradient-to-br from-green-400 to-emerald-600">
                                @if($golfer->getFirstMediaUrl('profile_photos'))
                                    <img src="{{ $golfer->getFirstMediaUrl('profile_photos') }}" alt="{{ $golfer->user->name }}" class="w-full h-full object-cover">
                                @endif
                                @if($golfer->is_featured)
                                    <span class="absolute top-4 left-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full">Featured</span>
                                @endif
                                @if($golfer->is_verified)
                                    <span class="absolute top-4 right-4 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Verified
                                    </span>
                                @endif
                            </div>
                            <div class="p-6">
                                <div class="flex items-start justify-between mb-3">
                                    <div>
                                        <h3 class="text-xl font-bold text-gray-900">{{ $golfer->user->name }}</h3>
                                        <p class="text-gray-600 text-sm">Professional Golfer</p>
                                    </div>
                                    <div class="flex items-center space-x-1">
                                        <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                        </svg>
                                        <span class="text-gray-900 font-semibold">5.0</span>
                                    </div>
                                </div>
                                <p class="text-gray-500 text-sm mb-4 flex items-center">
                                    <svg class="w-4 h-4 mr-1" 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 ?? 'United States' }}
                                </p>
                                <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                                    <span class="text-2xl font-bold text-green-600">${{ number_format($golfer->hourly_rate ?? 100) }}<span class="text-sm text-gray-500 font-normal">/hour</span></span>
                                    <a href="{{ route('golfers.show', $golfer->id) }}" class="bg-green-600 text-white px-5 py-2 rounded-full hover:bg-green-700 transition font-medium text-sm">
                                        View Profile
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                {{-- Placeholder cards when no golfers available --}}
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @for($i = 0; $i < 3; $i++)
                        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
                            <div class="h-52 bg-gradient-to-br {{ ['from-green-400 to-emerald-600', 'from-blue-400 to-indigo-600', 'from-purple-400 to-pink-600'][$i] }}"></div>
                            <div class="p-6">
                                <div class="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
                                <div class="h-4 bg-gray-100 rounded w-1/2 mb-4"></div>
                                <div class="h-4 bg-gray-100 rounded w-1/3 mb-4"></div>
                                <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                                    <div class="h-6 bg-gray-200 rounded w-1/4"></div>
                                    <div class="h-10 bg-green-100 rounded-full w-28"></div>
                                </div>
                            </div>
                        </div>
                    @endfor
                </div>
                <p class="text-center text-gray-500 mt-8">Featured golfers coming soon! Be the first to join our platform.</p>
            @endif

            <div class="text-center mt-12">
                <a href="{{ route('register') }}" class="bg-green-600 text-white px-8 py-4 rounded-full hover:bg-green-700 transition font-semibold text-lg inline-flex items-center">
                    Browse All Golfers
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </a>
            </div>
        </div>
    </section>

    {{-- Testimonials --}}
    @if($testimonials->count() > 0)
    <section class="py-20 bg-gradient-to-br from-green-50 to-blue-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Reviews</span>
                <h2 class="text-3xl lg:text-5xl font-bold text-gray-900 mt-2 mb-4">What Our Players Say</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Real experiences from golfers who've played with professionals</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($testimonials->take(3) as $review)
                    <div class="bg-white rounded-2xl p-8 shadow-lg">
                        <div class="flex items-center mb-4">
                            @for($i = 0; $i < $review->rating; $i++)
                                <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                            @endfor
                        </div>
                        <p class="text-gray-600 mb-6 leading-relaxed">"{!! nl2br(e(Str::limit($review->comment, 150))) !!}"</p>
                        <div class="flex items-center">
                            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold text-lg">
                                {{ substr($review->reviewer->name ?? 'G', 0, 1) }}
                            </div>
                            <div class="ml-4">
                                <p class="font-semibold text-gray-900">{{ $review->reviewer->name ?? 'Golfer' }}</p>
                                <p class="text-sm text-gray-500">Played with {{ $review->reviewee->name ?? 'a pro' }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @else
    {{-- Static testimonials when no reviews available --}}
    <section class="py-20 bg-gradient-to-br from-green-50 to-blue-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Reviews</span>
                <h2 class="text-3xl lg:text-5xl font-bold text-gray-900 mt-2 mb-4">What Our Players Say</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Real experiences from golfers who've played with professionals</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <div class="flex items-center mb-4">
                        @for($i = 0; $i < 5; $i++)
                            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        @endfor
                    </div>
                    <p class="text-gray-600 mb-6 leading-relaxed">"An incredible experience! Playing with a PGA pro helped me improve my swing and gave me insider tips I couldn't learn anywhere else."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold text-lg">J</div>
                        <div class="ml-4">
                            <p class="font-semibold text-gray-900">John D.</p>
                            <p class="text-sm text-gray-500">Los Angeles, CA</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <div class="flex items-center mb-4">
                        @for($i = 0; $i < 5; $i++)
                            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        @endfor
                    </div>
                    <p class="text-gray-600 mb-6 leading-relaxed">"The booking process was seamless and the pro I played with was fantastic. I've already booked my second session!"</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-lg">S</div>
                        <div class="ml-4">
                            <p class="font-semibold text-gray-900">Sarah M.</p>
                            <p class="text-sm text-gray-500">Miami, FL</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <div class="flex items-center mb-4">
                        @for($i = 0; $i < 5; $i++)
                            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        @endfor
                    </div>
                    <p class="text-gray-600 mb-6 leading-relaxed">"Worth every penny! I learned more in one round than I did in months of practice. Highly recommend to anyone serious about golf."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold text-lg">M</div>
                        <div class="ml-4">
                            <p class="font-semibold text-gray-900">Michael R.</p>
                            <p class="text-sm text-gray-500">Austin, TX</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- For Golfers Section --}}
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">For Professionals</span>
                    <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-6">Are You a Professional Golfer?</h2>
                    <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                        Join our platform to connect with golf enthusiasts, set your own schedule and rates, and earn money doing what you love.
                    </p>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <svg class="w-6 h-6 text-green-600 mr-3 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="text-gray-700">Set your own hourly rates and availability</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-6 h-6 text-green-600 mr-3 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="text-gray-700">Get paid securely after each session</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-6 h-6 text-green-600 mr-3 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="text-gray-700">Build your reputation with reviews and ratings</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-6 h-6 text-green-600 mr-3 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="text-gray-700">Access to booking management tools and calendar</span>
                        </li>
                    </ul>
                    <a href="{{ route('register') }}" class="inline-flex items-center bg-green-600 text-white px-8 py-4 rounded-full hover:bg-green-700 transition font-semibold">
                        Apply to Join
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                    </a>
                </div>
                <div class="relative">
                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-3xl p-8 text-white">
                        <div class="text-center">
                            <div class="text-6xl font-bold mb-2">$150</div>
                            <div class="text-green-100 mb-6">Average hourly rate</div>
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div class="bg-white/20 rounded-xl p-4">
                                    <div class="text-3xl font-bold">500+</div>
                                    <div class="text-sm text-green-100">Active Golfers</div>
                                </div>
                                <div class="bg-white/20 rounded-xl p-4">
                                    <div class="text-3xl font-bold">1000+</div>
                                    <div class="text-sm text-green-100">Sessions Booked</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA Section --}}
    <section class="py-20 bg-gradient-to-r from-green-600 to-emerald-600 text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl lg:text-5xl font-bold mb-6">Ready to Elevate Your Game?</h2>
            <p class="text-xl mb-8 opacity-90 max-w-2xl mx-auto">Join thousands of golfers who have improved their skills with professional guidance. Your perfect golf experience awaits.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="{{ route('register') }}" class="bg-white text-green-600 px-10 py-4 rounded-full hover:bg-gray-100 hover:text-white transition font-semibold text-lg inline-flex items-center justify-center">
                    Get Started Free
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </a>
                <a href="{{ route('page.how-it-works') }}" class="border-2 border-white text-white px-10 py-4 rounded-full hover:bg-white/10 transition font-semibold text-lg inline-flex items-center justify-center">
                    Learn More
                </a>
            </div>
        </div>
    </section>
@endsection