Testimonials Bubbles

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

export interface TestimonialsBubblesProps {
  eyebrow?: string;
  title?: string;
  messages?: { text: string; name: string; side: "left" | "right" }[];
  className?: string;
}

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

const DEFAULT_MESSAGES: TestimonialsBubblesProps["messages"] = [
  { text: "Honestly Planta fixed our Monday meetings 😅", name: "Ana · Bright & Co", side: "left" },
  { text: "Same!! The weekly view is so clear", name: "Mei · freelancer", side: "right" },
  { text: "We moved from Trello in one afternoon, zero drama", name: "Lea · Kindred", side: "left" },
  { text: "My clients check the guest board instead of emailing me 🙌", name: "Omar · agency owner", side: "right" },
  { text: "Reminders are actually… nice? Weird feeling", name: "Jonas · Hive", side: "left" },
];

/** Testimonials styled as a friendly group chat: alternating pastel speech bubbles with round avatars and names, centered in a phone-like column. */
export function TestimonialsBubbles({
  eyebrow = "What people say",
  title = "The group chat agrees",
  messages = DEFAULT_MESSAGES,
  className,
}: TestimonialsBubblesProps) {
  return (
    <section aria-labelledby="sf-bubbles-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-[1fr_1.2fr]">
        <div>
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2 id="sf-bubbles-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-extrabold tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 max-w-sm text-lg text-da-muted-fg">Real messages from teams who switched to Planta this year.</p>
        </div>
        <ul className="mx-auto w-full max-w-md space-y-4 rounded-[36px] bg-da-surface p-5 shadow-da-lg sm:p-7">
          {(messages ?? []).map((m, i) => (
            <li key={m.text} className={cn("flex items-end gap-2.5", m.side === "right" && "flex-row-reverse")}>
              <span
                aria-hidden
                className={cn("size-8 shrink-0 rounded-full", ["bg-da-accent", "bg-da-primary/40", "bg-da-secondary", "bg-da-warning/60"][i % 4])}
              />
              <figure className="max-w-[80%]">
                <blockquote className={cn("rounded-da-lg px-4 py-3", TINTS[i % TINTS.length], m.side === "right" ? "rounded-br-[6px]" : "rounded-bl-[6px]")}>
                  {m.text}
                </blockquote>
                <figcaption className={cn("mt-1 px-2 text-xs text-da-muted-fg", m.side === "right" && "text-right")}>{m.name}</figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsBubbles;