Faq Grid

import { BookOpen, MessageCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqGridProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  items?: { question: string; answer: string }[];
  links?: { label: string; description: string; href: string; icon: "docs" | "chat" }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { question: "How long does setup take?", answer: "Most teams route their first alert in under 10 minutes and finish migrating schedules in an afternoon." },
  { question: "Is there a free plan?", answer: "Yes — up to 5 responders, 5 integrations and one status page, free forever." },
  { question: "Can I try paid features?", answer: "Every workspace starts with a 14-day Business trial. No credit card required." },
  { question: "Do you have an API?", answer: "A full REST API, webhooks, a Terraform provider and a CLI. Everything in the UI is scriptable." },
  { question: "What about mobile?", answer: "Native iOS and Android apps with critical alerts that break through Do Not Disturb." },
  { question: "Can we self-host?", answer: "Not today. We offer single-tenant cloud deployments on Enterprise for strict compliance needs." },
];

const ICONS = { docs: BookOpen, chat: MessageCircle };

/** All answers visible: a 3-column grid of short Q&As under a header, then two support link cards. */
export function FaqGrid({
  eyebrow = "FAQ",
  title = "Everything you need to know",
  description = "Short answers to what teams ask before switching.",
  items = DEFAULT_ITEMS,
  links = [
    { label: "Documentation", description: "Guides, API reference and migration playbooks.", href: "#docs", icon: "docs" },
    { label: "Talk to us", description: "A human replies in under 10 minutes, 24/7.", href: "#chat", icon: "chat" },
  ],
  className,
}: FaqGridProps) {
  return (
    <section aria-labelledby="faq-grid-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="faq-grid-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 text-[17px] text-da-muted-fg">{description}</p>
        </div>
        <dl className="mt-12 grid gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((it) => (
            <div key={it.question}>
              <dt className="text-[15px] font-medium">{it.question}</dt>
              <dd className="mt-2 text-sm leading-relaxed text-da-muted-fg">{it.answer}</dd>
            </div>
          ))}
        </dl>
        <ul className="mt-14 grid gap-3 sm:grid-cols-2">
          {links.map((l) => {
            const Icon = ICONS[l.icon];
            return (
              <li key={l.href}>
                <a
                  href={l.href}
                  className="da-focus da-transition da-stroke flex items-start gap-4 rounded-da-lg bg-da-surface p-5 text-da-surface-fg hover:border-da-border-strong hover:bg-da-surface-2"
                >
                  <span className="grid size-9 shrink-0 place-items-center rounded-da-md bg-da-accent text-da-accent-fg">
                    <Icon aria-hidden className="size-4" />
                  </span>
                  <span>
                    <span className="block text-[15px] font-medium">{l.label}</span>
                    <span className="mt-0.5 block text-sm text-da-muted-fg">{l.description}</span>
                  </span>
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default FaqGrid;