Faq Split

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

export interface FaqSplitProps {
  title?: string;
  items?: { q: string; a: string }[];
  contact?: { label: string; email: string };
  className?: string;
}

const DEFAULT_ITEMS = [
  { q: "How fast are Frame sites?", a: "Pages are static and served from 310 edge locations. Median load time is 0.6 seconds." },
  { q: "Do I need to code?", a: "No. But if you want to, every site accepts custom CSS and embeds." },
  { q: "Can clients edit their site?", a: "On Agency you can hand off a site with limited editing roles." },
  { q: "What happens if I cancel?", a: "Your site stays online until the end of the period, then becomes a private archive you can export." },
];

/** Always-open FAQ as a two-column definition list (question left in medium weight, answer right in muted text) on hairline rows, followed by a mono contact line. */
export function FaqSplit({
  title = "Frequently asked",
  items = DEFAULT_ITEMS,
  contact = { label: "Still curious?", email: "hello@frame.studio" },
  className,
}: FaqSplitProps) {
  return (
    <section aria-labelledby="mc-fs2-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-fs2-title" className="font-da-display text-[clamp(2rem,4vw,3rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <dl className="mt-12 border-t border-da-border-strong">
          {items.map((it) => (
            <div key={it.q} className="grid gap-2 border-b border-da-border py-6 md:grid-cols-12 md:gap-8">
              <dt className="text-lg font-medium md:col-span-5">{it.q}</dt>
              <dd className="text-da-muted-fg md:col-span-6 md:col-start-7">{it.a}</dd>
            </div>
          ))}
        </dl>
        <p className="mt-8 font-da-mono text-xs tracking-da-label uppercase">
          <span className="text-da-muted-fg">{contact.label} </span>
          <a href={`mailto:${contact.email}`} className="da-focus rounded-da-sm underline decoration-da-accent decoration-2 underline-offset-4">
            {contact.email}
          </a>
        </p>
      </div>
    </section>
  );
}

export default FaqSplit;