@extends('layouts.app')

@section('title', 'Frequently Asked Questions')

@section('content')
<div class="container mx-auto px-4 py-12">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-center mb-4">Frequently Asked Questions</h1>
        <p class="text-gray-600 text-center mb-10">This Frequently Asked Questions might help you to answer your general questions about the services. For further information please contact us.</p>
        
        <div class="space-y-4">
            <!-- Item 1 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="faq-question p-5 cursor-pointer flex justify-between items-center bg-gray-100 hover:bg-gray-200 transition-colors">
                    <span class="font-medium text-gray-800">Why is financial audit important?</span>
                    <span class="chevron text-gray-500">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-5 text-gray-600">
                        <p>Because it provides credibility to financial statements for users (other than those responsible for preparing them) and ensures consistent presentation according to accounting standards.</p>
                    </div>
                </div>
            </div>

            <!-- Item 2 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="faq-question p-5 cursor-pointer flex justify-between items-center bg-gray-100 hover:bg-gray-200 transition-colors">
                    <span class="font-medium text-gray-800">Do we have to be audited?</span>
                    <span class="chevron text-gray-500">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-5 text-gray-600">
                        <p>No, but in some cases, regulations or stakeholders may require an audit.</p>
                    </div>
                </div>
            </div>

            <!-- Item 3 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="faq-question p-5 cursor-pointer flex justify-between items-center bg-gray-100 hover:bg-gray-200 transition-colors">
                    <span class="font-medium text-gray-800">Is there any way to obtain strong and reliable financial information without engaging the auditor?</span>
                    <span class="chevron text-gray-500">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-5 text-gray-600">
                        <p>Yes, through internal controls and independent reviews, but it may not have the same credibility as an official audit.</p>
                    </div>
                </div>
            </div>

            <!-- Item 4 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="faq-question p-5 cursor-pointer flex justify-between items-center bg-gray-100 hover:bg-gray-200 transition-colors">
                    <span class="font-medium text-gray-800">How long does it take to complete the audit service normally?</span>
                    <span class="chevron text-gray-500">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-5 text-gray-600">
                        <p>It typically takes 2 to 6 weeks depending on the size and complexity of the company.</p>
                    </div>
                </div>
            </div>

            <!-- Item 5 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="faq-question p-5 cursor-pointer flex justify-between items-center bg-gray-100 hover:bg-gray-200 transition-colors">
                    <span class="font-medium text-gray-800">What is the benefit of non-assurance service?</span>
                    <span class="chevron text-gray-500">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-5 text-gray-600">
                        <p>Non-assurance services provide insights and improvements without the formality and cost of a full audit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const faqItems = document.querySelectorAll('.faq-item');
    
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        question.addEventListener('click', () => {
            // Close all other items
            faqItems.forEach(i => {
                if (i !== item) i.classList.remove('active');
            });
            
            // Toggle current item
            item.classList.toggle('active');
        });
    });
});
</script>

<style>
.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-item.active .chevron {
    transform: rotate(180deg);
}
</style>
@endsection