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

export function FAQ() {
  const faqs = [
    {
      question: "Can I update things later?",
      answer: "Yes — 5 changes a month are included (and unlimited edits in your first month).",
    },
    {
      question: "Do I need any technical knowledge?",
      answer: "None at all. If you can use WhatsApp or email, you're good to go.",
    },
    {
      question: "Who owns the website domain?",
      answer:
        "You do. The domain is registered in your pharmacy name — we simply manage it for convenience. If you ever decide to leave, you can take your domain with you anytime. There's just a small £20 admin fee to cover the transfer process. You're never locked in or tied down.",
    },
    {
      question: "Still unsure? You're covered.",
      answer:
        "Every website includes our 30-Day Happiness Guarantee — if you're not happy, we'll fix it or refund you.",
    },
  ]

  return (
    <section className="bg-secondary/30 py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6">
        <div className="mx-auto max-w-3xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-foreground md:text-4xl">Common Questions</h2>

          <Accordion type="single" collapsible className="space-y-4">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="rounded-lg border border-border bg-card px-6"
              >
                <AccordionTrigger className="text-left text-lg font-semibold text-card-foreground hover:no-underline">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground">{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  )
}
