Faq Tinted

"use client";

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

export interface FaqTintedProps {
  title?: string;
  topics?: { label: string; emoji: string; items: { question: string; answer: string }[] }[];
  className?: string;
}

const TINTS = ["bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-primary/12 text-da-fg"];

const DEFAULT_TOPICS: NonNullable<FaqTintedProps["topics"]> = [
  {
    label: "Getting started",
    emoji: "🚀",
    items: [
      { question: "Where do I start?", answer: "Pick a template on the welcome screen — it comes with example tasks you can delete." },
      { question: "How do I invite people?", answer: "Share button → paste emails. They get a friendly invite with a magic link." },
    ],
  },
  {
    label: "Billing",
    emoji: "💳",
    items: [
      { question: "When am I charged?", answer: "Only when your team grows past 5 people, on the first of the month." },
      { question: "Can I pay yearly?", answer: "Yes, and you save 25%. Invoices are available in Settings → Billing." },
    ],
  },
  {
    label: "Privacy",
    emoji: "🔒",
    items: [
      { question: "Who can see my boards?", answer: "Only people you invite. Private boards are visible to you alone." },
      { question: "Where is data stored?", answer: "In Frankfurt, Germany. We never sell or share your data." },
    ],
  },
];

/** FAQ grouped by topic: three big pastel topic buttons (emoji + label) switch the visible Q&A list below, which fades in. */
export function FaqTinted({ title = "Help center", topics = DEFAULT_TOPICS, className }: FaqTintedProps) {
  const [active, setActive] = useState(0);
  const topic = topics[active] ?? topics[0];
  return (
    <section aria-labelledby="sf-tinted-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="sf-tinted-title" className="text-center font-da-display text-[clamp(2rem,4.5vw,3rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <div role="group" aria-label="Topics" className="mx-auto mt-10 grid max-w-3xl gap-3 sm:grid-cols-3">
          {topics.map((t, i) => (
            <button
              key={t.label}
              type="button"
              aria-pressed={i === active}
              onClick={() => setActive(i)}
              className={cn(
                "da-focus da-transition flex flex-col items-center gap-2 rounded-da-lg p-5 font-da-display text-lg font-extrabold",
                TINTS[i % TINTS.length],
                i === active ? "scale-[1.03] shadow-da-md ring-3 ring-da-fg/10" : "opacity-75 hover:opacity-100",
              )}
            >
              <span aria-hidden className="text-3xl">
                {t.emoji}
              </span>
              {t.label}
            </button>
          ))}
        </div>
        <dl
          key={active}
          className="mx-auto mt-8 max-w-3xl space-y-3 transition-[opacity,translate] duration-(--da-duration-slow) ease-da starting:translate-y-2 starting:opacity-0"
          aria-live="polite"
        >
          {topic?.items.map((it) => (
            <div key={it.question} className="rounded-da-lg bg-da-surface p-6 shadow-da-sm">
              <dt className="font-da-display text-lg font-extrabold">{it.question}</dt>
              <dd className="mt-1.5 text-da-muted-fg">{it.answer}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

export default FaqTinted;