export default function ContactFAQ() {
    return (
        <section className="section-dark py-20 px-4">
            <div className="max-w-3xl mx-auto">
                <div className="text-center mb-12 gsap-fade-up">
                    <h2 className="text-3xl font-bold text-light-surface">
                        Frequently Asked Questions
                    </h2>
                    <p className="text-text-light-muted mt-4 text-lg">
                        Quick answers to questions you may have.
                    </p>
                </div>
                <div className="flex flex-col gap-4 gsap-stagger">
                    {/* FAQ Item 1 */}
                    <details className="group card-glass-dark rounded-xl overflow-hidden">
                        <summary className="flex justify-between items-center p-6 cursor-pointer list-none font-semibold text-light-surface hover:bg-white/5 transition-colors">
                            <span className="text-lg">What services do you offer?</span>
                            <span className="material-symbols-outlined transition-transform duration-300 group-open:rotate-180 text-primary-light">
                                expand_more
                            </span>
                        </summary>
                        <div className="px-6 pb-6 pt-2 text-text-light-muted leading-relaxed">
                            We specialize in custom software development, cloud infrastructure
                            management, cybersecurity solutions, and digital transformation
                            consulting for enterprise clients.
                        </div>
                    </details>

                    {/* FAQ Item 2 */}
                    <details className="group card-glass-dark rounded-xl overflow-hidden">
                        <summary className="flex justify-between items-center p-6 cursor-pointer list-none font-semibold text-light-surface hover:bg-white/5 transition-colors">
                            <span className="text-lg">How do I start a project with Aasi Tech?</span>
                            <span className="material-symbols-outlined transition-transform duration-300 group-open:rotate-180 text-primary-light">
                                expand_more
                            </span>
                        </summary>
                        <div className="px-6 pb-6 pt-2 text-text-light-muted leading-relaxed">
                            Simply fill out the contact form above or give us a call. We'll
                            schedule an initial consultation to understand your needs and
                            provide a tailored proposal.
                        </div>
                    </details>

                    {/* FAQ Item 3 */}
                    <details className="group card-glass-dark rounded-xl overflow-hidden">
                        <summary className="flex justify-between items-center p-6 cursor-pointer list-none font-semibold text-light-surface hover:bg-white/5 transition-colors">
                            <span className="text-lg">Where is your headquarters located?</span>
                            <span className="material-symbols-outlined transition-transform duration-300 group-open:rotate-180 text-primary-light">
                                expand_more
                            </span>
                        </summary>
                        <div className="px-6 pb-6 pt-2 text-text-light-muted leading-relaxed">
                            Our headquarters is located in Islamabad, Pakistan. Reach out to us to
                            schedule a visit or an online consultation.
                        </div>
                    </details>
                </div>
            </div>
        </section>
    );
}
