Faq Cards

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

export interface FaqCardsProps {
  eyebrow?: string;
  title?: string;
  items?: { question: string; answer: string }[];
  contact?: { text: string; label: string; href: string };
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_ITEMS = [
  {
    question: "Does Halo join as a bot?",
    answer: "On Zoom, Meet and Teams Halo can join as a named participant, or record locally with the desktop app so nobody sees a bot.",
  },
  { question: "Which languages are supported?", answer: "30 languages for transcription and live translation, including mixed-language calls." },
  {
    question: "Is my data used to train models?",
    answer: "Never. Recordings and transcripts are encrypted, stored in your region and deleted on your schedule.",
  },
  { question: "Can I edit a recap before it’s shared?", answer: "Yes. Choose auto-post, or review and edit every recap before it reaches Slack or email." },
  { question: "What about in-person meetings?", answer: "Open the iOS or Android app, tap record and put your phone on the table." },
  { question: "How does billing work?", answer: "Per member per month on Team, or buy recording hours pay-as-you-go. Guests are always free." },
];

/** All-open FAQ: a grid of small glass cards (question + answer) with a gradient number badge, and a contact pill below. */
export function FaqCards({
  eyebrow = "FAQ",
  title = "Good questions, quick answers",
  items = DEFAULT_ITEMS,
  contact = { text: "Something else on your mind?", label: "Chat with us", href: "#chat" },
  className,
}: FaqCardsProps) {
  return (
    <section aria-labelledby="glass-faq-cards-title" className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-faq-cards-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance"
          >
            {title}
          </h2>
        </div>
        <dl className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((it, i) => (
            <div key={it.question} className={cn("rounded-da-lg p-6 shadow-da-md", GLASS)}>
              <dt className="flex items-start gap-3 font-da-display font-semibold">
                <span
                  aria-hidden
                  className="grid size-7 shrink-0 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent font-da-mono text-xs text-da-primary-fg"
                >
                  {i + 1}
                </span>
                {it.question}
              </dt>
              <dd className="mt-3 text-[15px] leading-relaxed text-da-muted-fg">{it.answer}</dd>
            </div>
          ))}
        </dl>
        <p className="mt-10 text-center">
          <span className={cn("inline-flex items-center gap-3 rounded-da-pill py-1.5 pr-1.5 pl-4 text-sm shadow-da-sm", GLASS)}>
            {contact.text}
            <a href={contact.href} className="da-focus rounded-da-pill bg-da-fg px-4 py-1.5 font-semibold text-da-bg">
              {contact.label}
            </a>
          </span>
        </p>
      </div>
    </section>
  );
}

export default FaqCards;