techzaa-frontend/src/components/FAQSection.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { motion, useInView } from "framer-motion";
import { useRef } from "react";

const faqs = [
  {
    question: "What services does TechZaa offer?",
    answer:
      "We provide comprehensive technology solutions including web development, mobile app development, AI/ML solutions, and cloud infrastructure services. Our team specializes in creating custom software tailored to your business needs.",
  },
  {
    question: "How long does a typical project take?",
    answer:
      "Project timelines vary based on complexity and scope. A simple website might take 4-6 weeks, while complex enterprise applications can take 3-6 months. We provide detailed timelines during our initial consultation and keep you updated throughout the development process.",
  },
  {
    question: "What is your development process?",
    answer:
      "We follow an agile methodology with iterative development cycles. Our process includes: Discovery & Planning, UI/UX Design, Development Sprints, Quality Assurance, Deployment, and Ongoing Support. We maintain transparent communication with regular updates and demos.",
  },
  {
    question: "Do you provide ongoing maintenance and support?",
    answer:
      "Yes! We offer comprehensive maintenance packages that include bug fixes, security updates, performance optimization, and feature enhancements. Our support team is available to ensure your application runs smoothly 24/7.",
  },
  {
    question: "What technologies do you work with?",
    answer:
      "Our tech stack includes React, Next.js, Node.js, Python, TypeScript, AWS, Google Cloud, and more. We stay current with industry trends and select the best technologies for each project's specific requirements.",
  },
  {
    question: "How do you handle project pricing?",
    answer:
      "We offer flexible pricing models including fixed-price projects, time & materials, and dedicated team arrangements. After understanding your requirements, we provide transparent quotes with no hidden costs. Contact us for a free consultation and estimate.",
  },
  {
    question: "Can you work with our existing team?",
    answer:
      "Absolutely! We frequently collaborate with in-house teams, providing additional expertise and resources. Whether you need staff augmentation, specialized skills, or full project delivery, we adapt to your working style and processes.",
  },
  {
    question: "What industries do you serve?",
    answer:
      "We've delivered successful projects across fintech, healthcare, e-commerce, education, real estate, and SaaS industries. Our diverse experience allows us to bring cross-industry insights and best practices to every project.",
  },
];

export default function FAQSection() {
  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section id="faq" ref={ref} className="py-24 relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-1/4 right-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
        <div className="absolute bottom-1/4 left-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
            Got Questions?
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
            Frequently Asked{" "}
            <span className="text-primary neon-text-glow">Questions</span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
            Everything you need to know about working with TechZaa. Can't find
            what you're looking for? Reach out to our team.
          </p>
        </motion.div>

        {/* FAQ Accordion */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="max-w-3xl mx-auto"
        >
          <Accordion type="single" collapsible className="space-y-4">
            {faqs.map((faq, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.4, delay: 0.1 * index }}
              >
                <AccordionItem
                  value={`item-${index}`}
                  className="glass border border-border/50 rounded-xl px-6 overflow-hidden data-[state=open]:border-primary/50 transition-colors"
                >
                  <AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium hover:text-primary transition-colors">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-muted-foreground pb-5 text-sm md:text-base leading-relaxed">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              </motion.div>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
}