Testimonials Slider

"use client";

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

export interface TestimonialsSliderProps {
  title?: string;
  items?: { quote: string; name: string; role: string; rating: number }[];
  className?: string;
}

const TINTS = ["bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-primary/12", "bg-da-warning/25"];

const DEFAULT_ITEMS = [
  {
    quote: "Planning our content calendar used to be chaos. Now it’s a board and a weekly view — done.",
    name: "Mei Tanaka",
    role: "Content lead, Nook",
    rating: 5,
  },
  { quote: "The first productivity app that doesn’t make me feel behind.", name: "Tom Becker", role: "Founder, Parcelly", rating: 5 },
  { quote: "Guests are free, so our clients see progress without another login fee.", name: "Omar Haddad", role: "Agency owner", rating: 5 },
  { quote: "Recurring tasks + gentle reminders = our office finally runs itself.", name: "Jonas Weber", role: "Ops manager, Hive", rating: 4 },
];

/** Horizontal slider of pastel testimonial cards with star ratings; round prev/next buttons scroll by one card, dots show position. */
export function TestimonialsSlider({ title = "Kind words", items = DEFAULT_ITEMS, className }: TestimonialsSliderProps) {
  const [index, setIndex] = useState(0);
  const go = (d: number) => setIndex((i) => Math.min(items.length - 1, Math.max(0, i + d)));

  return (
    <section aria-roledescription="carousel" aria-label="Testimonials" className={cn("da-section overflow-hidden bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="flex items-end justify-between gap-4">
          <h2 className="font-da-display text-[clamp(2rem,4.5vw,3rem)] font-extrabold tracking-da-display">{title}</h2>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => go(-1)}
              disabled={index === 0}
              aria-label="Previous"
              className="da-focus da-transition grid size-12 place-items-center rounded-full bg-da-surface shadow-da-sm hover:-translate-y-0.5 disabled:opacity-40"
            >
              <ArrowLeft aria-hidden className="size-5" />
            </button>
            <button
              type="button"
              onClick={() => go(1)}
              disabled={index === items.length - 1}
              aria-label="Next"
              className="da-focus da-transition grid size-12 place-items-center rounded-full bg-da-primary text-da-primary-fg shadow-da-sm hover:-translate-y-0.5 disabled:opacity-40"
            >
              <ArrowRight aria-hidden className="size-5" />
            </button>
          </div>
        </div>
        <div className="mt-10">
          <ul
            className="flex gap-5 transition-transform duration-(--da-duration-slow) ease-da motion-reduce:transition-none"
            style={{ transform: `translateX(calc(-${index} * (min(420px, 85vw) + 1.25rem)))` }}
          >
            {items.map((t, i) => (
              <li
                key={t.name}
                aria-roledescription="slide"
                aria-label={`${i + 1} of ${items.length}`}
                aria-hidden={i < index}
                className="w-[min(420px,85vw)] shrink-0"
              >
                <figure className={cn("flex h-full flex-col rounded-da-lg p-8", TINTS[i % TINTS.length])}>
                  <p className="flex" aria-label={`${t.rating} out of 5 stars`}>
                    {Array.from({ length: 5 }, (_, k) => (
                      <Star key={k} aria-hidden className={cn("size-5", k < t.rating ? "fill-current" : "opacity-30")} />
                    ))}
                  </p>
                  <blockquote className="mt-5 flex-1 font-da-display text-xl leading-snug font-bold">“{t.quote}”</blockquote>
                  <figcaption className="mt-6 text-sm">
                    <span className="font-semibold">{t.name}</span> · <span className="opacity-85">{t.role}</span>
                  </figcaption>
                </figure>
              </li>
            ))}
          </ul>
        </div>
        <div className="mt-8 flex justify-center gap-2" aria-hidden>
          {items.map((_, i) => (
            <span key={i} className={cn("da-transition h-2 rounded-full", i === index ? "w-8 bg-da-primary" : "w-2 bg-da-border-strong")} />
          ))}
        </div>
      </div>
    </section>
  );
}

export default TestimonialsSlider;