FAQ Accordion

"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";

const faqs = [
  { q: "How do I import a block?", a: "Copy the section into your project — it themes itself from your existing design tokens." },
  { q: "Does it work with my stack?", a: "Anything that runs React and Tailwind. No runtime dependency to install." },
  { q: "Can I edit the copy?", a: "Yes — every string is inline. Replace the placeholder text with your own." },
  { q: "Is it responsive?", a: "Every block is mobile-first and scales cleanly to large screens." },
];

export function FaqAccordion() {
  const [open, setOpen] = useState(0);
  return (
    <section className="mx-auto max-w-2xl px-6 py-16 md:py-24">
      <div className="mb-14 text-center">
        <h2 className="mb-5 text-4xl font-bold tracking-tight">FAQs</h2>
        <p className="text-muted-foreground">Everything you might want to know before you start.</p>
      </div>
      <div className="divide-y divide-border border-y border-border">
        {faqs.map((item, i) => (
          <div key={item.q}>
            <button
              onClick={() => setOpen(open === i ? -1 : i)}
              className="flex w-full items-center justify-between gap-4 py-5 text-left font-medium"
            >
              {item.q}
              <ChevronDown className={"size-5 shrink-0 transition-transform " + (open === i ? "rotate-180" : "")} />
            </button>
            {open === i && <p className="pb-6 text-muted-foreground">{item.a}</p>}
          </div>
        ))}
      </div>
    </section>
  );
}