Testimonials Ratings

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

export interface TestimonialsRatingsProps {
  title?: string;
  ratings?: { platform: string; score: string; reviews: string }[];
  badges?: string[];
  reviews?: { title: string; text: string; name: string; role: string }[];
  className?: string;
}

function Stars({ label }: { label: string }) {
  return (
    <span role="img" aria-label={label} className="flex gap-0.5 text-da-warning">
      {Array.from({ length: 5 }, (_, i) => (
        <Star key={i} aria-hidden className="size-4 fill-current" />
      ))}
    </span>
  );
}

/** Review-site proof: rating tiles per platform (score + stars + review count), a row of award badges, and two review excerpts. */
export function TestimonialsRatings({
  title = "Rated #1 for accounts receivable automation",
  ratings = [
    { platform: "G2", score: "4.8", reviews: "1,240 reviews" },
    { platform: "Capterra", score: "4.9", reviews: "860 reviews" },
    { platform: "TrustRadius", score: "9.4/10", reviews: "310 reviews" },
  ],
  badges = ["Leader · Fall 2026", "Best ROI · Mid-market", "Easiest setup", "Best support"],
  reviews = [
    {
      title: "“Finally, AR that runs itself”",
      text: "Reminders, portal and reconciliation all work together. We cut DSO by three weeks.",
      name: "Verified user",
      role: "Controller · Mid-market",
    },
    {
      title: "“The best onboarding I’ve had”",
      text: "Our CSM mapped our NetSuite fields on day one and we were live in ten days.",
      name: "Verified user",
      role: "Finance Manager · Enterprise",
    },
  ],
  className,
}: TestimonialsRatingsProps) {
  return (
    <section aria-labelledby="nc-ratings-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2
          id="nc-ratings-title"
          className="mx-auto max-w-2xl text-center font-da-display text-[clamp(1.75rem,4vw,2.5rem)] leading-tight font-extrabold tracking-da-display text-balance"
        >
          {title}
        </h2>
        <ul className="mx-auto mt-10 grid max-w-4xl gap-4 sm:grid-cols-3">
          {ratings.map((r) => (
            <li key={r.platform} className="da-stroke flex flex-col items-center rounded-da-lg bg-da-surface p-6 text-center text-da-surface-fg">
              <p className="text-sm font-semibold text-da-muted-fg">{r.platform}</p>
              <p className="mt-2 font-da-display text-4xl font-extrabold tracking-da-display">{r.score}</p>
              <div className="mt-2">
                <Stars label={`Rated ${r.score} on ${r.platform}`} />
              </div>
              <p className="mt-2 text-sm text-da-muted-fg">{r.reviews}</p>
            </li>
          ))}
        </ul>
        <ul className="mt-8 flex flex-wrap justify-center gap-2" aria-label="Awards">
          {badges.map((b) => (
            <li key={b} className="rounded-da-md bg-da-accent px-3 py-1.5 text-sm font-semibold text-da-accent-fg">
              {b}
            </li>
          ))}
        </ul>
        <ul className="mx-auto mt-10 grid max-w-4xl gap-4 md:grid-cols-2">
          {reviews.map((r) => (
            <li key={r.title} className="rounded-da-lg bg-da-surface-2 p-6">
              <figure>
                <Stars label="5 out of 5 stars" />
                <p className="mt-3 font-da-display font-bold">{r.title}</p>
                <blockquote className="mt-2 text-[15px] text-da-muted-fg">{r.text}</blockquote>
                <figcaption className="mt-4 text-sm">
                  <span className="font-semibold">{r.name}</span> · <span className="text-da-muted-fg">{r.role}</span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsRatings;