@extends('layouts.public')

@section('title', 'About Us')
@section('meta_description', 'Learn about The Fair Way Social - our mission to connect golf enthusiasts with professional golfers for unforgettable playing experiences.')

@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">
                        Our Story
                    </span>
                    <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 mb-6">
                        Connecting Golfers, <span class="text-green-600">Creating Memories</span>
                    </h1>
                    <p class="text-xl text-gray-600 leading-relaxed">
                        The Fair Way Social was born from a simple idea: everyone deserves the chance to play with and learn from professional golfers. We're building a community that makes golf more accessible, enjoyable, and educational.
                    </p>
                </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">
                            <h3 class="text-5xl font-bold mb-2">2024</h3>
                            <p class="text-green-100 mb-8">Founded</p>
                            <div class="grid grid-cols-3 gap-4 text-center">
                                <div>
                                    <div class="text-3xl font-bold">500+</div>
                                    <div class="text-sm text-green-100">Golfers</div>
                                </div>
                                <div>
                                    <div class="text-3xl font-bold">1000+</div>
                                    <div class="text-sm text-green-100">Sessions</div>
                                </div>
                                <div>
                                    <div class="text-3xl font-bold">50</div>
                                    <div class="text-sm text-green-100">States</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Mission Section --}}
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-3xl mx-auto text-center mb-16">
                <span class="text-green-600 font-semibold text-sm uppercase tracking-wider">Our Mission</span>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-6">Making Golf More Accessible</h2>
                <p class="text-lg text-gray-600 leading-relaxed">
                    We believe that playing alongside professional golfers shouldn't be reserved for the elite few. Our platform democratizes access to professional golf experiences, creating opportunities for learning, networking, and pure enjoyment of the game.
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center p-8 bg-gray-50 rounded-2xl">
                    <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Community</h3>
                    <p class="text-gray-600">Building meaningful connections between golf enthusiasts and professionals across the country.</p>
                </div>

                <div class="text-center p-8 bg-gray-50 rounded-2xl">
                    <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Education</h3>
                    <p class="text-gray-600">Providing unique learning opportunities that go beyond traditional lessons.</p>
                </div>

                <div class="text-center p-8 bg-gray-50 rounded-2xl">
                    <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Innovation</h3>
                    <p class="text-gray-600">Using technology to create seamless experiences for both golfers and professionals.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Values Section --}}
    <section class="pb-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">Our Values</span>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-4">What We Stand For</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Trust & Safety</h3>
                            <p class="text-gray-600">Every golfer is verified, every transaction is secure, and every interaction is protected. We prioritize the safety and trust of our community.</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <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="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Excellence</h3>
                            <p class="text-gray-600">We're committed to delivering exceptional experiences. From our platform to our support, we strive for excellence in everything we do.</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <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="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>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Passion</h3>
                            <p class="text-gray-600">We love golf, and it shows. Our team is dedicated to growing the game and creating opportunities for people to fall in love with it too.</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Inclusivity</h3>
                            <p class="text-gray-600">Golf is for everyone. We're breaking down barriers and making professional golf experiences accessible to players of all backgrounds and skill levels.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Team Section (Optional placeholder) --}}
    <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">Our Team</span>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-4">The People Behind The Platform</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">A dedicated team of golf enthusiasts and tech experts working to transform how people experience the game.</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                <div class="text-center">
                    <div class="w-32 h-32 bg-gradient-to-br from-green-400 to-emerald-600 rounded-full mx-auto mb-6 flex items-center justify-center">
                        <span class="text-4xl text-white font-bold">JD</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900">John Doe</h3>
                    <p class="text-green-600 font-medium mb-2">Founder & CEO</p>
                    <p class="text-gray-600 text-sm">Former PGA Tour player with a passion for growing the game of golf.</p>
                </div>

                <div class="text-center">
                    <div class="w-32 h-32 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full mx-auto mb-6 flex items-center justify-center">
                        <span class="text-4xl text-white font-bold">JS</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900">Jane Smith</h3>
                    <p class="text-green-600 font-medium mb-2">Head of Operations</p>
                    <p class="text-gray-600 text-sm">10+ years in hospitality ensuring exceptional experiences.</p>
                </div>

                <div class="text-center">
                    <div class="w-32 h-32 bg-gradient-to-br from-purple-400 to-pink-600 rounded-full mx-auto mb-6 flex items-center justify-center">
                        <span class="text-4xl text-white font-bold">MJ</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900">Mike Johnson</h3>
                    <p class="text-green-600 font-medium mb-2">CTO</p>
                    <p class="text-gray-600 text-sm">Tech veteran building platforms that connect communities.</p>
                </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-4xl font-bold mb-6">Join Our Growing Community</h2>
            <p class="text-xl mb-8 opacity-90">Whether you're looking to play with a pro or share your expertise, we'd love to have you.</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
                    <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.contact') }}" 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">
                    Contact Us
                </a>
            </div>
        </div>
    </section>
@endsection