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

interface FAQ {
  question: string
  answer: string
}



const faqs = [
    {
      question: "How do I make a booking?",
      answer:
        "You can book directly through our website. Select your preferred service, choose your dates, and complete payment via Paystack.",
    },
    {
      question: "Can I visit without staying overnight?",
      answer:
        "Yes! We offer day passes for those who want to experience our farm tours, dining, and activities without booking accommodation.",
    },
    {
      question: "Do you allow corporate retreats and events?",
      answer:
        "We have conference facilities and can accommodate corporate groups. Contact us for custom packages.",
    },
   
    {
      question: "Can children participate in farm activities?",
      answer:
        "Yes! Our farm experiences are family-friendly and children love interacting with animals and learning about farming.",
    },
    {
      question: "Do you offer discounts for groups?",
      answer:
        "Yes, we offer special rates for groups of 10 or more. Contact us directly for a custom quote.",
    },
   {
  question: "Contact Us",
  answer: (
    <span>
      Reach us at{" "}
      <a href="mailto:alegrefarmresort@gmail.com" className="text-primary underline font-semibold">
        alegrefarmresort@gmail.com
      </a>{" "}
      or call{" "}
      <a href="tel:08135019543" className="text-primary underline font-semibold">
        08135019543
      </a>{" "}
      for inquiries.
    </span>
  ),
}

  ];

export function FAQSection() {
  return (
    <section className="max-w-6xl mx-auto py-8 md:py-24 bg-background">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
          <div className="space-y-6">
            <h2 className="text-3xl lg:text-4xl font-bold text-foreground">
              Frequently Asked Question
            </h2>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Have a lot of frequently asked questions. Kindly tap on any
              question to reveal its answer and gain more information.
            </p>
          </div>

          <div>
            <Accordion type="single" collapsible className="space-y-4 border border-border p-4 rounded-md">
              {faqs.map((faq, index) => (
                <AccordionItem
                  key={index}
                  value={`item-${index}`}
                  className="rounded-md px-2 transition-colors data-[state=open]:bg-[#F7F8FA]"
                >
                  <AccordionTrigger className="text-left text-[0.8rem] font-medium text-foreground hover:no-underline">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-[0.77rem] text-muted-foreground leading-relaxed">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </section>
  )
}