Testimonials Masonry

import { Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TestimonialsMasonryItem {
  quote: string;
  name: string;
  role: string;
  rating?: number;
  highlight?: boolean;
}

export interface TestimonialsMasonryProps {
  eyebrow?: string;
  title?: string;
  rating?: { score: string; count: string };
  items?: TestimonialsMasonryItem[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_ITEMS: TestimonialsMasonryItem[] = [
  { quote: "The recaps are shockingly good. Decisions first, fluff removed.", name: "Maya Chen", role: "Engineering Manager", rating: 5 },
  {
    quote: "Halo is the first AI tool the whole company adopted without a mandate. People just started using it because the Slack recaps were useful.",
    name: "Amara Diallo",
    role: "Head of Product, Lumen",
    rating: 5,
    highlight: true,
  },
  { quote: "Live translation for our Seoul team is a game changer.", name: "Jin Park", role: "Design Lead", rating: 5 },
  { quote: "I haven’t written meeting notes in six months.", name: "Leo Park", role: "VP Sales, Parcel", rating: 5 },
  {
    quote: "Async videos with auto-chapters mean I watch updates at 1.5× on my commute and skip the meeting.",
    name: "Sofia Rossi",
    role: "COO, Quanta",
    rating: 5,
  },
  { quote: "Setup took two minutes. It joined my next call and I forgot it was there.", name: "Noah Klein", role: "Founder", rating: 4 },
  { quote: "Ask Halo found a customer promise from a call four months ago. Saved a renewal.", name: "Priya Raman", role: "Customer Success", rating: 5 },
];

/** Rating summary header and a masonry wall of glass quote cards (star rating, highlight card with gradient). */
export function TestimonialsMasonry({
  eyebrow = "Reviews",
  title = "Teams can’t stop talking about Halo",
  rating = { score: "4.9", count: "2,180 reviews" },
  items = DEFAULT_ITEMS,
  className,
}: TestimonialsMasonryProps) {
  return (
    <section aria-labelledby="glass-masonry-title" className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-masonry-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance"
          >
            {title}
          </h2>
          <p className={cn("mt-6 inline-flex items-center gap-2 rounded-da-pill px-4 py-2 text-sm shadow-da-sm", GLASS)}>
            <span className="flex text-da-warning" aria-hidden>
              {Array.from({ length: 5 }, (_, i) => (
                <Star key={i} className="size-4 fill-current" />
              ))}
            </span>
            <span className="font-semibold">{rating.score}/5</span>
            <span className="text-da-muted-fg">from {rating.count}</span>
          </p>
        </div>
        <ul className="mt-12 gap-4 sm:columns-2 lg:columns-3">
          {items.map((t) => (
            <li key={t.name} className="mb-4 break-inside-avoid">
              <figure
                className={cn("rounded-da-lg p-6 shadow-da-md", t.highlight ? "bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg" : GLASS)}
              >
                {t.rating !== undefined && (
                  <p className={cn("flex", t.highlight ? "text-da-primary-fg" : "text-da-warning")}>
                    <span className="sr-only">Rated {t.rating} out of 5</span>
                    {Array.from({ length: 5 }, (_, i) => (
                      <Star key={i} aria-hidden className={cn("size-4", i < t.rating! ? "fill-current" : "opacity-30")} />
                    ))}
                  </p>
                )}
                <blockquote className={cn("mt-4 leading-relaxed", t.highlight ? "font-da-display text-lg font-medium" : "text-[15px]")}>“{t.quote}”</blockquote>
                <figcaption className="mt-5 text-sm">
                  <span className="block font-semibold">{t.name}</span>
                  <span className={cn("block", t.highlight ? "opacity-90" : "text-da-muted-fg")}>{t.role}</span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsMasonry;