Faq Pills

import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqPillsProps {
  title?: string;
  items?: { question: string; answer: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { question: "Is Planta really free?", answer: "Yes — free forever for teams of up to 5, with 3 boards and the weekly view. No trial countdown." },
  { question: "Can I import from Trello or Asana?", answer: "One click for Trello, Asana and CSV. Labels, due dates and checklists come along." },
  { question: "Do guests need to pay?", answer: "Never. Invite clients and freelancers to specific boards for free on any paid plan." },
  { question: "Is there a mobile app?", answer: "Yes, for iOS and Android, with offline mode and home-screen widgets." },
  {
    question: "How do reminders work?",
    answer: "One friendly nudge the day before a task is due, at a time you choose. You can snooze or turn them off per board.",
  },
];

/** Single-column FAQ of soft rounded blocks using native details/summary; the open item turns lavender and its round chevron flips. */
export function FaqPills({ title = "Questions? We’ve got answers", items = DEFAULT_ITEMS, className }: FaqPillsProps) {
  return (
    <section aria-labelledby="sf-faq-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="sf-faq-title" className="text-center font-da-display text-[clamp(2rem,4.5vw,3rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <div className="mx-auto mt-12 max-w-2xl space-y-3">
          {items.map((it) => (
            <details key={it.question} className="group da-transition rounded-da-lg bg-da-surface shadow-da-sm open:bg-da-primary/12 open:shadow-none">
              <summary className="da-focus flex cursor-pointer list-none items-center justify-between gap-4 rounded-da-lg px-6 py-5 font-da-display text-lg font-bold [&::-webkit-details-marker]:hidden">
                {it.question}
                <span
                  aria-hidden
                  className="da-transition grid size-8 shrink-0 place-items-center rounded-full bg-da-surface-2 group-open:rotate-180 group-open:bg-da-primary group-open:text-da-primary-fg"
                >
                  <ChevronDown className="size-4" />
                </span>
              </summary>
              <p className="px-6 pb-6 text-da-muted-fg">{it.answer}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

export default FaqPills;