Testimonials Carousel

"use client";

import { useId, useState } from "react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TestimonialsCarouselItem {
  quote: string;
  name: string;
  title: string;
  company: string;
}

export interface TestimonialsCarouselProps {
  eyebrow?: string;
  items?: TestimonialsCarouselItem[];
  className?: string;
}

const DEFAULT_ITEMS: TestimonialsCarouselItem[] = [
  {
    quote: "We went from 400 pages a week to 60. Tracewise didn’t just route alerts better — it gave our engineers their evenings back.",
    name: "Priya Raman",
    title: "VP Engineering",
    company: "Northwind",
  },
  {
    quote: "The first incident we ran in Tracewise had a clean timeline and a postmortem draft before the call ended. Nobody wants to go back.",
    name: "Daniel Okafor",
    title: "Staff SRE",
    company: "Lumen",
  },
  {
    quote: "Our status page used to lag the outage by twenty minutes. Now it flips before customers tweet about it.",
    name: "Hannah Weiss",
    title: "Head of Support",
    company: "Parcel",
  },
  {
    quote: "Migrating 40 rotations from PagerDuty took one afternoon and one pull request. That’s the whole review.",
    name: "Tomás Herrera",
    title: "Platform Lead",
    company: "Heliograph",
  },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2);
}

/** One large quote at a time with prev/next buttons, dot pager and a cross-fade; arrow keys work when focused. */
export function TestimonialsCarousel({ eyebrow = "Customers", items = DEFAULT_ITEMS, className }: TestimonialsCarouselProps) {
  const [index, setIndex] = useState(0);
  const id = useId();
  const count = items.length;
  const go = (d: number) => setIndex((i) => (i + d + count) % count);

  return (
    <section
      aria-roledescription="carousel"
      aria-label="Customer testimonials"
      className={cn("da-section bg-da-bg text-da-fg", className)}
      onKeyDown={(e) => {
        if (e.key === "ArrowLeft") go(-1);
        if (e.key === "ArrowRight") go(1);
      }}
    >
      <div className="da-container">
        <div className="mx-auto max-w-3xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <div className="relative mt-6 grid">
            {items.map((t, i) => (
              <figure
                key={t.name}
                id={`${id}-${i}`}
                role="group"
                aria-roledescription="slide"
                aria-label={`${i + 1} of ${count}`}
                aria-hidden={i !== index}
                inert={i !== index}
                className={cn(
                  "col-start-1 row-start-1 transition-[opacity,translate] duration-(--da-duration-slow) ease-da motion-reduce:transition-none",
                  i === index ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0",
                )}
              >
                <blockquote className="text-[clamp(1.5rem,3.2vw,2.25rem)] leading-[1.25] font-medium tracking-da-display text-balance">“{t.quote}”</blockquote>
                <figcaption className="mt-8 flex items-center gap-3">
                  <span aria-hidden className="grid size-10 place-items-center rounded-full bg-da-accent text-sm font-medium text-da-accent-fg">
                    {initials(t.name)}
                  </span>
                  <span className="text-sm">
                    <span className="block font-medium">{t.name}</span>
                    <span className="block text-da-muted-fg">
                      {t.title}, {t.company}
                    </span>
                  </span>
                </figcaption>
              </figure>
            ))}
          </div>
          <div className="mt-10 flex items-center justify-between border-t border-da-border pt-6">
            <div className="flex gap-1.5" role="group" aria-label="Choose testimonial">
              {items.map((t, i) => (
                <button
                  key={t.name}
                  type="button"
                  aria-label={`Show testimonial ${i + 1}: ${t.company}`}
                  aria-current={i === index ? "true" : undefined}
                  aria-controls={`${id}-${i}`}
                  onClick={() => setIndex(i)}
                  className={cn("da-focus da-transition h-1.5 rounded-full", i === index ? "w-6 bg-da-fg" : "w-1.5 bg-da-border-strong hover:bg-da-muted-fg")}
                />
              ))}
            </div>
            <div className="flex items-center gap-2">
              <p className="mr-2 font-da-mono text-xs text-da-muted-fg tabular-nums" aria-live="polite">
                {String(index + 1).padStart(2, "0")} / {String(count).padStart(2, "0")}
              </p>
              <button
                type="button"
                onClick={() => go(-1)}
                aria-label="Previous testimonial"
                className="da-focus da-transition da-stroke grid size-9 place-items-center rounded-full hover:bg-da-muted"
              >
                <ArrowLeft aria-hidden className="size-4" />
              </button>
              <button
                type="button"
                onClick={() => go(1)}
                aria-label="Next testimonial"
                className="da-focus da-transition da-stroke grid size-9 place-items-center rounded-full hover:bg-da-muted"
              >
                <ArrowRight aria-hidden className="size-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default TestimonialsCarousel;