@extends('layouts.app')

@section('title', 'Resources & Contact')

@section('content')
<!-- Page Header -->
<section class="bg-gradient-to-r from-primary-600 to-primary-700 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-4xl font-bold text-white">Resources & Contact</h1>
        <p class="text-primary-100 mt-2">Downloads, FAQs, and contact information</p>
    </div>
</section>

<section class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Sidebar -->
            <aside class="lg:w-64 flex-shrink-0">
                <nav class="bg-white rounded-xl shadow-sm p-4 sticky top-20">
                    <h3 class="font-semibold text-gray-900 mb-3">Navigation</h3>
                    <ul class="space-y-1">
                        <li>
                            <a href="{{ route('resources', 'downloads') }}" class="block px-3 py-2 rounded-lg text-sm {{ $slug === 'downloads' ? 'bg-primary-50 text-primary-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">
                                Downloads
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('resources', 'faq') }}" class="block px-3 py-2 rounded-lg text-sm {{ $slug === 'faq' ? 'bg-primary-50 text-primary-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">
                                FAQ
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('contact') }}" class="block px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </nav>
            </aside>

            <!-- Main Content -->
            <main class="flex-1 min-w-0">
                @if($slug === 'faq')
                <!-- FAQ Section -->
                <div class="bg-white rounded-xl shadow-sm p-6 lg:p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>
                    <div class="space-y-4" x-data="{ openFaq: null }">
                        @forelse($faqs as $index => $faq)
                        <div class="border rounded-lg">
                            <button @click="openFaq = openFaq === {{ $index }} ? null : {{ $index }}" class="w-full px-4 py-3 text-left flex justify-between items-center">
                                <span class="font-medium text-gray-900">{{ $faq->question }}</span>
                                <svg class="w-5 h-5 text-gray-500 transition-transform" :class="{ 'rotate-180': openFaq === {{ $index }} }" 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 === {{ $index }}" x-cloak class="px-4 pb-4">
                                <div class="prose prose-sm prose-primary max-w-none text-gray-600">
                                    {!! $faq->answer !!}
                                </div>
                            </div>
                        </div>
                        @empty
                        <p class="text-gray-500">FAQ coming soon...</p>
                        @endforelse
                    </div>
                </div>
                @else
                <!-- Downloads Section -->
                <div class="bg-white rounded-xl shadow-sm p-6 lg:p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Downloads</h2>
                    <div class="space-y-4">
                        @forelse($downloads as $download)
                        <div class="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                </div>
                                <div>
                                    <h3 class="font-medium text-gray-900">{{ $download->title }}</h3>
                                    @if($download->description)
                                    <p class="text-sm text-gray-500">{{ $download->description }}</p>
                                    @endif
                                </div>
                            </div>
                            <a href="{{ route('download', $download->id) }}" class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition flex items-center gap-2">
                                <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                Download
                            </a>
                        </div>
                        @empty
                        <p class="text-gray-500 text-center py-8">No downloads available yet.</p>
                        @endforelse
                    </div>
                </div>
                @endif
            </main>
        </div>
    </div>
</section>
@endsection
