Testimonials Carousel

"use client";

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

export interface TestimonialsCarouselProps {
  title?: string;
  items?: { quote: string; name: string; company: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { quote: "The supplier portal changed everything. Real data replaced guesses within two months.", name: "Tomás Rivera", company: "Casa Verde Foods" },
  { quote: "Our board finally understood our footprint because Grove explains it in human terms.", name: "Amara Okoye", company: "Bloom Studio" },
  { quote: "CSRD scared us. Grove turned it into a checklist we finished in three weeks.", name: "Jonas Weber", company: "Holzwerk GmbH" },
];

/** Gentle one-at-a-time carousel on a sage band: serif quote cross-fades, round prev/next buttons, leaf-shaped position dots; no autoplay. */
export function TestimonialsCarousel({ title = "What teams say", items = DEFAULT_ITEMS, className }: TestimonialsCarouselProps) {
  const [i, setI] = useState(0);
  const it = items[i] ?? items[0]!;
  const go = (d: number) => setI((i + d + items.length) % items.length);
  return (
    <section
      aria-roledescription="carousel"
      aria-label={title}
      className={cn(
        "da-section bg-(--g) text-(--gfg) [--g:var(--da-primary)] [--gfg:var(--da-primary-fg)] dark:[--g:var(--da-accent)] dark:[--gfg:var(--da-accent-fg)]",
        className,
      )}
    >
      <div className="da-container max-w-3xl text-center">
        <h2 className="text-sm font-medium opacity-80">{title}</h2>
        <figure
          key={i}
          aria-live="polite"
          aria-roledescription="slide"
          aria-label={`${i + 1} of ${items.length}`}
          className="mt-8 transition-opacity duration-(--da-duration-slow) starting:opacity-0"
        >
          <blockquote className="font-da-display text-[clamp(1.75rem,4vw,2.75rem)] leading-snug text-balance">“{it.quote}”</blockquote>
          <figcaption className="mt-8">
            <span className="font-medium">{it.name}</span> <span className="opacity-80">· {it.company}</span>
          </figcaption>
        </figure>
        <div className="mt-10 flex items-center justify-center gap-5">
          <button
            type="button"
            aria-label="Previous testimonial"
            onClick={() => go(-1)}
            className="da-focus grid size-12 place-items-center rounded-full border border-(--gfg)/40 hover:bg-(--gfg)/10"
          >
            <ArrowLeft aria-hidden className="size-5" />
          </button>
          <div className="flex gap-2">
            {items.map((_, j) => (
              <button
                key={j}
                type="button"
                aria-label={`Show testimonial ${j + 1}`}
                aria-current={j === i ? "true" : undefined}
                onClick={() => setI(j)}
                className={cn("da-focus da-transition h-3 rounded-[60%_0] bg-(--gfg)", j === i ? "w-6 opacity-100" : "w-3 opacity-40 hover:opacity-70")}
              />
            ))}
          </div>
          <button
            type="button"
            aria-label="Next testimonial"
            onClick={() => go(1)}
            className="da-focus grid size-12 place-items-center rounded-full border border-(--gfg)/40 hover:bg-(--gfg)/10"
          >
            <ArrowRight aria-hidden className="size-5" />
          </button>
        </div>
      </div>
    </section>
  );
}

export default TestimonialsCarousel;