@extends('layouts.app')

@section('content')
<main class="flex-1 pt-24">
    <!-- Hero Section -->
    <section class="bg-gray-50 py-16 md:py-20">
        <div class="container mx-auto px-4 md:px-6">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4 text-gray-900">
                    Frequently Asked Questions
                </h1>
                <p class="text-gray-600 text-lg mb-8">
                    Find answers to common questions about Elderly Care Connect and how you can make a difference.
                </p>
                
                <x-sections.faq-search route="faqs" />
                
                @if(!empty($search))
                <div class="mt-6 text-left">
                    <div class="inline-flex items-center bg-primary/10 text-primary rounded-full px-4 py-2 text-sm">
                        <span>Search results for: "{{ $search }}"</span>
                        <a href="{{ route('faqs') }}" class="ml-2 hover:text-primary-dark">
                            <x-ui.icon name="x" class="h-4 w-4" />
                        </a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>
    
    @if(empty($search))
    <!-- FAQ Categories -->
    <section class="py-16">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12">
                <h2 class="text-2xl font-bold text-gray-900">Browse by Category</h2>
                <p class="text-gray-600 mt-2">Select a category to find specific information</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($categories as $category)
                    <x-sections.faq-category
                        icon="{{ $category['icon'] }}"
                        title="{{ $category['title'] }}"
                        description="{{ $category['description'] }}"
                        id="{{ $category['id'] }}"
                    />
                @endforeach
            </div>
        </div>
    </section>
    @endif
    
    <!-- FAQ Accordions -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 md:px-6">
            @forelse($faqs as $categoryId => $items)
                <div id="{{ $categoryId }}" class="pt-16 -mt-16 scroll-mt-24">
                    <h2 class="text-2xl font-bold mb-6 text-gray-900">{{ $categories[array_search($categoryId, array_column($categories, 'id'))]['title'] }}</h2>
                    
                    <div class="w-full bg-white rounded-lg overflow-hidden shadow-sm mb-12">
                        @foreach($items as $index => $faq)
                            <x-ui.accordion-simple id="{{ $categoryId }}-{{ $index }}" title="{{ $faq['question'] }}">
                                <p class="text-gray-700 leading-relaxed">
                                    {{ $faq['answer'] }}
                                </p>
                            </x-ui.accordion-simple>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="text-center py-12">
                    <div class="inline-flex justify-center items-center w-16 h-16 bg-gray-100 rounded-full mb-4">
                        <x-ui.icon name="search" class="h-8 w-8 text-gray-400" />
                    </div>
                    <h3 class="text-xl font-semibold mb-2">No results found</h3>
                    <p class="text-gray-600 mb-6">We couldn't find any FAQs matching "{{ $search }}"</p>
                    <a href="{{ route('faqs') }}" class="bg-primary hover:bg-primary-dark text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        View all FAQs
                    </a>
                </div>
            @endforelse
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="py-16">
        <div class="container mx-auto px-4 md:px-6">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-2xl font-bold mb-4 text-gray-900">Still have questions?</h2>
                <p class="text-gray-600 mb-8">
                    If you couldn't find the answer to your question, please contact our support team.
                </p>
                <a href="{{ route('contact') }}" class="bg-primary hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-md transition-colors duration-200 inline-flex items-center">
                    Contact Support
                    <x-ui.icon name="arrow-right" class="h-4 w-4 ml-2" />
                </a>
            </div>
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
    // Function to toggle accordion content
    function toggleAccordion(id) {
        const content = document.getElementById('content-' + id);
        const icon = document.getElementById('icon-' + id);
        const button = document.getElementById('heading-' + id);
        
        if (content.classList.contains('hidden')) {
            // Open this accordion
            content.classList.remove('hidden');
            icon.classList.add('rotate-180');
            button.setAttribute('aria-expanded', 'true');
        } else {
            // Close this accordion
            content.classList.add('hidden');
            icon.classList.remove('rotate-180');
            button.setAttribute('aria-expanded', 'false');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                    
                    // Update URL without page reload
                    history.pushState(null, null, targetId);
                }
            });
        });
        
        // Check if URL has hash on page load and scroll to it
        if (window.location.hash) {
            const targetElement = document.querySelector(window.location.hash);
            if (targetElement) {
                setTimeout(() => {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }, 300);
            }
        }
    });
</script>
@endpush