Faq List

"use client";

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

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

const DEFAULT_ITEMS = [
  { q: "Can I use my own domain?", a: "Yes. Every paid plan includes a custom domain with automatic SSL. Point your DNS and you’re live in minutes." },
  { q: "Can I upload my own fonts?", a: "Upload any WOFF2 you have a web license for. Variable axes and OpenType features are supported." },
  { q: "Is there a free plan?", a: "Personal is free forever with a frame.studio address and a small badge." },
  { q: "Can I export my site?", a: "You can export all content and images at any time. Your work stays yours." },
  { q: "Do you offer education discounts?", a: "Students and teachers get Studio for free — verify with your school email." },
];

/** Numbered accordion FAQ in a ruled list: mono index + question, a +/− glyph that swaps, answer indented under the question; left column holds the label and title. */
export function FaqList({ label = "(07) FAQ", title = "Questions", items = DEFAULT_ITEMS, className }: FaqListProps) {
  return (
    <section aria-labelledby="mc-fl-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-10 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
          <h2 id="mc-fl-title" className="mt-4 font-da-display text-[clamp(2.5rem,5vw,4rem)] leading-none font-medium tracking-da-display">
            {title}
          </h2>
        </div>
        <Accordion.Root type="single" collapsible className="border-t border-da-border-strong lg:col-span-8">
          {items.map((it, i) => (
            <Accordion.Item key={it.q} value={`q${i}`} className="border-b border-da-border">
              <Accordion.Header>
                <Accordion.Trigger className="group da-focus flex w-full items-baseline gap-5 py-6 text-left text-xl font-medium">
                  <span className="font-da-mono text-xs text-da-muted-fg">{String(i + 1).padStart(2, "0")}</span>
                  <span className="flex-1">{it.q}</span>
                  <span aria-hidden className="font-da-mono text-lg">
                    <span className="group-data-[state=open]:hidden">+</span>
                    <span className="hidden group-data-[state=open]:inline">−</span>
                  </span>
                </Accordion.Trigger>
              </Accordion.Header>
              <Accordion.Content className="pb-6 pl-10 text-da-muted-fg">{it.a}</Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </div>
    </section>
  );
}

export default FaqList;