Faq Security

import { Lock, ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqSecurityProps {
  eyebrow?: string;
  title?: string;
  certifications?: { name: string; detail: string }[];
  items?: { q: string; a: string }[];
  trustHref?: string;
  className?: string;
}

const DEFAULT_ITEMS = [
  { q: "Where is our data hosted?", a: "AWS in us-east-1 or eu-central-1, chosen per workspace. Backups stay in-region." },
  { q: "How is data encrypted?", a: "TLS 1.3 in transit and AES-256 at rest, with keys managed in AWS KMS and rotated yearly." },
  { q: "Who at Ledgerly can access our data?", a: "Only on-call engineers, through just-in-time access that you approve and that is logged." },
  { q: "Do you run penetration tests?", a: "Twice a year by an independent firm. Summaries are shared under NDA in our Trust Center." },
];

/** Security & compliance FAQ: dark-tinted certification cards (SOC 2, ISO 27001, GDPR, PCI) with shield icons, then security questions as native <details> disclosure rows. */
export function FaqSecurity({
  eyebrow = "Security",
  title = "Built for the scrutiny of your auditors",
  certifications = [
    { name: "SOC 2 Type II", detail: "Audited annually" },
    { name: "ISO 27001", detail: "Certified since 2023" },
    { name: "GDPR", detail: "EU data residency" },
    { name: "PCI DSS L1", detail: "Payments processing" },
  ],
  items = DEFAULT_ITEMS,
  trustHref = "#trust",
  className,
}: FaqSecurityProps) {
  return (
    <section aria-labelledby="nc-sec-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div className="max-w-2xl">
            <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
            <h2
              id="nc-sec-title"
              className="mt-3 font-da-display text-[clamp(2rem,4.5vw,2.75rem)] leading-[1.1] font-extrabold tracking-da-display text-balance"
            >
              {title}
            </h2>
          </div>
          <a
            href={trustHref}
            className="da-focus da-stroke da-transition inline-flex h-10 items-center gap-2 rounded-da-md bg-da-surface px-4 text-sm font-semibold hover:border-da-border-strong"
          >
            <Lock aria-hidden className="size-4" /> Visit Trust Center
          </a>
        </div>
        <ul className="mt-10 grid grid-cols-2 gap-3 lg:grid-cols-4">
          {certifications.map((c) => (
            <li key={c.name} className="flex items-center gap-3 rounded-da-lg bg-da-fg p-4 text-da-bg">
              <ShieldCheck aria-hidden className="size-7 shrink-0" />
              <span>
                <span className="block text-sm font-bold">{c.name}</span>
                <span className="block text-xs opacity-75">{c.detail}</span>
              </span>
            </li>
          ))}
        </ul>
        <div className="mt-10 divide-y divide-da-border border-y border-da-border">
          {items.map((it) => (
            <details key={it.q} className="group py-1">
              <summary className="da-focus flex cursor-pointer list-none items-center justify-between gap-4 rounded-da-sm py-4 font-semibold [&::-webkit-details-marker]:hidden">
                {it.q}
                <span aria-hidden className="font-da-mono text-da-muted-fg group-open:text-da-primary">
                  <span className="group-open:hidden">+</span>
                  <span className="hidden group-open:inline">−</span>
                </span>
              </summary>
              <p className="pb-5 text-da-muted-fg">{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

export default FaqSecurity;