Faq Inline

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

export interface FaqInlineProps {
  title?: string;
  items?: { q: string; a: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { q: "Free plan?", a: "Yes, forever." },
  { q: "Custom domain?", a: "On every paid plan." },
  { q: "Own fonts?", a: "Any WOFF2." },
  { q: "Export?", a: "Anytime, everything." },
  { q: "Students?", a: "Studio is free." },
  { q: "Support?", a: "Humans, within a day." },
];

/** Ultra-compact FAQ: short questions and one-line answers flowing as a 3-column grid of mono question labels over large answers — scannable in seconds. */
export function FaqInline({ title = "Short answers", items = DEFAULT_ITEMS, className }: FaqInlineProps) {
  return (
    <section aria-labelledby="mc-fin-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-fin-title" className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">
          {title}
        </h2>
        <dl className="mt-8 grid gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((it) => (
            <div key={it.q} className="flex flex-col border-t border-da-border-strong pt-4">
              <dt className="font-da-mono text-xs tracking-da-label uppercase">{it.q}</dt>
              <dd className="mt-3 font-da-display text-3xl font-medium tracking-da-display">{it.a}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

export default FaqInline;