@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('faq_meta_title', 'FAQ - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('faq_meta_description', 'Frequently asked questions about Faith & Future Summit.'))
@section('breadcrumbs', '[{"name":"FAQ"}]')

@php $faqs = \App\Models\Faq::active()->get() @endphp
@section('schema')
{!! \App\Services\SeoService::faqSchema($faqs) !!}
@endsection

@section('content')
<section class="max-w-3xl mx-auto px-margin-mobile py-stack-xl">
  <div class="text-center reveal mb-12">
    <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Have Questions?</span>
    <x-heading key="faq_heading" tag="h1" default="Frequently Asked Questions" class="font-headline-lg text-white" />
  </div>
  <div class="flex flex-col gap-3 reveal" id="faq-container">
    @foreach($faqs as $faq)
    <div class="faq-item bg-[#1A1A1C] border rounded-[10px] py-[18px] px-5 cursor-pointer transition-all duration-200" style="border-color:rgba(255,255,255,{{ $loop->first ? '0.12' : '0.06' }});box-shadow:0 {{ $loop->first ? '4px 12px' : '2px 8px' }} rgba(0,0,0,{{ $loop->first ? '0.2' : '0.15' }});">
      <div class="faq-header flex justify-between items-center font-normal text-[0.9rem] text-white" onclick="toggleFaq(this)">
        <span>{{ $faq->question }}</span>
        <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="{{ $loop->first ? '18 15 12 9 6 15' : '6 9 12 15 18 9' }}"></polyline></svg>
      </div>
      <div class="faq-answer mt-3 text-[0.9rem] text-[#888] leading-[1.6]" style="display:{{ $loop->first ? 'block' : 'none' }};">{{ $faq->answer }}</div>
    </div>
    @endforeach
  </div>
</section>

{{-- 1. FAQ Intro + Quick Links --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="grid lg:grid-cols-5 gap-10 items-center rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <div class="lg:col-span-3">
      <h2 class="font-headline-lg text-headline-lg text-white mb-3">Frequently Asked Questions</h2>
      <p class="text-on-surface-variant text-[17px] leading-[1.7] mb-6">Answers about tickets, speakers, past summits, media, and participation.</p>
      <div class="flex flex-wrap gap-3 mb-6">
        <a href="#faq-container" class="inline-flex items-center px-5 py-2.5 rounded-full border border-primary/30 text-primary font-bold text-sm hover:bg-primary/10 transition-all">Registration</a>
        <a href="#faq-container" class="inline-flex items-center px-5 py-2.5 rounded-full border border-primary/30 text-primary font-bold text-sm hover:bg-primary/10 transition-all">Speakers</a>
      </div>
      <a href="{{ url('/contact') }}" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl font-bold text-sm hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Contact Support <span class="material-symbols-outlined text-sm">arrow_forward</span></a>
    </div>
    <div class="lg:col-span-2 hidden sm:block">
      <div class="rounded-2xl border border-border-subtle bg-surface-container h-[250px] flex items-center justify-center">
        <div class="text-center p-6">
          <span class="material-symbols-outlined text-6xl text-muted/30 mb-3 block">quiz</span>
          <p class="text-muted/50 text-sm">FAQ Visual</p>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- 2. FAQ Categories --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <h2 class="font-headline-lg text-headline-lg text-white mb-3 text-center">FAQ Categories</h2>
    <p class="text-on-surface-variant text-center max-w-2xl mx-auto mb-10">Browse questions by topic. Click a category to jump to relevant FAQs.</p>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      @foreach([['icon'=>'confirmation_number','name'=>'Registration'],['icon'=>'event','name'=>'Upcoming Events'],['icon'=>'history','name'=>'Past Summits'],['icon'=>'group','name'=>'Speakers'],['icon'=>'campaign','name'=>'Media'],['icon'=>'handshake','name'=>'Participation'],['icon'=>'support','name'=>'General Support']] as $cat)
      <a href="#faq-container" class="group flex flex-col items-center p-5 rounded-2xl border border-border-subtle bg-surface-container hover:border-primary/50 transition-all text-center">
        <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary transition-colors">
          <span class="material-symbols-outlined text-primary group-hover:text-white text-lg">{{ $cat['icon'] }}</span>
        </div>
        <span class="text-white font-bold text-sm group-hover:text-primary transition-colors">{{ $cat['name'] }}</span>
        <span class="text-xs text-muted mt-1">Category</span>
      </a>
      @endforeach
    </div>
  </div>
</section>

{{-- 3. Still Need Help? --}}
<section class="max-w-3xl mx-auto px-margin-mobile pb-stack-xl reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-10 md:p-14 text-center">
    <span class="material-symbols-outlined text-5xl text-primary mb-4">help</span>
    <h2 class="font-headline-lg text-headline-lg text-white mb-3">Still need help?</h2>
    <p class="text-on-surface-variant mb-8 max-w-md mx-auto">Our support team is ready to assist you with any questions or concerns.</p>
    <a href="{{ url('/contact') }}" class="inline-flex items-center gap-2 text-white px-8 py-4 rounded-xl font-bold transition-all" style="background:#1A1A1C;border:1px solid rgba(255,255,255,0.1)" onmouseover="this.style.borderColor='rgba(37,99,255,0.5)';this.style.background='rgba(37,99,255,0.1)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.1)';this.style.background='#1A1A1C'">Contact Support <span class="material-symbols-outlined">arrow_forward</span></a>
  </div>
</section>

@endsection