techzaa-frontend/src/components/FAQSection.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { motion, useInView, useScroll, useSpring } from "framer-motion";
import { ArrowUpRight, Sparkles,ShieldQuestion } from "lucide-react";
import { useRef, useState } 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.",
    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="relative min-h-screen py-24 bg-[#fafafa] dark:bg-[#050505] overflow-hidden transition-colors duration-500"
    >
      {/* Dynamic Background Elements */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[120px] animate-pulse" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-blue-500/10 blur-[120px]" />
      </div>

      <div className="container mx-auto px-6 max-w-6xl relative z-10">
        <div className="flex flex-col gap-16">
          <div>
            <div className="flex items-center gap-2 mb-6">
              <div className="p-2 bg-primary rounded-lg text-primary-foreground">
                <ShieldQuestion size={20} />
              </div>
              <span className="text-sm font-bold tracking-[0.2em] uppercase text-primary/80">
                Got Questions?
              </span>
            </div>

            <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 leading-tight">
              Clear Answers <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-600">
                For Big Ideas.
              </span>
            </h2>

            <p className="text-muted-foreground text-lg mb-0 max-w-md">
              We believe in radical transparency. If you don't find your answer
              here, our engineers are just a click away.
            </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 border-none rounded-3xl transition-all duration-500 px-2
                    ${
                      activeItem === `item-${index}`
                        ? "bg-white dark:bg-zinc-900 shadow-[0_20px_50px_rgba(0,0,0,0.05)] scale-[1.01]"
                        : "bg-zinc-100/50 dark:bg-zinc-900/30 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50"
                    }
                  `}
                >
                  <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 className="mt-6 flex gap-4">
                        <button className="text-xs font-bold uppercase tracking-tighter flex items-center gap-2 text-primary hover:gap-3 transition-all">
                          Learn More <ArrowUpRight size={14} />
                        </button>
                      </div>
                    </div>
                  </AccordionContent>
                </AccordionItem>
              </motion.div>
            ))}
          </Accordion>

          {/* Bottom Indicator */}
          <motion.div
            style={{ scaleX }}
            className="h-1 bg-primary/20 mt-4 rounded-full origin-left"
          />
        </div>
      </div>
    </section>
  );
}