FAQ Split

"use client";

import { Accordion } from "radix-ui";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

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

export interface FaqSplitProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  contact?: { label: string; href: string };
  items?: FaqSplitItem[];
  className?: string;
}

const DEFAULT_ITEMS: FaqSplitItem[] = [
  {
    question: "Can we import our schedules from PagerDuty or Opsgenie?",
    answer: "Yes. The importer brings over services, escalation policies, schedules and overrides in a few minutes, and you can run both tools side by side during the migration.",
  },
  {
    question: "Which monitoring tools send alerts to Tracewise?",
    answer: "Datadog, Grafana, Prometheus Alertmanager, New Relic, Sentry, CloudWatch and 40+ others natively — plus a generic webhook and email ingestion for everything else.",
  },
  {
    question: "How are phone and SMS notifications billed?",
    answer: "They're included on every plan with fair-use limits (500 per user per month on Pro). We never charge per alert.",
  },
  {
    question: "Where is our data hosted?",
    answer: "In AWS us-east-1 by default. Enterprise customers can choose EU (Frankfurt) residency. Data is encrypted at rest and in transit, and we're SOC 2 Type II and ISO 27001 certified.",
  },
  {
    question: "Does the AI read our private channels?",
    answer: "Only the incident channels Tracewise creates, and only when you enable AI drafts. Content is never used to train models.",
  },
];

export function FaqSplit({
  eyebrow = "FAQ",
  title = "Frequently asked questions",
  description = "Can't find what you're looking for? Our support engineers usually reply within an hour.",
  contact = { label: "Contact support", href: "#support" },
  items = DEFAULT_ITEMS,
  className,
}: FaqSplitProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)} aria-labelledby="faq-split-title">
      <div className="da-container grid gap-12 lg:grid-cols-[1fr_1.5fr]">
        <div>
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="faq-split-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 text-da-muted-fg">{description}</p>
          <a href={contact.href} className="da-focus da-transition mt-6 inline-flex items-center gap-1 rounded-da-sm text-sm font-medium text-da-fg hover:text-da-muted-fg">
            {contact.label} →
          </a>
        </div>

        <Accordion.Root type="single" collapsible className="border-t border-da-border">
          {items.map((item, i) => (
            <Accordion.Item key={item.question} value={`item-${i}`} className="border-b border-da-border">
              <Accordion.Header asChild>
                <h3>
                  <Accordion.Trigger className="da-focus group flex w-full items-center justify-between gap-6 rounded-da-sm py-5 text-left text-[15px] font-medium">
                    {item.question}
                    <ChevronDown
                      aria-hidden
                      className="size-4 shrink-0 text-da-muted-fg transition-transform duration-(--da-duration) ease-da group-data-[state=open]:rotate-180 motion-reduce:transition-none"
                    />
                  </Accordion.Trigger>
                </h3>
              </Accordion.Header>
              <Accordion.Content className="overflow-hidden data-[state=closed]:animate-[da-collapse_var(--da-duration-slow)_var(--da-ease)] data-[state=open]:animate-[da-expand_var(--da-duration-slow)_var(--da-ease)] motion-reduce:animate-none">
                <p className="pr-10 pb-5 text-[15px] leading-relaxed text-da-muted-fg">{item.answer}</p>
              </Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </div>
      <style>{`
        @keyframes da-expand { from { height: 0; opacity: 0 } to { height: var(--radix-accordion-content-height); opacity: 1 } }
        @keyframes da-collapse { from { height: var(--radix-accordion-content-height); opacity: 1 } to { height: 0; opacity: 0 } }
      `}</style>
    </section>
  );
}

export default FaqSplit;