FAQ Thread

import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";

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

export interface FaqThreadProps {
  title?: string;
  description?: string;
  items?: FaqThreadItem[];
  contact?: { label: string; href: string };
  className?: string;
}

const DEFAULT_ITEMS: FaqThreadItem[] = [
  { question: "Does Nova train on our data?", answer: "No. Your messages, files and connected apps are never used to train any model — ours or a provider's. Data is encrypted at rest and in transit." },
  { question: "Which tools can Nova connect to?", answer: "Slack, Notion, Linear, GitHub, Google Drive, Confluence and Jira today, with more every month. Nova respects each tool's permissions: people only get answers from what they can already see." },
  { question: "How does team memory work?", answer: "Nova keeps a structured summary of decisions, owners and open questions from your conversations and docs. You can review, edit or delete any memory from the Memory panel." },
  { question: "Can I choose the model?", answer: "Yes. Pro and Team plans can pick the model per conversation, or let Nova route automatically between a fast model and a deep-thinking one." },
  { question: "What happens when I cancel?", answer: "You keep access until the end of the billing period, then your workspace moves to the Free plan. Export everything at any time, in one click." },
];

/** FAQ as a thread: each question is a disclosure row with a plus that turns into a cross; answers open below like an assistant reply. Native <details>, no JS. */
export function FaqThread({
  title = "Questions, answered",
  description = "Still curious? Ask Nova — it knows this page by heart.",
  items = DEFAULT_ITEMS,
  contact = { label: "Chat with the team", href: "#contact" },
  className,
}: FaqThreadProps) {
  return (
    <section className={cn("da-section", className)}>
      <div className="da-container grid gap-10 lg:grid-cols-[1fr_1.6fr]">
        <div>
          <h2 className="font-da-display text-3xl font-semibold tracking-da-display text-balance sm:text-4xl">{title}</h2>
          <p className="mt-3 text-da-muted-fg">{description}</p>
          <a href={contact.href} className="da-focus da-transition da-stroke mt-6 inline-flex h-10 items-center rounded-da-pill bg-da-surface px-5 text-sm font-medium hover:bg-da-surface-2">
            {contact.label}
          </a>
        </div>
        <div className="flex flex-col gap-3">
          {items.map((item) => (
            <details key={item.question} className="group da-stroke rounded-da-lg bg-da-surface open:bg-da-surface-2">
              <summary className="da-focus flex cursor-pointer list-none items-center gap-4 rounded-da-lg px-5 py-4 text-[15px] font-medium [&::-webkit-details-marker]:hidden">
                <span className="flex-1">{item.question}</span>
                <Plus aria-hidden className="da-transition size-4 shrink-0 text-da-muted-fg group-open:rotate-45 group-open:text-da-primary" />
              </summary>
              <div className="flex gap-3 px-5 pb-5">
                <span aria-hidden className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-da-primary font-da-display text-[10px] font-semibold text-da-primary-fg">N</span>
                <p className="text-sm leading-relaxed text-da-muted-fg">{item.answer}</p>
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

export default FaqThread;