Faq Sidebar

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface FaqSidebarCategory {
  id: string;
  label: string;
  items: { q: string; a: string }[];
}

export interface FaqSidebarProps {
  title?: string;
  categories?: FaqSidebarCategory[];
  className?: string;
}

const DEFAULT_CATEGORIES: FaqSidebarCategory[] = [
  {
    id: "billing",
    label: "Billing & plans",
    items: [
      { q: "Can I change plans at any time?", a: "Yes. Upgrades are prorated immediately; downgrades apply at the next billing cycle." },
      { q: "Do you charge per user?", a: "No. Every plan includes unlimited users with role-based permissions." },
      { q: "Which payment methods do you accept?", a: "Card, ACH and wire transfer. Enterprise can be invoiced on net-30 terms." },
    ],
  },
  {
    id: "payments",
    label: "Payments",
    items: [
      { q: "How fast are payouts?", a: "Card and ACH payouts land in 2 business days by default, or instantly for 1%." },
      { q: "Which currencies are supported?", a: "You can invoice in 40 currencies and settle in USD, EUR, GBP, CAD and AUD." },
    ],
  },
  {
    id: "integrations",
    label: "Integrations",
    items: [
      { q: "Is the ERP sync two-way?", a: "Yes: customers, items, invoices, payments and journal entries sync both ways every 5 minutes." },
      { q: "Do you have an API?", a: "A REST API and webhooks are available on every plan, with sandbox keys." },
    ],
  },
  {
    id: "security",
    label: "Security",
    items: [
      { q: "Are you SOC 2 compliant?", a: "Yes, SOC 2 Type II and ISO 27001. Reports are available under NDA." },
      { q: "Do you support SSO?", a: "SAML SSO and SCIM provisioning are included in Enterprise." },
    ],
  },
];

/** Help-center style FAQ: a vertical category nav (left, becomes horizontal scroll chips on mobile) and the selected category’s questions as an open definition list. */
export function FaqSidebar({ title = "Help center", categories = DEFAULT_CATEGORIES, className }: FaqSidebarProps) {
  const [active, setActive] = useState(categories[0]?.id);
  const cat = categories.find((c) => c.id === active) ?? categories[0];
  return (
    <section aria-labelledby="nc-faqside-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="nc-faqside-title" className="font-da-display text-[clamp(2rem,4.5vw,2.75rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <div className="mt-10 grid gap-8 lg:grid-cols-[220px_1fr]">
          <nav aria-label="FAQ categories" className="min-w-0">
            <ul className="flex gap-1 relative overflow-x-auto lg:flex-col">
              {categories.map((c) => (
                <li key={c.id} className="shrink-0">
                  <button
                    type="button"
                    aria-current={c.id === cat?.id ? "true" : undefined}
                    onClick={() => setActive(c.id)}
                    className={cn(
                      "da-focus da-transition w-full rounded-da-md px-3 py-2 text-left text-sm font-medium lg:border-l-2 lg:rounded-l-none",
                      c.id === cat?.id
                        ? "bg-da-accent text-da-accent-fg lg:border-da-primary"
                        : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg lg:border-transparent",
                    )}
                  >
                    {c.label}
                    <span className="ml-2 font-da-mono text-xs opacity-70">{c.items.length}</span>
                  </button>
                </li>
              ))}
            </ul>
          </nav>
          {cat && (
            <dl
              key={cat.id}
              aria-live="polite"
              className="divide-y divide-da-border border-y border-da-border transition-opacity duration-(--da-duration) starting:opacity-0"
            >
              {cat.items.map((it) => (
                <div key={it.q} className="py-6">
                  <dt className="font-da-display text-lg font-bold">{it.q}</dt>
                  <dd className="mt-2 text-da-muted-fg">{it.a}</dd>
                </div>
              ))}
            </dl>
          )}
        </div>
      </div>
    </section>
  );
}

export default FaqSidebar;