Testimonials Portrait

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

export interface TestimonialsPortraitProps {
  quote?: string;
  name?: string;
  role?: string;
  initials?: string;
  result?: { value: string; label: string };
  className?: string;
}

/** Single large testimonial: an arch-shaped sage “portrait” with big initials and a leaf, next to a large serif quote, attribution and a clay result chip. */
export function TestimonialsPortrait({
  quote = "We used to guess our footprint once a year with a consultant. Now we see it every month, and the whole team knows which three things to work on.",
  name = "Ingrid Solberg",
  role = "Head of Sustainability, Fjell Outdoor",
  initials = "IS",
  result = { value: "−19%", label: "emissions in 12 months" },
  className,
}: TestimonialsPortraitProps) {
  return (
    <section aria-label="Customer story" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 md:grid-cols-[320px_1fr] lg:gap-20">
        <div aria-hidden className="relative mx-auto aspect-[4/5] w-60 overflow-hidden rounded-t-full rounded-b-da-lg bg-da-accent md:w-full">
          <span className="absolute inset-0 grid place-items-center font-da-display text-8xl text-da-accent-fg italic">{initials}</span>
          <svg viewBox="0 0 100 60" className="absolute right-0 bottom-0 left-0 text-da-primary">
            <path d="M0 40c20-14 45-14 60-4s30 12 40 2v22H0Z" fill="currentColor" />
          </svg>
        </div>
        <figure>
          <svg aria-hidden viewBox="0 0 40 30" className="h-8 w-10 text-da-secondary-fg/60">
            <path fill="currentColor" d="M0 30V17C0 7 6 1 16 0v6c-5 1-8 5-8 10h8v14H0Zm24 0V17C24 7 30 1 40 0v6c-5 1-8 5-8 10h8v14H24Z" />
          </svg>
          <blockquote className="mt-6 font-da-display text-[clamp(1.6rem,3.2vw,2.5rem)] leading-snug text-pretty">{quote}</blockquote>
          <figcaption className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-4">
            <span>
              <span className="block font-medium">{name}</span>
              <span className="block text-sm text-da-muted-fg">{role}</span>
            </span>
            <span className="rounded-da-pill bg-da-secondary px-4 py-2 text-sm text-da-secondary-fg">
              <strong className="font-da-display text-lg font-normal">{result.value}</strong> {result.label}
            </span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

export default TestimonialsPortrait;