Testimonials Video

"use client";

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

export interface TestimonialsVideoItem {
  name: string;
  role: string;
  company: string;
  headline: string;
  duration: string;
  /** Short quote shown in the card and as the “transcript” when opened. */
  quote: string;
}

export interface TestimonialsVideoProps {
  eyebrow?: string;
  title?: string;
  items?: TestimonialsVideoItem[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const GRADS = ["from-da-primary/60 to-da-accent/50", "from-da-accent/60 to-da-success/40", "from-da-danger/50 to-da-primary/60"];

const DEFAULT_ITEMS: TestimonialsVideoItem[] = [
  {
    name: "Amara Diallo",
    role: "Head of Product",
    company: "Lumen",
    headline: "How Lumen killed the status meeting",
    duration: "1:42",
    quote: "Our Monday sync was 14 people for an hour. Now it’s six two-minute videos and a recap.",
  },
  {
    name: "Leo Park",
    role: "VP Sales",
    company: "Parcel",
    headline: "4 hours a week back per rep",
    duration: "2:10",
    quote: "Every call lands in HubSpot with next steps. My reps stopped writing notes entirely.",
  },
  {
    name: "Sofia Rossi",
    role: "COO",
    company: "Quanta",
    headline: "Finding any decision in seconds",
    duration: "1:18",
    quote: "I asked Halo what we decided about EU pricing and it jumped straight to the moment.",
  },
];

/** Three video-testimonial glass cards (gradient poster, play button, duration). Opening one expands an inline player panel with the quote. */
export function TestimonialsVideo({
  eyebrow = "Customer stories",
  title = "Hear it from the teams using Halo",
  items = DEFAULT_ITEMS,
  className,
}: TestimonialsVideoProps) {
  const [open, setOpen] = useState<number | null>(null);
  const cur = open === null ? null : items[open];

  return (
    <section aria-labelledby="glass-video-title" className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-video-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>
        {cur && open !== null && (
          <div
            className={cn(
              "relative mx-auto mt-12 grid max-w-4xl gap-6 rounded-da-lg p-4 shadow-da-lg transition-[opacity,scale] duration-(--da-duration) starting:scale-95 starting:opacity-0 md:grid-cols-[1.5fr_1fr]",
              GLASS,
            )}
          >
            <div className={cn("relative grid aspect-video place-items-center rounded-da-md bg-gradient-to-br", GRADS[open % GRADS.length])}>
              <span className="rounded-da-pill bg-da-fg/70 px-3 py-1 font-da-mono text-xs text-da-bg">▶ 0:00 / {cur.duration}</span>
            </div>
            <div className="flex flex-col p-2">
              <p className="font-da-display text-lg font-semibold">{cur.headline}</p>
              <blockquote className="mt-3 text-da-muted-fg">“{cur.quote}”</blockquote>
              <p className="mt-auto pt-4 text-sm">
                <span className="font-semibold">{cur.name}</span> · {cur.role}, {cur.company}
              </p>
            </div>
            <button
              type="button"
              onClick={() => setOpen(null)}
              aria-label="Close video"
              className="da-focus absolute top-6 right-6 grid size-9 place-items-center rounded-full bg-da-fg/70 text-da-bg"
            >
              <X aria-hidden className="size-4" />
            </button>
          </div>
        )}
        <ul className="mt-12 grid gap-5 md:grid-cols-3">
          {items.map((t, i) => (
            <li key={t.name}>
              <article
                className={cn(
                  "da-transition group h-full rounded-da-lg p-3 shadow-da-md hover:-translate-y-1 hover:shadow-da-lg",
                  GLASS,
                  open === i && "ring-2 ring-da-primary",
                )}
              >
                <button
                  type="button"
                  onClick={() => setOpen(i)}
                  aria-label={`Play video: ${t.headline} (${t.duration})`}
                  className={cn(
                    "da-focus relative grid aspect-[4/3] w-full place-items-center overflow-hidden rounded-da-md bg-gradient-to-br",
                    GRADS[i % GRADS.length],
                  )}
                >
                  <span
                    aria-hidden
                    className="absolute bottom-3 left-3 grid size-12 place-items-center rounded-full bg-da-surface font-da-display font-semibold shadow-da-sm backdrop-blur-da"
                  >
                    {t.name
                      .split(" ")
                      .map((p) => p[0])
                      .join("")}
                  </span>
                  <span
                    aria-hidden
                    className="da-transition grid size-14 place-items-center rounded-full bg-da-surface shadow-da-md backdrop-blur-da group-hover:scale-110"
                  >
                    <Play className="ml-0.5 size-5 fill-current" />
                  </span>
                  <span aria-hidden className="absolute right-3 bottom-3 rounded-da-pill bg-da-fg/70 px-2 py-0.5 font-da-mono text-[11px] text-da-bg">
                    {t.duration}
                  </span>
                </button>
                <div className="p-3">
                  <h3 className="font-da-display font-semibold">{t.headline}</h3>
                  <p className="mt-1 text-sm text-da-muted-fg">
                    {t.name}, {t.role} at {t.company}
                  </p>
                </div>
              </article>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsVideo;