FAQ Categories

"use client";

import { useId, useState } from "react";
import { Accordion } from "radix-ui";
import { cn } from "@/lib/utils";

export interface FaqCategoriesGroup {
  category: string;
  items: { question: string; answer: string }[];
}

export interface FaqCategoriesProps {
  kicker?: string;
  title?: string;
  groups?: FaqCategoriesGroup[];
  className?: string;
}

const DEFAULT_GROUPS: FaqCategoriesGroup[] = [
  {
    category: "Product",
    items: [
      { question: "What counts as a release?", answer: "Anything you publish: a version, a hotfix or a simple announcement. Releases are unlimited on every plan." },
      { question: "Can I edit a release after publishing?", answer: "Yes. Edits sync to the page, widget and RSS. Email digests already sent stay as they were." },
      { question: "Does the widget work with SPAs?", answer: "Yes. It's framework-agnostic and ships React, Vue and Svelte bindings." },
    ],
  },
  {
    category: "Billing",
    items: [
      { question: "Do you charge per seat?", answer: "No. You pay per project. Invite your whole company." },
      { question: "Do you offer discounts?", answer: "Free for open source, 50% for non-profits and education, 20% off with yearly billing." },
    ],
  },
  {
    category: "Security",
    items: [
      { question: "What do you read from my repo?", answer: "PR titles, labels, descriptions and merge dates. Never your source code." },
      { question: "Are you SOC 2 compliant?", answer: "Yes, SOC 2 Type II. The report is available under NDA on the Scale plan." },
    ],
  },
];

export function FaqCategories({ kicker = "[ 07 ] Help center", title = "Pick a topic.", groups = DEFAULT_GROUPS, className }: FaqCategoriesProps) {
  const [active, setActive] = useState(0);
  const id = useId();
  const group = groups[active] ?? groups[0];
  if (!group) return null;

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby={`${id}-title`}>
      <div className="da-container grid gap-10 lg:grid-cols-[280px_1fr]">
        <div>
          <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
          <h2 id={`${id}-title`} className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
            {title}
          </h2>
          <div role="group" aria-label="FAQ topics" className="mt-8 flex flex-wrap gap-3 lg:flex-col">
            {groups.map((g, i) => (
              <button
                key={g.category}
                type="button"
                aria-pressed={i === active}
                onClick={() => setActive(i)}
                className={cn(
                  "da-focus da-transition da-stroke flex items-center justify-between gap-6 px-4 py-3 text-left font-bold",
                  i === active ? "bg-da-fg text-da-bg shadow-da-sm" : "bg-da-surface text-da-surface-fg hover:bg-da-primary hover:text-da-primary-fg",
                )}
              >
                {g.category}
                <span className="font-da-mono text-xs">{g.items.length}</span>
              </button>
            ))}
          </div>
        </div>

        <div aria-live="polite">
          <h3 className="sr-only">{group.category}</h3>
          <Accordion.Root key={group.category} type="single" collapsible defaultValue="0" className="da-stroke bg-da-surface text-da-surface-fg shadow-da-lg">
            {group.items.map((item, i) => (
              <Accordion.Item key={item.question} value={String(i)} className={cn(i > 0 && "da-stroke-t")}>
                <Accordion.Header asChild>
                  <h4>
                    <Accordion.Trigger className="da-focus group flex w-full items-center justify-between gap-4 p-5 text-left text-lg font-bold data-[state=open]:bg-da-primary data-[state=open]:text-da-primary-fg">
                      {item.question}
                      <span aria-hidden className="font-da-mono text-2xl leading-none group-data-[state=open]:hidden">
                        +
                      </span>
                      <span aria-hidden className="hidden font-da-mono text-2xl leading-none group-data-[state=open]:inline">
                        −
                      </span>
                    </Accordion.Trigger>
                  </h4>
                </Accordion.Header>
                <Accordion.Content className="da-stroke-t overflow-hidden px-5 py-4 text-da-muted-fg">{item.answer}</Accordion.Content>
              </Accordion.Item>
            ))}
          </Accordion.Root>
        </div>
      </div>
    </section>
  );
}

export default FaqCategories;