FAQ

"use client";

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

const FAQS = [
  { q: "How do I install Groudit UI?", a: "Use the Groudit CLI: pnpm dlx @groudit/cli@latest add button. Or copy components from each page's Manual tab." },
  { q: "Can I customize the components?", a: "Yes — the source code is yours after installation. Modify CSS variables in globals.css or edit component files directly." },
  { q: "Is it really free?", a: "All components are MIT licensed. Pro blocks and templates require a subscription, but free blocks are unlimited." },
  { q: "Does it work with Next.js?", a: "Yes — built on Next.js 16 + React 19. Also works with Vite, Remix, and any modern React setup." },
  { q: "What about RTL?", a: "Full RTL support via logical CSS properties. Arabic and Hebrew tested." },
];

export function FaqBlock() {
  return (
    <section className="mx-auto max-w-3xl px-6 py-16">
      <div className="text-center mb-10">
        <p className="text-sm font-medium text-muted-foreground mb-2">FAQ</p>
        <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">
          Frequently asked questions.
        </h2>
      </div>
      <Accordion className="space-y-1">
        {FAQS.map((item, i) => (
          <AccordionItem key={i} value={`item-${i}`}>
            <AccordionTrigger>{item.q}</AccordionTrigger>
            <AccordionContent>{item.a}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}