Faq List

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

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

export interface FaqListProps {
  eyebrow?: string;
  title?: string;
  items?: FaqListItem[];
  contact?: { label: string; href: string; text: string };
  className?: string;
}

const DEFAULT_ITEMS: FaqListItem[] = [
  {
    question: "Who counts as a seat?",
    answer: "Only responders — people who can be paged. Viewers, stakeholders and status-page subscribers are free and unlimited on every plan.",
  },
  {
    question: "Can we import schedules from PagerDuty or Opsgenie?",
    answer:
      "Yes. The importer brings over users, schedules, escalation policies and services in a few minutes, and you can run both tools side by side during the switch.",
  },
  {
    question: "How do you make sure pages are delivered?",
    answer:
      "We send push, SMS and voice through two carriers per region with automatic failover, and back it with a 99.99% delivery SLA on Business and above.",
  },
  {
    question: "Where is our data stored?",
    answer: "In the US by default, or in the EU (Frankfurt) on Enterprise. Data is encrypted at rest with AES-256 and in transit with TLS 1.3.",
  },
  {
    question: "Does the AI read our Slack messages?",
    answer: "Only the messages in incident channels, only to draft the postmortem, and never to train models. You can disable it per workspace.",
  },
  {
    question: "What happens when the trial ends?",
    answer: "You drop to the Free plan automatically. Nothing is deleted; paid features pause until you upgrade.",
  },
];

/** Single-column FAQ using native details/summary (no JS), plus icon rotating to ×, and a contact line. */
export function FaqList({
  eyebrow = "FAQ",
  title = "Questions, answered",
  items = DEFAULT_ITEMS,
  contact = { text: "Still stuck?", label: "Chat with an on-call engineer", href: "#support" },
  className,
}: FaqListProps) {
  return (
    <section aria-labelledby="faq-list-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl">
          <p className="text-center font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="faq-list-title" className="mt-3 text-center text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display">
            {title}
          </h2>
          <div className="mt-12 border-t border-da-border">
            {items.map((it) => (
              <details key={it.question} className="group border-b border-da-border">
                <summary className="da-focus flex cursor-pointer list-none items-center justify-between gap-6 rounded-da-sm py-5 text-[15px] font-medium [&::-webkit-details-marker]:hidden">
                  {it.question}
                  <Plus aria-hidden className="da-transition size-4 shrink-0 text-da-muted-fg group-open:rotate-45" />
                </summary>
                <p className="-mt-1 pr-10 pb-5 text-[15px] leading-relaxed text-da-muted-fg">{it.answer}</p>
              </details>
            ))}
          </div>
          <p className="mt-8 text-center text-sm text-da-muted-fg">
            {contact.text}{" "}
            <a
              href={contact.href}
              className="da-focus rounded-da-sm font-medium text-da-fg underline decoration-da-border-strong underline-offset-4 hover:decoration-da-fg"
            >
              {contact.label}
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}

export default FaqList;