Testimonials Deck

"use client";

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

export interface TestimonialsDeckItem {
  quote: string;
  name: string;
  role: string;
  company: string;
}

export interface TestimonialsDeckProps {
  eyebrow?: string;
  title?: string;
  items?: TestimonialsDeckItem[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const TONES = ["from-da-primary to-da-accent", "from-da-accent to-da-success", "from-da-danger to-da-primary", "from-da-warning to-da-danger"];

const DEFAULT_ITEMS: TestimonialsDeckItem[] = [
  {
    quote: "We cancelled our Monday status meeting. Halo recaps and two-minute videos replaced it, and nobody misses it.",
    name: "Amara Diallo",
    role: "Head of Product",
    company: "Lumen",
  },
  { quote: "Sales calls go straight into HubSpot with next steps. My reps got four hours a week back.", name: "Leo Park", role: "VP Sales", company: "Parcel" },
  {
    quote: "Ask Halo is scary good. I found the pricing decision from March in ten seconds, with the exact timestamp.",
    name: "Sofia Rossi",
    role: "COO",
    company: "Quanta",
  },
  {
    quote: "Half our team is in Lisbon, half in Seoul. Live translation made our all-hands feel like one room.",
    name: "Noah Klein",
    role: "CEO",
    company: "Heliograph",
  },
];

/** Stacked deck of glass testimonial cards; “Next” sends the top card to the back with a slide, others move up. Keyboard friendly. */
export function TestimonialsDeck({
  eyebrow = "Loved by busy teams",
  title = "Fewer meetings. Better ones.",
  items = DEFAULT_ITEMS,
  className,
}: TestimonialsDeckProps) {
  const [top, setTop] = useState(0);
  const n = items.length;

  return (
    <section aria-labelledby="glass-deck-title" className={cn("da-section overflow-hidden text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-[1fr_1.2fr]">
        <div>
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-deck-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance"
          >
            {title}
          </h2>
          <div className="mt-8 flex items-center gap-4">
            <button
              type="button"
              onClick={() => setTop((t) => (t + 1) % n)}
              className="da-focus da-transition group inline-flex h-12 items-center gap-2 rounded-da-pill bg-da-fg px-6 font-semibold text-da-bg shadow-da-md hover:-translate-y-0.5"
            >
              Next story
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </button>
            <p className="font-da-mono text-sm text-da-muted-fg" aria-live="polite">
              {top + 1} / {n}
            </p>
          </div>
        </div>
        <div className="relative mx-auto grid w-full max-w-lg pt-10">
          {items.map((t, i) => {
            const depth = (i - top + n) % n;
            return (
              <figure
                key={t.name}
                aria-hidden={depth !== 0}
                inert={depth !== 0}
                className={cn(
                  "col-start-1 row-start-1 rounded-da-lg p-7 shadow-da-lg transition-[translate,scale,opacity] duration-(--da-duration-slow) ease-(--da-ease-emphasized) motion-reduce:transition-none",
                  GLASS,
                  depth > 2 && "opacity-0",
                )}
                style={{ translate: `0 ${-depth * 18}px`, scale: `${1 - depth * 0.05}`, zIndex: n - depth }}
              >
                <blockquote className="font-da-display text-xl leading-snug font-medium tracking-da-display text-balance">“{t.quote}”</blockquote>
                <figcaption className="mt-6 flex items-center gap-3">
                  <span aria-hidden className={cn("size-10 rounded-full bg-gradient-to-br", TONES[i % TONES.length])} />
                  <span className="text-sm">
                    <span className="block font-semibold">{t.name}</span>
                    <span className="block text-da-muted-fg">
                      {t.role}, {t.company}
                    </span>
                  </span>
                </figcaption>
              </figure>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export default TestimonialsDeck;