export default function PricingFAQ() {
    return (
        <section className="bg-white py-20 px-4 md:px-10 lg:px-20">
            <div className="mx-auto max-w-3xl">
                <h2 className="mb-12 text-center text-3xl font-bold text-text-main gsap-fade-up">Frequently Asked Questions</h2>
                <div className="flex flex-col gap-4 gsap-stagger">
                    {/* FAQ Item 1 */}
                    <details className="group rounded-2xl border border-border-light bg-light-bg p-6 open:bg-white open:shadow-md transition-all cursor-pointer">
                        <summary className="flex items-center justify-between font-bold text-text-main outline-none focus:text-primary">
                            <span className="text-lg">How does your custom pricing work?</span>
                            <span className="material-symbols-outlined transition-transform group-open:rotate-180 text-primary">expand_more</span>
                        </summary>
                        <p className="mt-4 text-text-muted leading-relaxed">
                            We believe every project is unique, so we provide custom quotes based on your specific requirements, project scope, and timeline. Simply reach out to us through our contact page with your project details, and our team will prepare a tailored proposal for you.
                        </p>
                    </details>

                    {/* FAQ Item 2 */}
                    <details className="group rounded-2xl border border-border-light bg-light-bg p-6 open:bg-white open:shadow-md transition-all cursor-pointer">
                        <summary className="flex items-center justify-between font-bold text-text-main outline-none focus:text-primary">
                            <span className="text-lg">What determines the cost of my project?</span>
                            <span className="material-symbols-outlined transition-transform group-open:rotate-180 text-primary">expand_more</span>
                        </summary>
                        <p className="mt-4 text-text-muted leading-relaxed">
                            The cost depends on several factors including the complexity of the solution, the number of services involved (web, mobile, AI, IoT, etc.), project timeline, and any ongoing support requirements. We provide a detailed breakdown before starting any work.
                        </p>
                    </details>

                    {/* FAQ Item 3 */}
                    <details className="group rounded-2xl border border-border-light bg-light-bg p-6 open:bg-white open:shadow-md transition-all cursor-pointer">
                        <summary className="flex items-center justify-between font-bold text-text-main outline-none focus:text-primary">
                            <span className="text-lg">Can I combine services from different plans?</span>
                            <span className="material-symbols-outlined transition-transform group-open:rotate-180 text-primary">expand_more</span>
                        </summary>
                        <p className="mt-4 text-text-muted leading-relaxed">
                            Absolutely! Our plans are flexible guidelines, not rigid packages. You can mix and match services like web development, chatbot integration, IoT solutions, and more. We&apos;ll create a custom proposal that fits exactly what you need.
                        </p>
                    </details>

                    {/* FAQ Item 4 */}
                    <details className="group rounded-2xl border border-border-light bg-light-bg p-6 open:bg-white open:shadow-md transition-all cursor-pointer">
                        <summary className="flex items-center justify-between font-bold text-text-main outline-none focus:text-primary">
                            <span className="text-lg">How do I get started with a project?</span>
                            <span className="material-symbols-outlined transition-transform group-open:rotate-180 text-primary">expand_more</span>
                        </summary>
                        <p className="mt-4 text-text-muted leading-relaxed">
                            Simply click the &quot;Get Started&quot; button on any plan to reach our contact page. Share your project details, and our team will schedule a free consultation to discuss your requirements, suggest the right approach, and provide a custom quote.
                        </p>
                    </details>

                    {/* FAQ Item 5 */}
                    <details className="group rounded-2xl border border-border-light bg-light-bg p-6 open:bg-white open:shadow-md transition-all cursor-pointer">
                        <summary className="flex items-center justify-between font-bold text-text-main outline-none focus:text-primary">
                            <span className="text-lg">Do you offer ongoing support after project delivery?</span>
                            <span className="material-symbols-outlined transition-transform group-open:rotate-180 text-primary">expand_more</span>
                        </summary>
                        <p className="mt-4 text-text-muted leading-relaxed">
                            Yes! All plans include post-delivery support. Starter plans get standard email support, Professional plans include priority support, and Enterprise clients receive a dedicated account manager with SLA-backed response times.
                        </p>
                    </details>
                </div>
            </div>
        </section>
    );
}
