@extends('layouts.public')

@push('styles')
<style>
    [x-cloak] { display: none !important; }
    
    /* For screens 352px and smaller */
    @media (max-width: 352px) {
        .small-screen-padding {
            padding-left: 1.25rem !important; /* px-5 = 1.25rem */
            padding-right: 1.25rem !important;
        }
    }
</style>
@endpush

@section('title', 'How It Works')
@section('meta_description', 'Learn how to book golf sessions with professional golfers on The Fair Way Social. Simple 3-step process: Find, Book, and Play.')

@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 text-center">
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 mb-6">
                Easy as 1-2-3
            </span>
            <h1 class="text-4xl lg:text-6xl font-extrabold text-gray-900 mb-6">
                How It <span class="text-green-600">Works</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Whether you're a golf enthusiast looking to play with a pro or a professional golfer looking to share your expertise, our platform makes it simple.
            </p>
        </div>
    </section>

    {{-- For Clients Section --}}
    <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">For Golf Enthusiasts</span>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-4">Book Your Perfect Golf Experience</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Playing with a professional has never been easier</p>
            </div>

            <div class="grid lg:grid-cols-3 gap-8">
                {{-- Step 1 --}}
                <div class="relative">
                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-3xl p-8 text-white h-full">
                        <div class="absolute -top-4 -left-4 w-12 h-12 bg-white text-green-600 rounded-full flex items-center justify-center font-bold text-xl shadow-lg">1</div>
                        <div class="mt-4">
                            <svg class="w-12 h-12 mb-6 opacity-90" 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>
                            <h3 class="text-2xl font-bold mb-4">Browse & Find</h3>
                            <p class="text-green-100 leading-relaxed mb-4">
                                Search our extensive database of verified professional golfers. Filter by:
                            </p>
                            <ul class="space-y-2 text-green-100">
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Location & proximity
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Professional level (PGA, LPGA, College)
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Price range
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Ratings & reviews
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Step 2 --}}
                <div class="relative">
                    <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-8 text-white h-full">
                        <div class="absolute -top-4 -left-4 w-12 h-12 bg-white text-blue-600 rounded-full flex items-center justify-center font-bold text-xl shadow-lg">2</div>
                        <div class="mt-4">
                            <svg class="w-12 h-12 mb-6 opacity-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            <h3 class="text-2xl font-bold mb-4">Book & Pay</h3>
                            <p class="text-blue-100 leading-relaxed mb-4">
                                Once you find the perfect golfer, booking is simple:
                            </p>
                            <ul class="space-y-2 text-blue-100">
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Check their availability calendar
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Select date, time, and duration
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Choose your preferred golf course
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Pay securely via Stripe
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Step 3 --}}
                <div class="relative">
                    <div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-3xl p-8 text-white h-full">
                        <div class="absolute -top-4 -left-4 w-12 h-12 bg-white text-purple-600 rounded-full flex items-center justify-center font-bold text-xl shadow-lg">3</div>
                        <div class="mt-4">
                            <svg class="w-12 h-12 mb-6 opacity-90" 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>
                            <h3 class="text-2xl font-bold mb-4">Play & Enjoy</h3>
                            <p class="text-purple-100 leading-relaxed mb-4">
                                Meet your pro and enjoy an unforgettable experience:
                            </p>
                            <ul class="space-y-2 text-purple-100">
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Meet at the agreed location
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Learn tips and techniques
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Play an amazing round
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" 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>
                                    Leave a review to help others
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <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">
                    Start Browsing 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>

    {{-- For Golfers Section --}}
    <section class="pb-16 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">For Professional Golfers</span>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-4">Start Earning on Your Terms</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Turn your passion into income with flexible scheduling</p>
            </div>

            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="order-2 lg:order-1">
                    <div class="space-y-8">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">1. Create Your Profile</h3>
                                <p class="text-gray-600">Sign up and build your professional profile. Add your credentials, experience, photos, and set your hourly rate.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">2. Set Your Availability</h3>
                                <p class="text-gray-600">Use our easy calendar to mark when you're available. Block off busy days and set recurring schedules.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4">
                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">3. Accept Bookings</h3>
                                <p class="text-gray-600">Receive booking requests from interested clients. Review their details and accept or decline based on your preferences.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mr-4">
                                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">4. Get Paid</h3>
                                <p class="text-gray-600">After each completed session, your earnings are released. Withdraw to your bank account whenever you want.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="order-1 lg:order-2">
                    <div class="bg-white rounded-3xl shadow-xl p-8">
                        <h3 class="text-xl font-bold text-gray-900 mb-6">Why Join The Fair Way Social?</h3>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                                <span class="font-medium text-gray-900">Set your own rates</span>
                                <svg class="w-6 h-6 text-green-600" 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>
                            </div>
                            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                                <span class="font-medium text-gray-900">Flexible scheduling</span>
                                <svg class="w-6 h-6 text-green-600" 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>
                            </div>
                            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                                <span class="font-medium text-gray-900">Secure payments</span>
                                <svg class="w-6 h-6 text-green-600" 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>
                            </div>
                            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                                <span class="font-medium text-gray-900">Build your reputation</span>
                                <svg class="w-6 h-6 text-green-600" 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>
                            </div>
                            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                                <span class="font-medium text-gray-900">Professional dashboard</span>
                                <svg class="w-6 h-6 text-green-600" 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>
                            </div>
                        </div>
                        <a href="{{ route('register') }}" class="block mt-6 bg-green-600 text-white px-6 py-3 rounded-xl hover:bg-green-700 transition font-semibold text-center">
                            Apply to Join
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- FAQ Preview --}}
    <section class="pb-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Common Questions</h2>
                <p class="text-lg text-gray-600">Quick answers to help you get started</p>
            </div>

            <div class="space-y-4" x-data="{ openFaq: null }">
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <button @click="openFaq = openFaq === 1 ? null : 1" class="w-full px-6 py-4 text-left flex items-center justify-between bg-white hover:bg-gray-50 transition">
                        <span class="font-medium text-gray-900">How are golfers verified?</span>
                        <svg class="w-5 h-5 text-gray-500 transform transition-transform" :class="{ 'rotate-180': openFaq === 1 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                    <div x-show="openFaq === 1" x-collapse class="px-6 pb-4 text-gray-600">
                        Every golfer undergoes a thorough verification process. We check their professional credentials, competitive history, and ensure they meet our quality standards. Look for the verified badge on golfer profiles.
                    </div>
                </div>

                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <button @click="openFaq = openFaq === 2 ? null : 2" class="w-full px-6 py-4 text-left flex items-center justify-between bg-white hover:bg-gray-50 transition">
                        <span class="font-medium text-gray-900">Is my payment secure?</span>
                        <svg class="w-5 h-5 text-gray-500 transform transition-transform" :class="{ 'rotate-180': openFaq === 2 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                    <div x-show="openFaq === 2" x-collapse class="px-6 pb-4 text-gray-600">
                        Yes! We use Stripe, a PCI-compliant payment processor used by millions of businesses worldwide. Your payment information is encrypted and never stored on our servers.
                    </div>
                </div>

                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <button @click="openFaq = openFaq === 3 ? null : 3" class="w-full px-6 py-4 text-left flex items-center justify-between bg-white hover:bg-gray-50 transition">
                        <span class="font-medium text-gray-900">What if I need to cancel?</span>
                        <svg class="w-5 h-5 text-gray-500 transform transition-transform" :class="{ 'rotate-180': openFaq === 3 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                    <div x-show="openFaq === 3" x-collapse class="px-6 pb-4 text-gray-600">
                        Cancellations made 48+ hours before receive a full refund. Within 24-48 hours get 50% back. See our refund policy for complete details.
                    </div>
                </div>
            </div>

            <div class="text-center mt-8">
                <a href="{{ route('page.faq') }}" class="inline-flex items-center text-green-600 hover:text-green-700 font-semibold">
                    View all FAQs
                    <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>

    {{-- CTA --}}
    <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-4xl font-bold mb-6">Ready to Get Started?</h2>
            <p class="text-xl mb-8 opacity-90">Join thousands of golfers enjoying premium experiences</p>
            <a href="{{ route('register') }}" class="small-screen-padding 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">
                Create Your Free Account
                <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>
    </section>
@endsection