techzaa-frontend/src/components/FAQSection.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { motion, useInView, useScroll, useSpring } from "framer-motion";
import { Sparkles } from "lucide-react";
import { useRef, useState } from "react";
import PremiumBadge from "./shared/PremiumBadge";

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.",
    category: "Services",
  },
  {
    question: "How long does a typical project take?",
    answer:
      "Timelines vary: simple sites take 4-6 weeks, while enterprise apps take 3-6 months. We prioritize agile delivery and constant feedback.",
    category: "Process",
  },
  {
    question: "What is your development process?",
    answer:
      "We follow an agile methodology: Discovery, UI/UX Design, Development Sprints, QA, Deployment, and 24/7 Ongoing Support.",
    category: "Workflow",
  },
  {
    question: "Do you provide maintenance?",
    answer:
      "Yes. Our maintenance packages include security updates, performance optimization, and feature enhancements to keep you ahead.",
    category: "Support",
  },
  {
    question: "How do you handle project pricing?",
    answer:
      "Flexible models: fixed-price, time & materials, or dedicated teams. We ensure 100% transparency with no hidden costs.",
    category: "Billing",
  },
];

export default function FAQSection() {
  const [activeItem, setActiveItem] = useState<string | undefined>(undefined);
  const containerRef = useRef(null);
  const isInView = useInView(containerRef, { once: true, amount: 0.2 });

  // Progress bar for reading engagement
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  });
  const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 });

  return (
    <section
      ref={containerRef}
      className="pb-20 overflow-hidden transition-colors duration-500"
    >
      <div className="mx-auto px-6 max-w-6xl">
        <div className="flex flex-col gap-10">
          <div className="flex flex-col items-center">
            <PremiumBadge text="Got Questions?" />

            <h2 className="text-4xl md:text-5xl font-bold">
              Clear Answers{" "}{" "}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
                For Big Ideas.
              </span>
            </h2>

            <p className="text-muted-foreground max-w-lg text-center mt-5">
              Everything you need to know about working with TechZaa. Can't find
              what you're looking for? Reach out to our team.
            </p>
          </div>

          {/* Bottom Section: Interactive Accordion */}
          <Accordion
            type="single"
            collapsible
            onValueChange={setActiveItem}
            className="w-full space-y-4"
          >
            {faqs.map((faq, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: index * 0.1, duration: 0.5 }}
              >
                <AccordionItem
                  value={`item-${index}`}
                  className={`
                    group glass-strong border dark:border-none rounded-2xl transition-all duration-500 px-2
                    ${
                      activeItem === `item-${index}`
                        ? "bg-primary/20 shadow-[0_20px_50px_rgba(0,0,0,0.05)] scale-[1.01]"
                        : "bg-accent"
                    }
                  `}
                >
                  <AccordionTrigger className="flex items-center justify-between p-6 hover:no-underline gap-4">
                    <div className="flex items-center gap-6 text-left">
                      <span
                        className={`
                        hidden sm:flex items-center justify-center w-10 h-10 rounded-full border text-xs font-bold transition-all duration-500
                        ${
                          activeItem === `item-${index}`
                            ? "bg-primary border-primary text-primary-foreground rotate-[360deg]"
                            : "border-border text-muted-foreground"
                        }
                      `}
                      >
                        {activeItem === `item-${index}` ? (
                          <Sparkles size={14} />
                        ) : (
                          `0${index + 1}`
                        )}
                      </span>
                      <div className="flex flex-col gap-1">
                        <span className="text-[10px] uppercase tracking-widest font-bold text-primary opacity-0 group-data-[state=open]:opacity-100 transition-opacity">
                          {faq.category}
                        </span>
                        <span className="text-lg md:text-xl font-semibold tracking-tight">
                          {faq.question}
                        </span>
                      </div>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-6 pb-8 md:pl-[104px]">
                    <div className="text-muted-foreground text-base md:text-lg leading-relaxed max-w-2xl border-l-2 border-primary/20 pl-6">
                      {faq.answer}
                    </div>
                  </AccordionContent>
                </AccordionItem>
              </motion.div>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
}