@extends('layouts.app')

@section('title', 'Frequently Asked Questions | Kevron Suites')

@push('scripts')
@php
  $faqList = [];
  foreach($categories as $category) {
    foreach($category->faqs as $faq) {
      $faqList[] = [
        '@type' => 'Question',
        'name' => $faq->question,
        'acceptedAnswer' => [
          '@type' => 'Answer',
          'text' => $faq->answer
        ]
      ];
    }
  }
@endphp
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": {!! json_encode($faqList, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
}
</script>
@endpush

@section('content')
<section class="section-soft-blue py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Help Center</span>
            <h2>Frequently Asked Questions</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2">
                Have questions about your stay, pricing rules, or airport pickup? Find answers to our most popular questions here.
            </p>
        </div>

        <!-- FAQ Categories & Items Accordions (Using Preline UI styling wired with Alpine.js) -->
        <div class="space-y-8" x-data="{ activeFaq: null }">
            @foreach($categories as $category)
            @if($category->faqs->count() > 0)
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-6 shadow-sm">
                <div class="flex items-center space-x-2.5 mb-6 border-b border-slate-100 dark:border-slate-800 pb-3">
                    <span class="text-amber-500 font-bold uppercase tracking-wider text-xs">{{ $category->name }}</span>
                </div>
                
                <div class="space-y-4">
                    @foreach($category->faqs as $faq)
                    <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4 last:border-b-0 last:pb-0">
                        <button @click="activeFaq = activeFaq === {{ $faq->id }} ? null : {{ $faq->id }}" 
                                class="w-full flex items-center justify-between text-left focus:outline-none py-2 text-xs sm:text-sm font-bold text-slate-900 dark:text-white hover:text-blue-900 dark:hover:text-cyan-400 transition-colors">
                            <span>{{ $faq->question }}</span>
                            <svg class="w-4 h-4 transform transition-transform duration-200" :class="{'rotate-180': activeFaq === {{ $faq->id }}}" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        
                        <div x-show="activeFaq === {{ $faq->id }}" 
                             x-transition:enter="transition ease-out duration-200"
                             class="mt-2 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium pl-1">
                            {{ $faq->answer }}
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
            @endforeach
        </div>

        <!-- Contact CTA -->
        <div class="mt-12 text-center bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-6 shadow-sm max-w-md mx-auto">
            <h4 class="text-xs font-bold text-amber-500 uppercase tracking-widest mb-2">Still need help?</h4>
            <p class="text-[11px] text-slate-400 mb-4 font-medium">Our executive concierge team is available 24/7 to answer your enquiries.</p>
            <a href="{{ url('/contact') }}" class="btn-pill btn-primary text-xs font-bold px-6 py-2">
                Contact Concierge
            </a>
        </div>

    </div>
</section>
@endsection