@extends('layouts.app')

@section('title', $pageTitle . ' - ERAS')

@section('content')
<main class="relative">
    {{-- Hero Section --}}
    <section class="py-16 lg:py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">
                    Tax Education & Awareness Centre
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600">
                    Gain access to education and awareness materials, interact with us, submit ideas and obtain the help and assistance you need to work with us in making Edo state greater.
                </p>
            </div>
        </div>
    </section>

    {{-- Content Section --}}
    <section class="pb-16 lg:pb-24">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            {{-- Section Header with Back Button --}}
            <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6 mb-8">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-emerald-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>
                        <div class="flex-1">
                            <h2 class="text-xl font-semibold text-gray-900">{{ $sectionData->AwarenessCategoryName ?? $pageTitle }}</h2>
                            <p class="text-sm text-gray-600 mt-1">{{ $sectionData->SectionDescription ?? 'Learn more about this topic.' }}</p>
                        </div>
                    </div>
                    <a href="{{ route('public.awareness') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                        Back
                    </a>
                </div>
            </div>

            {{-- FAQ Content --}}
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
                {{-- FAQ List (Left Panel) --}}
                <div class="lg:col-span-2">
                    <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6 sticky top-24">
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">FAQ's</h3>
                        @if(!empty($faqs) && count($faqs) > 0)
                            <nav class="space-y-1">
                                @foreach($faqs as $index => $faq)
                                    <button
                                        onclick="showFaq({{ $index }})"
                                        class="faq-nav-item w-full flex items-center gap-2 text-sm text-left py-2 px-3 rounded-lg transition {{ $index === 0 ? 'bg-emerald-50 text-emerald-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}"
                                        data-faq-index="{{ $index }}"
                                    >
                                        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                        <span>{{ $faq->FAQTitle ?? 'FAQ ' . ($index + 1) }}</span>
                                    </button>
                                @endforeach
                            </nav>
                        @else
                            <p class="text-sm text-gray-500">FAQs are coming soon.<br/>Please check back later.</p>
                        @endif
                    </div>
                </div>

                {{-- FAQ Content (Right Panel) --}}
                <div class="lg:col-span-3">
                    @if(!empty($faqs) && count($faqs) > 0)
                        @foreach($faqs as $index => $faq)
                            <div
                                id="faq-content-{{ $index }}"
                                class="faq-content-panel bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-8 {{ $index === 0 ? '' : 'hidden' }}"
                            >
                                <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ $faq->FAQTitle ?? 'FAQ ' . ($index + 1) }}</h3>
                                <div class="prose prose-gray max-w-none text-gray-600">
                                    {!! $faq->FAQText ?? '<p>Content coming soon.</p>' !!}
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-8">
                            <p class="text-gray-500">FAQs are coming soon. Please check back later.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</main>

<script>
function showFaq(index) {
    // Hide all content panels
    document.querySelectorAll('.faq-content-panel').forEach(panel => {
        panel.classList.add('hidden');
    });

    // Remove active state from all nav items
    document.querySelectorAll('.faq-nav-item').forEach(item => {
        item.classList.remove('bg-emerald-50', 'text-emerald-700', 'font-medium');
        item.classList.add('text-gray-600', 'hover:bg-gray-50', 'hover:text-gray-900');
    });

    // Show selected content panel
    const selectedPanel = document.getElementById('faq-content-' + index);
    if (selectedPanel) {
        selectedPanel.classList.remove('hidden');
    }

    // Add active state to selected nav item
    const selectedNav = document.querySelector('.faq-nav-item[data-faq-index="' + index + '"]');
    if (selectedNav) {
        selectedNav.classList.remove('text-gray-600', 'hover:bg-gray-50', 'hover:text-gray-900');
        selectedNav.classList.add('bg-emerald-50', 'text-emerald-700', 'font-medium');
    }
}
</script>
@endsection