Testimonials Chat

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

export interface TestimonialsChatItem {
  quote: string;
  name: string;
  role: string;
  initials: string;
  tone?: "primary" | "accent" | "success" | "warning";
}

export interface TestimonialsChatProps {
  title?: string;
  description?: string;
  items?: TestimonialsChatItem[];
  className?: string;
}

const TONES = {
  primary: "bg-da-primary text-da-primary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  success: "bg-da-success text-da-success-fg",
  warning: "bg-da-warning text-da-warning-fg",
} as const;

const DEFAULT_ITEMS: TestimonialsChatItem[] = [
  { quote: "I stopped digging through Slack. I just ask Nova what we decided and it links me to the exact thread.", name: "Maya Chen", role: "Head of Product, Parcel", initials: "MC", tone: "primary" },
  { quote: "Onboarding a new engineer used to take two weeks of ‘ask Leo’. Now it's a conversation with Nova on day one.", name: "Leo Martins", role: "Staff Engineer, Tidewell", initials: "LM", tone: "accent" },
  { quote: "The release-notes agent writes 90% of our changelog. We just fix the jokes.", name: "Sara Okafor", role: "PM, Brightside", initials: "SO", tone: "success" },
  { quote: "It feels like chatting with the most organized person on the team. Who never sleeps.", name: "Tom Dubois", role: "CEO, Fieldnote", initials: "TD", tone: "warning" },
];

/** Customer quotes laid out as a group chat: alternating left/right message bubbles with colored initials, names and roles. */
export function TestimonialsChat({
  title = "Teams talk about Nova the way they talk to it",
  description = "A few messages from the people who use it every day.",
  items = DEFAULT_ITEMS,
  className,
}: TestimonialsChatProps) {
  return (
    <section className={cn("da-section", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="font-da-display text-3xl font-semibold tracking-da-display text-balance sm:text-4xl">{title}</h2>
          <p className="mt-3 text-da-muted-fg">{description}</p>
        </div>
        <ol className="mx-auto mt-12 flex max-w-3xl flex-col gap-6">
          {items.map((t, i) => {
            const mine = i % 2 === 1;
            return (
              <li key={t.name} className={cn("flex items-end gap-3", mine && "flex-row-reverse")}>
                <span aria-hidden className={cn("grid size-9 shrink-0 place-items-center rounded-full font-da-display text-xs font-semibold", TONES[t.tone ?? "primary"])}>
                  {t.initials}
                </span>
                <figure className={cn("flex max-w-[85%] flex-col gap-1.5 sm:max-w-[75%]", mine && "items-end")}>
                  <blockquote
                    className={cn(
                      "px-5 py-3 text-[15px] leading-relaxed",
                      mine ? "rounded-da-lg rounded-br-da-sm bg-da-secondary" : "da-stroke rounded-da-lg rounded-bl-da-sm bg-da-surface",
                    )}
                  >
                    <p>{t.quote}</p>
                  </blockquote>
                  <figcaption className="px-1 text-xs text-da-muted-fg">
                    <span className="font-medium text-da-fg">{t.name}</span> · {t.role}
                  </figcaption>
                </figure>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

export default TestimonialsChat;