Testimonials Wall

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

export interface TestimonialsWallProps {
  title?: string;
  items?: { text: string; name: string; role: string; tone?: "paper" | "sage" | "clay" }[];
  className?: string;
}

const DEFAULT_ITEMS: NonNullable<TestimonialsWallProps["items"]> = [
  { text: "Honest numbers, gentle design. Our team opens it without being asked.", name: "Léa Martin", role: "COO, Atelier Nord" },
  { text: "We replaced a €40k consultant engagement with Grove and got better data.", name: "Jonas Weber", role: "CFO, Holzwerk", tone: "sage" },
  { text: "Love the ‘human equivalents’. Our customers finally get what a tonne means.", name: "Priya Nair", role: "Brand lead, Loop Coffee" },
  { text: "Support replied with an actual climate scientist within an hour.", name: "Sam Carter", role: "Ops, Wildway Travel", tone: "clay" },
  { text: "Setting targets felt scary. Grove made it a conversation, not a lecture.", name: "Ana Costa", role: "Founder, Terra Kids" },
  { text: "Our B Corp recertification took half the time.", name: "Emil Berg", role: "Impact manager, Fjell Outdoor", tone: "sage" },
];

const TONE = {
  paper: "bg-da-surface text-da-surface-fg shadow-da-sm",
  sage: "bg-da-accent text-da-accent-fg",
  clay: "bg-da-secondary text-da-secondary-fg",
} as const;

/** Masonry wall of soft rounded quote cards in mixed tints (CSS columns), each with a small leaf-dot avatar, name and role. */
export function TestimonialsWall({ title = "Loved by teams who care", items = DEFAULT_ITEMS, className }: TestimonialsWallProps) {
  return (
    <section aria-labelledby="os-tw-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="os-tw-title" className="max-w-xl font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display">
          {title}
        </h2>
        <ul className="mt-12 columns-1 gap-5 sm:columns-2 lg:columns-3">
          {items.map((t) => (
            <li key={t.name} className={cn("mb-5 break-inside-avoid rounded-da-lg p-7", TONE[t.tone ?? "paper"])}>
              <figure>
                <blockquote className="text-lg leading-relaxed">“{t.text}”</blockquote>
                <figcaption className="mt-5 flex items-center gap-3 text-sm">
                  <span aria-hidden className="grid size-9 place-items-center rounded-[60%_0] bg-current/15 font-da-display">
                    {t.name[0]}
                  </span>
                  <span>
                    <span className="block font-medium">{t.name}</span>
                    <span className="block opacity-75">{t.role}</span>
                  </span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsWall;