Faq Tabs

"use client";

import { Tabs } from "radix-ui";
import { cn } from "@/lib/utils";

export interface FaqTabsCategory {
  label: string;
  items: { question: string; answer: string }[];
}

export interface FaqTabsProps {
  eyebrow?: string;
  title?: string;
  categories?: FaqTabsCategory[];
  className?: string;
}

const DEFAULT_CATEGORIES: FaqTabsCategory[] = [
  {
    label: "Product",
    items: [
      {
        question: "Which monitoring tools do you integrate with?",
        answer: "60+ out of the box, including Datadog, Grafana, Prometheus, Sentry, New Relic, CloudWatch and any tool that can send a webhook or email.",
      },
      { question: "Do you support Microsoft Teams?", answer: "Yes. War rooms, commands and notifications work in Slack and Teams with feature parity." },
      {
        question: "Can stakeholders follow an incident without a seat?",
        answer: "Yes. Stakeholders subscribe to updates by email or Slack and view the timeline read-only, for free.",
      },
    ],
  },
  {
    label: "Billing",
    items: [
      { question: "How are seats counted?", answer: "Monthly, by the number of distinct responders on any schedule or escalation policy. Viewers are free." },
      { question: "Do you offer discounts?", answer: "20% off with yearly billing, and 50% off for non-profits and early-stage startups under $5M raised." },
      { question: "Can I pay by invoice?", answer: "Yes, on yearly Business and Enterprise plans, with NET-30 terms." },
    ],
  },
  {
    label: "Security",
    items: [
      { question: "Are you SOC 2 certified?", answer: "Yes, SOC 2 Type II and ISO 27001. Reports are available under NDA in the Trust Center." },
      { question: "Do you support SSO?", answer: "SAML SSO with Okta, Entra ID and Google on Business; SCIM provisioning on Enterprise." },
      { question: "Where is data hosted?", answer: "AWS us-east-1 by default, or eu-central-1 on Enterprise with full EU data residency." },
    ],
  },
];

/** FAQ grouped by category with an underline tab list (Radix Tabs); every answer in the active tab is visible. */
export function FaqTabs({ eyebrow = "Help center", title = "Frequently asked questions", categories = DEFAULT_CATEGORIES, className }: FaqTabsProps) {
  return (
    <section aria-labelledby="faq-tabs-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-tabs-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display">
            {title}
          </h2>
        </div>
        <Tabs.Root defaultValue={categories[0]?.label} className="mt-10">
          <Tabs.List aria-label="FAQ categories" className="flex gap-6 overflow-x-auto border-b border-da-border">
            {categories.map((c) => (
              <Tabs.Trigger
                key={c.label}
                value={c.label}
                className="da-focus da-transition -mb-px shrink-0 rounded-t-da-sm border-b-2 border-transparent pb-3 text-sm text-da-muted-fg hover:text-da-fg data-[state=active]:border-da-primary data-[state=active]:font-medium data-[state=active]:text-da-fg"
              >
                {c.label}
                <span className="ml-1.5 font-da-mono text-[11px] text-da-muted-fg">{c.items.length}</span>
              </Tabs.Trigger>
            ))}
          </Tabs.List>
          {categories.map((c) => (
            <Tabs.Content key={c.label} value={c.label} className="da-focus rounded-da-sm transition-opacity duration-(--da-duration) starting:opacity-0">
              <dl className="grid gap-x-12 gap-y-8 pt-8 md:grid-cols-2">
                {c.items.map((it) => (
                  <div key={it.question}>
                    <dt className="text-[15px] font-medium">{it.question}</dt>
                    <dd className="mt-2 text-[15px] leading-relaxed text-da-muted-fg">{it.answer}</dd>
                  </div>
                ))}
              </dl>
            </Tabs.Content>
          ))}
        </Tabs.Root>
      </div>
    </section>
  );
}

export default FaqTabs;