"use client"

import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"

const faqCategories = [
    {
        category: "Pricing & Packages",
        questions: [
            {
                q: "What's included in each package?",
                a: "Each package includes a dedicated project manager, custom design, development, quality assurance, and a warranty period. The Starter package covers up to 5 pages, Professional up to 15 pages with CMS, and Enterprise offers unlimited scope with custom integrations.",
            },
            {
                q: "Are there any hidden fees?",
                a: "No. We provide a detailed project quote upfront and any scope changes are discussed and approved before billing. The only additional costs would be third-party services like hosting, domain names, or premium API subscriptions.",
            },
            {
                q: "Do you offer payment plans?",
                a: "Yes! We typically split payments into milestones: 30% upfront, 40% at design approval, and 30% at launch. For Enterprise projects, we can arrange custom payment schedules.",
            },
        ],
    },
    {
        category: "Process & Timeline",
        questions: [
            {
                q: "How long does a typical project take?",
                a: "Starter projects typically take 3-4 weeks, Professional projects 6-8 weeks, and Enterprise projects 10-16+ weeks depending on complexity. We'll provide a detailed timeline during the discovery phase.",
            },
            {
                q: "What does the development process look like?",
                a: "Our process follows four phases: Discovery (requirements & strategy), Design (wireframes & mockups), Development (coding & integration), and Deployment (testing, launch & handoff). You'll have visibility and input at every stage.",
            },
        ],
    },
    {
        category: "Technical",
        questions: [
            {
                q: "What technologies do you use?",
                a: "We primarily build with Next.js, React, TypeScript, and Tailwind CSS for frontend; Node.js with Express or Next.js API routes for backend; and PostgreSQL or MongoDB for databases. For mobile, we use React Native or Flutter.",
            },
            {
                q: "Will my website be SEO-friendly?",
                a: "Absolutely. We build with SEO best practices from day one — semantic HTML, server-side rendering, optimized images, structured data, meta tags, sitemap generation, and fast page load times.",
            },
            {
                q: "Can I update content myself after launch?",
                a: "Yes! We integrate a content management system (CMS) so you can update text, images, blog posts, and more without any coding knowledge.",
            },
        ],
    },
    {
        category: "Support",
        questions: [
            {
                q: "Do you offer ongoing support after launch?",
                a: "Yes. All packages include a 30-day warranty post-launch. We also offer monthly maintenance plans that include security updates, performance monitoring, content updates, and priority support.",
            },
            {
                q: "What if I need changes after the project is delivered?",
                a: "Minor adjustments within the warranty period are covered at no extra cost. For larger changes or new features, we'll provide a quote and timeline. Many of our clients retain us on a monthly basis for ongoing improvements.",
            },
        ],
    },
]

export function FAQSection() {
    return (
        <section className="py-24 bg-muted/20" id="faq">
            <div className="container max-w-3xl">
                <div className="animate-fade-in-up text-center mb-16">
                    <p className="text-overline text-primary mb-3">FAQ</p>
                    <h2 className="sm:text-4xl mb-4">Frequently Asked Questions</h2>
                    <p className="text-body text-muted-foreground">
                        Got questions? We&apos;ve got answers.
                    </p>
                </div>

                <div className="space-y-8">
                    {faqCategories.map((cat, ci) => (
                        <div key={cat.category} className="animate-fade-in-up" style={{ animationDelay: `${ci * 0.1}s` }}>
                            <h3 className="font-bold mb-4">{cat.category}</h3>
                            <Accordion type="single" collapsible className="space-y-2">
                                {cat.questions.map((item, qi) => (
                                    <AccordionItem
                                        key={qi}
                                        value={`${ci}-${qi}`}
                                        className="rounded-xl border bg-card px-4 data-[state=open]:border-primary/20 transition-colors"
                                    >
                                        <AccordionTrigger className="text-sm font-medium hover:no-underline py-4">
                                            {item.q}
                                        </AccordionTrigger>
                                        <AccordionContent className="text-sm text-muted-foreground leading-relaxed pb-4">
                                            {item.a}
                                        </AccordionContent>
                                    </AccordionItem>
                                ))}
                            </Accordion>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}