@extends('layouts.public')

@push('styles')
<style>
    [x-cloak] { display: none !important; }
    
    /* For screens 356px and smaller */
    @media screen and (max-width: 356px) {
        .email-small-font {
            font-size: 15px !important;
        }
    }
    @media screen and (max-width: 768px) {
        .resource {
            justify-self: center!important
        }
    }
</style>
@endpush

@section('title', 'Frequently Asked Questions')
@section('meta_description', 'Find answers to common questions about booking golf sessions with professionals on The Fair Way Social. Learn about payments, cancellations, and more.')

@section('content')
    {{-- Hero Section --}}
    <section class="bg-gradient-to-br from-green-50 via-emerald-50 to-blue-50 py-16 lg:py-20">
        <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">
                Help Center
            </span>
            <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 mb-6">
                Frequently Asked <span class="text-green-600">Questions</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                Find answers to the most common questions about The Fair Way Social. Can't find what you're looking for? Contact our support team.
            </p>
        </div>
    </section>

    {{-- FAQ Content --}}
    <section class="pt-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            @foreach($faqs as $category => $questions)
                <div class="mb-12">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">{{ $category }}</h2>

                    <div class="space-y-4" x-data="{ openQuestion: null }">
                        @foreach($questions as $index => $faq)
                            @php $questionId = Str::slug($category) . '-' . $index; @endphp
                            <div class="border border-gray-200 rounded-xl overflow-hidden">
                                <button
                                    @click="openQuestion = openQuestion === '{{ $questionId }}' ? null : '{{ $questionId }}'"
                                    class="w-full px-6 py-5 text-left flex items-center justify-between bg-white hover:bg-gray-50 transition"
                                >
                                    <span class="font-semibold text-gray-900 pr-4">{{ $faq['question'] }}</span>
                                    <svg
                                        class="w-5 h-5 text-gray-500 flex-shrink-0 transform transition-transform duration-200"
                                        :class="{ 'rotate-180': openQuestion === '{{ $questionId }}' }"
                                        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="openQuestion === '{{ $questionId }}'"
                                    x-collapse
                                    x-cloak
                                >
                                    <div class="px-6 pb-5 text-gray-600 leading-relaxed border-t border-gray-100 pt-4">
                                        {{ $faq['answer'] }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Still Have Questions --}}
    <section class="py-0 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-3xl shadow-lg p-8 md:p-12 text-center">
                <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Still Have Questions?</h2>
                <p class="text-gray-600 mb-8 max-w-xl mx-auto">
                    Can't find the answer you're looking for? Our support team is here to help. Reach out and we'll get back to you within 24 hours.
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="{{ route('page.contact') }}" class="bg-green-600 text-white px-8 py-3 rounded-full hover:bg-green-700 transition font-semibold inline-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="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>
                        Contact Support
                    </a>
                    <a href="mailto:support@thefairwaysocial.com" class="email-small-font border-2 border-gray-300 text-gray-700 px-8 py-3 rounded-full hover:border-gray-400 transition font-semibold inline-flex items-center justify-center">
                        support@thefairwaysocial.com
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- Quick Links --}}
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-16 text-center">Helpful Resources</h2>
            <div class="grid md:grid-cols-4 lg:grid-cols-4 grid-cols-2 gap-6 text-center md:text-left">
                <a href="{{ route('page.how-it-works') }}" class="bg-gray-50 rounded-xl px-6 hover:bg-gray-100 transition group">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center resource mb-4 group-hover:bg-green-200 transition">
                        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">How It Works</h3>
                    <p class="text-sm text-gray-600">Learn the basics of booking and playing</p>
                </a>

                <a href="{{ route('page.terms') }}" class="bg-gray-50 rounded-xl px-6 hover:bg-gray-100 transition group">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center resource mb-4 group-hover:bg-blue-200 transition">
                        <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Terms of Service</h3>
                    <p class="text-sm text-gray-600">Read our terms and conditions</p>
                </a>

                <a href="{{ route('page.refund') }}" class="bg-gray-50 rounded-xl px-6 hover:bg-gray-100 transition group">
                    <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center resource mb-4 group-hover:bg-purple-200 transition">
                        <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 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Refund Policy</h3>
                    <p class="text-sm text-gray-600">Understand our cancellation terms</p>
                </a>

                <a href="{{ route('page.trust') }}" class="bg-gray-50 rounded-xl px-6 hover:bg-gray-100 transition group">
                    <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center resource mb-4 group-hover:bg-yellow-200 transition">
                        <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="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>
                    <h3 class="font-semibold text-gray-900 mb-2">Trust & Safety</h3>
                    <p class="text-sm text-gray-600">How we keep you safe</p>
                </a>
            </div>
        </div>
    </section>
@endsection

@push('styles')
<style>
    [x-cloak] { display: none !important; }
</style>
@endpush