Testimonials Big Quote

"use client";

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

export interface TestimonialsBigQuoteItem {
  quote: string;
  name: string;
  role: string;
  company: string;
  metric?: { value: string; label: string };
}

export interface TestimonialsBigQuoteProps {
  kicker?: string;
  items?: TestimonialsBigQuoteItem[];
  className?: string;
}

const DEFAULT_ITEMS: TestimonialsBigQuoteItem[] = [
  {
    quote: "Our changelog went from a graveyard to the third most visited page on the site.",
    name: "Priya Raman",
    role: "VP Marketing",
    company: "Kitewire",
    metric: { value: "3rd", label: "most visited page" },
  },
  {
    quote: "We shipped 60 releases last quarter and wrote exactly zero release notes by hand.",
    name: "Jonas Lindqvist",
    role: "Staff Engineer",
    company: "Northdesk",
    metric: { value: "60", label: "releases, 0 manual notes" },
  },
  {
    quote: "Adoption of the new reporting module doubled in two weeks. Same feature — people just knew it existed.",
    name: "Tomás Varga",
    role: "Growth PM",
    company: "Parcelo",
    metric: { value: "2×", label: "feature adoption" },
  },
];

export function TestimonialsBigQuote({ kicker = "[ 05 ] Don't take our word", items = DEFAULT_ITEMS, className }: TestimonialsBigQuoteProps) {
  const [index, setIndex] = useState(0);
  const item = items[index] ?? items[0];
  if (!item) return null;
  const go = (d: number) => setIndex((i) => (i + d + items.length) % items.length);

  return (
    <section
      className={cn("da-section da-stroke-b bg-da-secondary text-da-secondary-fg", className)}
      aria-roledescription="carousel"
      aria-label="Customer testimonials"
    >
      <div className="da-container">
        <div className="flex items-center justify-between gap-4">
          <p className="font-da-mono text-xs font-bold tracking-da-label uppercase">{kicker}</p>
          <p className="font-da-mono text-xs font-bold" aria-hidden>
            {String(index + 1).padStart(2, "0")} / {String(items.length).padStart(2, "0")}
          </p>
        </div>

        <figure key={index} aria-live="polite" className="mt-10 grid gap-10 lg:grid-cols-[1fr_auto] lg:items-end">
          <blockquote className="font-da-display text-[clamp(2rem,5.5vw,4.5rem)] leading-[1] tracking-da-display uppercase">
            <span aria-hidden>“</span>
            {item.quote}
            <span aria-hidden>”</span>
          </blockquote>
          {item.metric && (
            <p className="da-stroke rotate-2 self-start bg-da-primary p-5 text-da-primary-fg shadow-da-md lg:self-end">
              <span className="block font-da-display text-5xl tracking-da-display">{item.metric.value}</span>
              <span className="font-da-mono text-xs font-bold uppercase">{item.metric.label}</span>
            </p>
          )}
          <figcaption className="flex items-center gap-4 lg:col-span-2">
            <span aria-hidden className="da-stroke grid size-12 place-items-center bg-da-surface font-da-mono font-bold text-da-surface-fg">
              {item.name
                .split(" ")
                .map((w) => w[0])
                .join("")}
            </span>
            <span>
              <span className="block text-lg font-bold">{item.name}</span>
              <span className="opacity-85">
                {item.role}, {item.company}
              </span>
            </span>
          </figcaption>
        </figure>

        <div className="mt-10 flex items-center gap-3">
          <button
            type="button"
            onClick={() => go(-1)}
            aria-label="Previous testimonial"
            className="da-focus da-stroke grid size-12 place-items-center bg-da-surface text-da-surface-fg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
          >
            <ArrowLeft aria-hidden className="size-5" strokeWidth={3} />
          </button>
          <button
            type="button"
            onClick={() => go(1)}
            aria-label="Next testimonial"
            className="da-focus da-stroke grid size-12 place-items-center bg-da-fg text-da-bg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
          >
            <ArrowRight aria-hidden className="size-5" strokeWidth={3} />
          </button>
          <div className="ml-4 flex gap-2" role="group" aria-label="Choose testimonial">
            {items.map((t, i) => (
              <button
                key={t.name}
                type="button"
                onClick={() => setIndex(i)}
                aria-label={`Testimonial ${i + 1}: ${t.name}`}
                aria-current={i === index}
                className={cn("da-focus da-stroke h-3 transition-[width] duration-(--da-duration)", i === index ? "w-10 bg-da-primary" : "w-3 bg-da-surface")}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default TestimonialsBigQuote;