FAQ Grid

import { cn } from "@/lib/utils";

export interface FaqGridItem {
  question: string;
  answer: string;
}

export interface FaqGridProps {
  kicker?: string;
  title?: string;
  items?: FaqGridItem[];
  contact?: { text: string; label: string; href: string };
  className?: string;
}

const DEFAULT_ITEMS: FaqGridItem[] = [
  {
    question: "How long does setup take?",
    answer: "About five minutes: install the Git app, pick a repo, label a PR. Your first changelog page is live right after.",
  },
  { question: "Do I have to use AI summaries?", answer: "No. They're drafts you can edit or turn off per project. Plain PR titles work great too." },
  { question: "Can readers subscribe?", answer: "Yes — by email, RSS, Slack or in-app. They choose the channel and frequency." },
  { question: "Is there an API?", answer: "A REST API and webhooks for everything: create releases from CI, sync to your CMS, trigger digests." },
  { question: "What about monorepos?", answer: "Route PRs to projects by path or label. One repo can feed ten changelogs." },
  { question: "How does billing work?", answer: "Per project, monthly or yearly. Readers, releases and team members are unlimited on every plan." },
];

export function FaqGrid({
  kicker = "[ 07 ] FAQ",
  title = "Short answers to fair questions.",
  items = DEFAULT_ITEMS,
  contact = { text: "Didn't find yours?", label: "Ask an engineer", href: "#support" },
  className,
}: FaqGridProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="faq-grid-title">
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2 id="faq-grid-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>
        <dl className="da-stroke mt-12 grid gap-(--da-border-width) bg-da-border sm:grid-cols-2 lg:grid-cols-3">
          {items.map((item) => (
            <div key={item.question} className="group bg-da-surface p-6 text-da-surface-fg">
              <dt className="flex gap-3 font-da-display text-lg leading-tight tracking-da-display uppercase">
                <span
                  aria-hidden
                  className="da-stroke grid size-7 shrink-0 place-items-center bg-da-primary font-da-mono text-xs text-da-primary-fg group-hover:bg-da-accent group-hover:text-da-accent-fg"
                >
                  ?
                </span>
                {item.question}
              </dt>
              <dd className="mt-3 pl-10 text-da-muted-fg">{item.answer}</dd>
            </div>
          ))}
          <div className="flex flex-col justify-center gap-3 bg-da-fg p-6 text-da-bg sm:col-span-2 lg:col-span-3 lg:flex-row lg:items-center lg:justify-between">
            <dt className="font-da-display text-2xl tracking-da-display uppercase">{contact.text}</dt>
            <dd>
              <a href={contact.href} className="da-focus da-stroke inline-block bg-da-primary px-5 py-3 font-bold text-da-primary-fg">
                {contact.label} →
              </a>
            </dd>
          </div>
        </dl>
      </div>
    </section>
  );
}

export default FaqGrid;