Marquee wall

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
  Badge,
  Card,
  CardContent,
  Marquee,
} from "@cooud-ui/ui";
import { Sparkles } from "lucide-react";

const TESTIMONIALS = [
  {
    quote:
      "Cooud let us replace a tangle of one-off components with one themeable system. Our redesign shipped weeks early.",
    name: "Amara Okafor",
    role: "VP Design, Northwind",
    initials: "AO",
    img: "https://i.pravatar.cc/96?img=5",
  },
  {
    quote:
      "Every surface inherits our brand the moment we change a token. It's the closest thing to magic our team has shipped.",
    name: "Marco Rossi",
    role: "Staff Engineer, Lumen",
    initials: "MR",
    img: "https://i.pravatar.cc/96?img=12",
  },
  {
    quote:
      "Accessibility used to be an afterthought. Now it's the default — we pass audits without a scramble before launch.",
    name: "Priya Nair",
    role: "Head of Product, Cobalt",
    initials: "PN",
    img: "https://i.pravatar.cc/96?img=32",
  },
  {
    quote:
      "We onboarded three new engineers in a day. The blocks read like documentation you can paste straight into the app.",
    name: "Jonas Berg",
    role: "Engineering Lead, Fathom",
    initials: "JB",
    img: "https://i.pravatar.cc/96?img=68",
  },
  {
    quote:
      "The marquee, the cards, the gradients — it all feels premium out of the box. Our marketing site looks bespoke.",
    name: "Sofia Lindqvist",
    role: "Founder, Driftwood",
    initials: "SL",
    img: "https://i.pravatar.cc/96?img=47",
  },
  {
    quote:
      "Cooud is the first design system our designers and engineers actually agree on. That alone paid for itself.",
    name: "David Chen",
    role: "CTO, Parallel",
    initials: "DC",
    img: "https://i.pravatar.cc/96?img=15",
  },
];

const TESTIMONIAL_AVATARS = [
  { src: "https://i.pravatar.cc/96?img=5", alt: "Amara Okafor", fallback: "AO" },
  { src: "https://i.pravatar.cc/96?img=12", alt: "Marco Rossi", fallback: "MR" },
  { src: "https://i.pravatar.cc/96?img=32", alt: "Priya Nair", fallback: "PN" },
  { src: "https://i.pravatar.cc/96?img=68", alt: "Jonas Berg", fallback: "JB" },
  { src: "https://i.pravatar.cc/96?img=47", alt: "Sofia Lindqvist", fallback: "SL" },
];

function TestimonialCard({ testimonial }) {
  return (
    <Card className="w-80 shrink-0 border-border bg-surface-raised">
      <CardContent className="flex flex-col gap-5 pt-6">
        <p className="text-sm leading-6 text-fg-secondary">“{testimonial.quote}”</p>
        <div className="flex items-center gap-3">
          <Avatar className="size-9">
            <AvatarImage src={testimonial.img} alt={testimonial.name} />
            <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
              {testimonial.initials}
            </AvatarFallback>
          </Avatar>
          <div className="min-w-0">
            <p className="truncate text-sm font-medium text-fg">{testimonial.name}</p>
            <p className="truncate text-xs text-fg-tertiary">{testimonial.role}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function TestimonialsBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
        <Badge variant="secondary" className="gap-1.5">
          <Sparkles aria-hidden="true" className="size-3.5" />
          Loved by teams
        </Badge>
        <h2 className="mt-4 text-balance font-display text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
          Loved by modern product teams
        </h2>
        <p className="mt-4 text-balance text-fg-secondary">
          From seed-stage startups to public companies — teams ship faster when every surface is
          accessible, themeable, and consistent.
        </p>
        <div className="mt-7 flex items-center gap-3">
          <AvatarGroup avatars={TESTIMONIAL_AVATARS} aria-label="Teams using Cooud" />
          <p className="text-sm text-fg-tertiary">
            Join <span className="font-medium text-fg">4,000+</span> teams shipping with Cooud
          </p>
        </div>
      </div>
      <div className="mt-14">
        <Marquee pauseOnHover gap="1.5rem">
          {TESTIMONIALS.map((testimonial) => (
            <TestimonialCard key={testimonial.name} testimonial={testimonial} />
          ))}
        </Marquee>
      </div>
    </section>
  );
}