@extends('public.layouts.guest')

@section('nav_explore', 'text-teal-700 font-semibold')
@section('nav_faqs', 'text-teal-700 font-semibold bg-teal-50/50')
@section('title', 'FAQ — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('meta_description', 'Answers to common questions about staying at ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO') . ' — check-in and check-out, payments, policies and more.')

@if($faqs->count())
@push('jsonld')
<script type="application/ld+json">
{!! json_encode([
    '@context'   => 'https://schema.org',
    '@type'      => 'FAQPage',
    'mainEntity' => $faqs->map(fn($f) => [
        '@type'          => 'Question',
        'name'           => $f->question,
        'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f->answer],
    ])->all(),
], JSON_UNESCAPED_UNICODE) !!}
</script>
@endpush
@endif

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Help Center</p>
        <h1 class="text-4xl font-bold text-white">Frequently Asked Questions</h1>
        <p class="text-teal-200 mt-3 text-sm">Everything you need to know before your stay.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        @if($faqs->isEmpty())
        <div class="text-center text-gray-400 text-sm py-12">No FAQs published yet. Please check back soon.</div>
        @else
        @php $grouped = $faqs->groupBy(fn($f) => $f->category ?: 'General'); @endphp
        <div class="space-y-8">
            @foreach($grouped as $category => $items)
            <div>
                @if($grouped->count() > 1)
                <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ $category }}</h2>
                @endif
                <div class="space-y-3">
                    @foreach($items as $faq)
                    <div x-data="{ open: false }" class="bg-white rounded-2xl border-[0.5px] border-gray-200 overflow-hidden">
                        <button type="button" @click="open = !open"
                                class="w-full flex items-center justify-between gap-4 px-5 py-4 text-left hover:bg-gray-50/50 transition-colors">
                            <span class="font-semibold text-gray-900 text-sm">{{ $faq->question }}</span>
                            <svg :class="open ? 'rotate-180' : ''" class="w-4 h-4 text-gray-400 flex-shrink-0 transition-transform" 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="open" x-cloak x-transition.opacity class="px-5 pb-5 -mt-1">
                            <p class="text-sm text-gray-600 whitespace-pre-line leading-relaxed">{{ $faq->answer }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <div class="mt-10 text-center">
            <p class="text-sm text-gray-500 mb-3">Still have questions?</p>
            <a href="{{ route('public.contact') }}"
               class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-6 py-3 rounded-xl transition-colors">
                Contact Us
            </a>
        </div>
    </div>
</div>

@endsection