Faq Support

import { BookOpen, LifeBuoy, MessagesSquare, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqSupportProps {
  title?: string;
  items?: { q: string; a: string }[];
  channels?: { icon: LucideIcon; title: string; text: string; cta: string; href: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { q: "Is there a free trial?", a: "Yes, 14 days on Starter and Growth, no card required." },
  { q: "Can I import existing invoices?", a: "Upload a CSV or sync from your ERP; open balances carry over." },
  { q: "Who owns the data?", a: "You do. Export everything at any time in CSV or via API." },
  { q: "Do you support purchase orders?", a: "Yes, PO numbers can be required per customer and matched on invoices." },
  { q: "What about sales tax?", a: "Automatic US sales tax and EU VAT calculation are built in." },
  { q: "Is there a mobile app?", a: "Approvals and receipts work on iOS and Android." },
];

/** Compact 2×3 grid of short Q&As followed by three bordered support channel cards (docs, chat, dedicated support). */
export function FaqSupport({
  title = "Quick answers",
  items = DEFAULT_ITEMS,
  channels = [
    { icon: BookOpen, title: "Documentation", text: "Guides, API reference and ERP setup.", cta: "Browse docs", href: "#docs" },
    { icon: MessagesSquare, title: "Live chat", text: "Mon–Fri, 7am–7pm ET. Median reply: 4 min.", cta: "Start a chat", href: "#chat" },
    { icon: LifeBuoy, title: "Priority support", text: "Dedicated CSM and 1-hour SLA on Enterprise.", cta: "Talk to sales", href: "#sales" },
  ],
  className,
}: FaqSupportProps) {
  return (
    <section aria-labelledby="nc-faqsup-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <h2 id="nc-faqsup-title" className="font-da-display text-[clamp(2rem,4.5vw,2.75rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <dl className="mt-10 grid gap-x-10 gap-y-8 md:grid-cols-2 lg:grid-cols-3">
          {items.map((it) => (
            <div key={it.q}>
              <dt className="font-semibold">{it.q}</dt>
              <dd className="mt-1.5 text-[15px] text-da-muted-fg">{it.a}</dd>
            </div>
          ))}
        </dl>
        <ul className="mt-14 grid gap-4 md:grid-cols-3">
          {channels.map((c) => (
            <li key={c.title} className="da-stroke flex flex-col rounded-da-lg bg-da-surface p-6 text-da-surface-fg">
              <c.icon aria-hidden className="size-6 text-da-primary" />
              <h3 className="mt-4 font-da-display font-bold">{c.title}</h3>
              <p className="mt-1 flex-1 text-sm text-da-muted-fg">{c.text}</p>
              <a href={c.href} className="da-focus mt-4 self-start rounded-da-sm text-sm font-semibold text-da-primary hover:underline">
                {c.cta} →
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FaqSupport;