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

const FAQ = () => {
  const faqs = [
    {
      question: "How long does it take to get test results?",
      answer: "Most test results are available within 24-48 hours. Complex genetic tests may take 5-7 business days. You will be notified via email and our secure online portal as soon as your results are ready."
    },
    {
      question: "How do I prepare for my test?",
      answer: "Preparation varies by test type. We'll send you detailed instructions via email and SMS before your appointment. You can also find preparation guidelines on the specific test page on our website."
    },
    {
      question: "Do I need to fast before my test?",
      answer: "Fasting requirements depend on the specific test, such as lipid panels or glucose tests. We'll provide clear, personalized preparation instructions when you book your test."
    },
    {
      question: "Can I get a copy of my results to share?",
      answer: "Absolutely. You'll receive a comprehensive digital report in PDF format, which you can easily download, print, and share with your healthcare provider or for your personal records."
    },
    {
      question: "Do you accept insurance?",
      answer: "We are an out-of-network provider. While we don't directly bill insurance, we can provide you with an itemized receipt (superbill) that you can submit to your insurance company for potential reimbursement."
    },
    {
      question: "What if I need to reschedule my appointment?",
      answer: "You can easily reschedule up to 24 hours before your appointment through our online portal or by contacting our dedicated support team. We offer flexible options to fit your schedule."
    }
  ];
  
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      },
    },
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 12
      },
    },
  };

  return (
    <section className="section-padding section-soft-wave">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true, amount: 0.5 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">
            Frequently Asked Questions
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Have questions? We've got answers. Here are some of the most common inquiries we receive.
          </p>
        </motion.div>
        
          <motion.div
          className="max-w-4xl mx-auto"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          >
          <Accordion type="single" collapsible className="w-full space-y-2">
            {faqs.map((faq, index) => (
              <motion.div key={index} variants={itemVariants}>
                <AccordionItem value={`item-${index}`} className="border-b border-gray-200 py-4">
                  <AccordionTrigger className="text-left text-lg font-semibold text-gray-800 hover:text-brand transition-colors duration-200">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="pt-4 text-base text-gray-600 leading-relaxed">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
          </motion.div>
              ))}
            </Accordion>
          </motion.div>
      </div>
    </section>
  );
};

export default FAQ;