<x-main-inner-page 
    category="Contact" title="Frequently Asked Questions" 
    subtitle="Find answers to common queries regarding conference registration, submissions, and attendance."
>
<div class="max-w-4xl mx-auto">
    
    <div class="mb-10 text-center">
        <div class="inline-flex items-center gap-2 bg-brand-50 text-brand-600 font-bold px-4 py-2 rounded-lg mb-4">
            <i class="fas fa-search"></i> General Guidelines
        </div>
        <h2 class="text-3xl font-bold text-slate-900">How can we help you?</h2>
    </div>

    <div class="space-y-4" x-data="{ selected: 1 }">
        <!-- FAQ 1 -->
        <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300">
            <button @click="selected = selected === 1 ? null : 1" class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none bg-slate-50 hover:bg-slate-100 transition-colors">
                <span class="font-bold text-lg text-slate-900">How do I submit my abstract?</span>
                <i class="fas fa-chevron-down text-brand-500 transition-transform duration-300" :class="{ 'rotate-180': selected === 1 }"></i>
            </button>
            <div class="px-6 py-5 border-t border-slate-100" x-show="selected === 1" x-collapse>
                <p class="text-slate-600 text-sm leading-relaxed">You can submit your abstract via our online submission portal on the specific conference page. Ensure it follows our formatting guidelines (250-300 words). If you encounter any technical issues, you can also email the abstract directly to the conference secretariat email address mentioned on the specific conference site.</p>
            </div>
        </div>

        <!-- FAQ 2 -->
        <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300">
            <button @click="selected = selected === 2 ? null : 2" class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none bg-slate-50 hover:bg-slate-100 transition-colors">
                <span class="font-bold text-lg text-slate-900">Is the registration fee refundable?</span>
                <i class="fas fa-chevron-down text-brand-500 transition-transform duration-300" :class="{ 'rotate-180': selected === 2 }"></i>
            </button>
            <div class="px-6 py-5 border-t border-slate-100" x-show="selected === 2" x-collapse>
                <p class="text-slate-600 text-sm leading-relaxed">Registration fees are generally non-refundable. However, in cases of extreme emergencies or visa rejections (with official proof), you may request a partial refund or transfer your registration to a co-author or a future GARI conference within the same calendar year. Please refer to our detailed cancellation policy.</p>
            </div>
        </div>

        <!-- FAQ 3 -->
        <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300">
            <button @click="selected = selected === 3 ? null : 3" class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none bg-slate-50 hover:bg-slate-100 transition-colors">
                <span class="font-bold text-lg text-slate-900">When will the conference proceedings be published?</span>
                <i class="fas fa-chevron-down text-brand-500 transition-transform duration-300" :class="{ 'rotate-180': selected === 3 }"></i>
            </button>
            <div class="px-6 py-5 border-t border-slate-100" x-show="selected === 3" x-collapse>
                <p class="text-slate-600 text-sm leading-relaxed">The Book of Abstracts is distributed during the conference. The full conference proceedings, complete with DOIs and indexing, are typically published online within 4 to 6 weeks after the conference concludes. Authors will receive an email notification once the proceedings are live in our Research Library.</p>
            </div>
        </div>

        <!-- FAQ 4 -->
        <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300">
            <button @click="selected = selected === 4 ? null : 4" class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none bg-slate-50 hover:bg-slate-100 transition-colors">
                <span class="font-bold text-lg text-slate-900">Do you offer visa invitation letters?</span>
                <i class="fas fa-chevron-down text-brand-500 transition-transform duration-300" :class="{ 'rotate-180': selected === 4 }"></i>
            </button>
            <div class="px-6 py-5 border-t border-slate-100" x-show="selected === 4" x-collapse>
                <p class="text-slate-600 text-sm leading-relaxed">Yes. An official Visa Invitation Letter will be issued only after your abstract has been accepted and you have completed the full registration payment. You can request the letter through the "Visa Apply" section under our Contact menu.</p>
            </div>
        </div>
    </div>

    <div class="mt-12 bg-brand-50 border border-brand-100 rounded-2xl p-8 text-center flex flex-col items-center">
        <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm mb-4">
            <i class="fas fa-headset text-brand-600 text-2xl"></i>
        </div>
        <h3 class="font-bold text-lg text-slate-900 mb-2">Still have questions?</h3>
        <p class="text-slate-600 text-sm mb-6 max-w-md mx-auto">If you couldn't find the answer to your question, our support team is ready to help.</p>
        <a href="{{ route('main.page', ['category' => 'contact', 'page' => 'contact-us']) }}" class="bg-brand-600 hover:bg-brand-700 text-white font-bold px-8 py-3 rounded-xl transition-all shadow-md">Contact Support</a>
    </div>

</div>
</x-main-inner-page>