import { ChevronDown, HelpCircle } from "lucide-react";
import { Accordion } from "@sisyphos-ui/react";

const FAQS = [
  { q: "Do I need separate licenses for each framework?", a: "No. Same MIT license, install whichever package matches your stack." },
  { q: "Can I theme components at runtime?",              a: "Yes — applyTheme() swaps every token in one call. No rebuild." },
  { q: "What's the bundle cost?",                          a: "Tree-shakeable. A typical app lands at 8–18 KB gzipped." },
  { q: "Is accessibility opt-in?",                         a: "Never. Focus traps, keyboard maps, and WAI-ARIA ship by default." },
];

export function Faq() {
  return (
    <section className="bg-white px-6 py-24">
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-orange-600">
          <HelpCircle className="size-3.5" /> FAQ
        </span>
        <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight">Quick answers</h2>
        <p className="mt-6 text-zinc-600">The questions teams ask the most.</p>
      </div>

      <div className="mx-auto mt-12 max-w-3xl">
        <Accordion variant="outlined" defaultValue="0">
          {FAQS.map((item, idx) => (
            <Accordion.Item key={idx} value={String(idx)}>
              <Accordion.Trigger icon={<ChevronDown className="size-4" />}>
                <span className="font-semibold">{item.q}</span>
              </Accordion.Trigger>
              <Accordion.Content>
                <p className="text-sm text-zinc-600">{item.a}</p>
              </Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion>
      </div>
    </section>
  );
}
Components used

Used in templates
