Testimonials Quote

import { cn } from "@/lib/utils";

export interface TestimonialsQuoteProps {
  label?: string;
  quote?: string;
  name?: string;
  role?: string;
  className?: string;
}

/** One oversized pull quote set in the display face with a hanging opening quote mark, mono attribution under a short ink rule; lots of whitespace. */
export function TestimonialsQuote({
  label = "(06) Word of mouth",
  quote = "Frame is the first builder where our site looks like our work instead of like a website builder. We rebuilt it in a weekend.",
  name = "Ingrid Solheim",
  role = "Partner, Nord Studio — Oslo",
  className,
}: TestimonialsQuoteProps) {
  return (
    <section aria-label="Testimonial" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
        <figure className="mt-10 max-w-5xl">
          <blockquote className="font-da-display text-[clamp(2rem,5vw,4.25rem)] leading-[1.05] font-medium tracking-[-0.03em] text-balance [text-indent:-0.45em]">
            “{quote}”
          </blockquote>
          <figcaption className="mt-10 flex items-center gap-4 font-da-mono text-xs tracking-da-label uppercase">
            <span aria-hidden className="h-px w-10 bg-da-fg" />
            <span>
              {name} <span className="text-da-muted-fg">/ {role}</span>
            </span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

export default TestimonialsQuote;