@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-16 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-4xl text-cream font-bold mb-2" data-aos="fade-up">FAQ</h1>
    <p class="text-cream/60" data-aos="fade-up" data-aos-delay="100">Frequently Asked Questions</p>
    <div class="section-divider mt-4"></div>
</div>
<div class="max-w-3xl mx-auto px-4 py-16">
    @if(empty($faqs))
    <div class="text-center py-10 text-cream/50">No FAQs available yet.</div>
    @else
    <div class="space-y-4">
        @foreach($faqs as $i => $faq)
        <div class="glass-card overflow-hidden" x-data="{ open: {{ $i===0?'true':'false' }} }" data-aos="fade-up" data-aos-delay="{{ $i*80 }}">
            <button @click="open = !open" class="w-full flex items-center justify-between px-6 py-5 text-left">
                <span class="font-playfair text-cream text-lg font-semibold">{{ $faq['question'] }}</span>
                <i class="fas fa-chevron-down text-gold transition-transform" :class="open ? 'rotate-180':''"></i>
            </button>
            <div x-show="open" x-transition class="px-6 pb-5">
                <p class="text-cream/70 text-sm leading-relaxed">{{ $faq['answer'] }}</p>
            </div>
        </div>
        @endforeach
    </div>
    @endif
    <div class="mt-12 glass-card p-8 text-center">
        <h3 class="font-playfair text-cream text-xl font-bold mb-3">Still have questions?</h3>
        <p class="text-cream/60 text-sm mb-6">Our team is happy to help you with any queries.</p>
        <div class="flex gap-4 justify-center">
            <a href="{{ route('contact.index') }}" class="btn-gold px-8 py-3 text-sm">Contact Us</a>
            <a href="https://wa.me/{{ env('WHATSAPP_NUMBER') }}" target="_blank" class="btn-outline-gold px-8 py-3 text-sm">
                <i class="fab fa-whatsapp mr-1"></i>WhatsApp
            </a>
        </div>
    </div>
</div>
</div>
@endsection