Faq Columns

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

export interface FaqColumnsProps {
  title?: string;
  description?: string;
  contact?: { label: string; href: string };
  items?: { question: string; answer: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { question: "How long does setup take?", answer: "About two minutes. Pick a template, invite your team, done." },
  { question: "Can I use Planta alone?", answer: "Absolutely — lots of freelancers use it as a personal weekly planner." },
  { question: "What happens to my data if I leave?", answer: "Export everything as CSV or JSON at any time. It’s your stuff." },
  { question: "Do you offer discounts?", answer: "50% off for non-profits, schools and students. Just ask." },
  { question: "Is my data safe?", answer: "Encrypted in transit and at rest, hosted in the EU, GDPR-ready." },
  { question: "Can I change plans later?", answer: "Anytime. Upgrades are pro-rated; downgrades keep your boards." },
];

/** Two-column FAQ with everything visible: a sticky intro + contact pill on the left, soft numbered Q&As in a 2-col grid on the right. */
export function FaqColumns({
  title = "Frequently asked",
  description = "Can’t find what you’re looking for? Our team replies within a few hours.",
  contact = { label: "Chat with us 💬", href: "#chat" },
  items = DEFAULT_ITEMS,
  className,
}: FaqColumnsProps) {
  return (
    <section aria-labelledby="sf-faqcol-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-12 lg:grid-cols-[1fr_2fr]">
        <div className="lg:sticky lg:top-8 lg:self-start">
          <h2 id="sf-faqcol-title" className="font-da-display text-[clamp(2rem,4.5vw,3rem)] font-extrabold tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          <a
            href={contact.href}
            className="da-focus da-transition mt-6 inline-flex h-12 items-center rounded-da-pill bg-da-accent px-6 font-semibold text-da-accent-fg hover:-translate-y-0.5"
          >
            {contact.label}
          </a>
        </div>
        <dl className="grid gap-x-8 gap-y-8 sm:grid-cols-2">
          {items.map((it, i) => (
            <div key={it.question}>
              <dt className="flex items-start gap-3 font-da-display text-lg font-extrabold">
                <span
                  aria-hidden
                  className="grid size-7 shrink-0 place-items-center rounded-full bg-da-primary/12 font-da-mono text-xs font-medium text-da-primary"
                >
                  {i + 1}
                </span>
                {it.question}
              </dt>
              <dd className="mt-2 pl-10 text-da-muted-fg">{it.answer}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

export default FaqColumns;