Testimonials Notes

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

export interface TestimonialsNotesProps {
  title?: string;
  notes?: { quote: string; name: string; role: string }[];
  className?: string;
}

const TINTS = ["bg-da-warning/30", "bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-primary/15"];
const TILTS = ["-rotate-2", "rotate-1", "-rotate-1", "rotate-2", "rotate-1", "-rotate-2"];

const DEFAULT_NOTES = [
  { quote: "Our Monday planning went from an hour to fifteen minutes.", name: "Ana Souza", role: "Studio lead, Bright & Co" },
  { quote: "It’s the first tool my whole team actually opens every day.", name: "Tom Becker", role: "Founder, Parcelly" },
  { quote: "The weekly view is magic. I finally see when I’m overbooked.", name: "Mei Tanaka", role: "Freelance designer" },
  { quote: "Reminders that don’t make me want to throw my phone. Finally.", name: "Jonas Weber", role: "Ops manager, Hive" },
  { quote: "We moved 40 Trello boards in an afternoon.", name: "Lea Martin", role: "PM, Kindred" },
  { quote: "Clients love the guest view. No more status emails!", name: "Omar Haddad", role: "Agency owner" },
];

/** Wall of pastel “sticky notes” with slight rotations and a round pin, each holding a short quote and author; straightens on hover. */
export function TestimonialsNotes({ title = "Notes from happy teams", notes = DEFAULT_NOTES, className }: TestimonialsNotesProps) {
  return (
    <section aria-labelledby="sf-notes-title" className={cn("da-section overflow-hidden bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="sf-notes-title" className="text-center font-da-display text-[clamp(2rem,4.5vw,3rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <ul className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {notes.map((n, i) => (
            <li key={n.name}>
              <figure
                className={cn(
                  "da-transition relative rounded-da-md p-7 shadow-da-md hover:rotate-0 motion-reduce:rotate-0",
                  TINTS[i % TINTS.length],
                  TILTS[i % TILTS.length],
                )}
              >
                <span aria-hidden className="absolute -top-2.5 left-1/2 size-5 -translate-x-1/2 rounded-full bg-da-primary shadow-da-sm ring-4 ring-da-bg" />
                <blockquote className="font-da-display text-xl leading-snug font-bold">“{n.quote}”</blockquote>
                <figcaption className="mt-5 text-sm">
                  <span className="font-semibold">{n.name}</span>
                  <span className="block opacity-80">{n.role}</span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsNotes;