Faq Accordion

"use client";

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

export interface FaqAccordionProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  items?: { q: string; a: string }[];
  contact?: { label: string; href: string };
  className?: string;
}

const DEFAULT_ITEMS = [
  {
    q: "How long does implementation take?",
    a: "Most teams are live in under two weeks. Growth and Enterprise plans include a dedicated onboarding specialist who maps your ERP fields and imports open invoices.",
  },
  {
    q: "Which accounting systems do you integrate with?",
    a: "NetSuite, SAP Business One, Sage Intacct, QuickBooks Online and Xero, with two-way sync of customers, invoices, payments and journal entries.",
  },
  {
    q: "Can we keep our existing payment processor?",
    a: "Yes. Ledgerly can reconcile payments from Stripe, Adyen and your bank feeds, or you can use Ledgerly Payments for lower blended rates.",
  },
  {
    q: "How is my data protected?",
    a: "Data is encrypted in transit (TLS 1.3) and at rest (AES-256). We are SOC 2 Type II and ISO 27001 certified, with EU and US data residency.",
  },
  { q: "Do you offer annual contracts?", a: "Annual billing saves 20% on Starter and Growth. Enterprise is always annual, with custom terms and invoicing." },
];

/** Two-column FAQ: heading + description + contact link on the left, bordered Radix accordion with plus icons rotating to × on the right. */
export function FaqAccordion({
  eyebrow = "FAQ",
  title = "Frequently asked questions",
  description = "Can’t find what you’re looking for? Our finance specialists answer within one business hour.",
  items = DEFAULT_ITEMS,
  contact = { label: "Contact sales", href: "#sales" },
  className,
}: FaqAccordionProps) {
  return (
    <section aria-labelledby="nc-faq-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-10 lg:grid-cols-[1fr_1.6fr]">
        <div>
          <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h2 id="nc-faq-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,2.75rem)] leading-[1.1] font-extrabold tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 text-da-muted-fg">{description}</p>
          <a
            href={contact.href}
            className="da-focus da-stroke da-transition mt-6 inline-flex h-10 items-center rounded-da-md bg-da-surface px-4 text-sm font-semibold hover:border-da-border-strong"
          >
            {contact.label}
          </a>
        </div>
        <Accordion.Root
          type="single"
          collapsible
          defaultValue="item-0"
          className="da-stroke divide-y divide-da-border rounded-da-lg bg-da-surface text-da-surface-fg"
        >
          {items.map((it, i) => (
            <Accordion.Item key={it.q} value={`item-${i}`}>
              <Accordion.Header>
                <Accordion.Trigger className="group da-focus flex w-full items-center justify-between gap-4 rounded-da-lg px-6 py-5 text-left font-semibold">
                  {it.q}
                  <Plus
                    aria-hidden
                    className="size-5 shrink-0 text-da-muted-fg transition-transform duration-(--da-duration) group-data-[state=open]:rotate-45 group-data-[state=open]:text-da-primary motion-reduce:transition-none"
                  />
                </Accordion.Trigger>
              </Accordion.Header>
              <Accordion.Content className="px-6 pb-5 text-[15px] leading-relaxed text-da-muted-fg">{it.a}</Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </div>
    </section>
  );
}

export default FaqAccordion;