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

const faqs = [
  {
    q: "Do my guests need to download an app?",
    a: "No. Sercé menus open instantly in any web browser when guests scan the QR code. Zero downloads, zero friction.",
  },
  {
    q: "Can I update prices and items myself?",
    a: "Absolutely. Edit anything from your dashboard and changes appear on your live menu within seconds.",
  },
  {
    q: "Does it work for multiple locations?",
    a: "Yes. Our Group plan lets you manage menus for up to 10 locations from a single account.",
  },
  {
    q: "What happens after the free trial?",
    a: "You can keep using the Starter plan free forever, or upgrade for more features. No automatic charges.",
  },
  {
    q: "Can I keep my own branding?",
    a: "Yes — upload your logo, choose your colors, and your menu feels like a natural extension of your restaurant.",
  },
];

export const FAQ = () => {
  return (
    <section id="faq" className="py-24 md:py-32">
      <div className="container max-w-3xl">
        <div className="text-center mb-12">
          <div className="text-sm font-semibold text-primary uppercase tracking-wider mb-4">FAQ</div>
          <h2 className="text-4xl md:text-5xl font-semibold tracking-tight leading-tight">
            Questions, answered.
          </h2>
        </div>

        <Accordion type="single" collapsible className="space-y-3">
          {faqs.map((f, i) => (
            <AccordionItem
              key={i}
              value={`item-${i}`}
              className="border border-border rounded-2xl px-6 bg-card shadow-soft"
            >
              <AccordionTrigger className="text-left font-semibold hover:no-underline py-5">
                {f.q}
              </AccordionTrigger>
              <AccordionContent className="text-muted-foreground leading-relaxed pb-5">
                {f.a}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};