Testimonials Notes

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

export interface TestimonialsNotesProps {
  title?: string;
  notes?: { text: string; name: string; company: string; tone: "paper" | "sage" | "clay" }[];
  className?: string;
}

const TONE = { paper: "bg-da-surface text-da-surface-fg", sage: "bg-da-accent text-da-accent-fg", clay: "bg-da-secondary text-da-secondary-fg" } as const;
const TILT = ["-rotate-2", "rotate-1", "-rotate-1", "rotate-2"];

/** Kind words as handwritten-feeling notes: slightly tilted paper/sage/clay cards with italic serif quotes and a small “pinned” dot, straightening on hover. */
export function TestimonialsNotes({
  title = "Kind words from the field",
  notes = [
    { text: "Grove made our first climate report feel doable — and even a bit joyful.", name: "Léa Martin", company: "Atelier Nord", tone: "paper" },
    { text: "Our suppliers actually answered. The form is so friendly they thanked us.", name: "Tomás Rivera", company: "Casa Verde Foods", tone: "sage" },
    { text: "We cut 19% in a year, and every number is traceable for the auditors.", name: "Ingrid Solberg", company: "Fjell Outdoor", tone: "clay" },
    { text: "Finally a tool that doesn’t lecture. It just shows what to do next.", name: "Amara Okoye", company: "Bloom Studio", tone: "paper" },
  ],
  className,
}: TestimonialsNotesProps) {
  return (
    <section aria-labelledby="os-tn-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <h2 id="os-tn-title" className="text-center font-da-display text-[clamp(2.25rem,5vw,3.5rem)] tracking-da-display">
          {title}
        </h2>
        <ul className="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {notes.map((n, i) => (
            <li
              key={n.name}
              className={cn("da-transition relative rounded-da-md p-7 shadow-da-md hover:rotate-0 motion-reduce:transition-none", TONE[n.tone], TILT[i % 4])}
            >
              <span aria-hidden className="absolute -top-2 left-1/2 size-4 -translate-x-1/2 rounded-full bg-da-secondary-fg/60 shadow-da-sm" />
              <figure>
                <blockquote className="font-da-display text-xl leading-snug italic">“{n.text}”</blockquote>
                <figcaption className="mt-6 text-sm">
                  <span className="font-medium">{n.name}</span>
                  <span className="block opacity-80">{n.company}</span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsNotes;