Video Testimonial

import { Play } from "lucide-react";

export default function VideoTestimonial() {
  return (
    <section className="border-y border-border/60 bg-muted/30">
      <div className="mx-auto grid w-full max-w-5xl items-center gap-10 px-6 py-20 sm:py-24 lg:grid-cols-2">
        <div>
          <blockquote className="text-2xl font-medium tracking-tight text-balance sm:text-3xl">
            “We migrated forty services in a quarter. Our old platform took a
            year to onboard twelve.”
          </blockquote>
          <p className="mt-6 text-sm font-medium">Imane Rekik</p>
          <p className="text-sm text-muted-foreground">
            Engineering manager, Corda — 220 engineers
          </p>
        </div>

        {/* Compact player card */}
        <button
          type="button"
          aria-label="Watch the Corda story, 1 minute 32"
          className="group relative overflow-hidden rounded-xl border border-border/60 bg-foreground text-left shadow-sm"
        >
          <div className="relative aspect-video">
            <div
              aria-hidden
              className="absolute inset-0 bg-[linear-gradient(to_right,color-mix(in_oklab,var(--background)_10%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklab,var(--background)_10%,transparent)_1px,transparent_1px)] bg-[size:32px_32px]"
            />
            <span className="absolute top-1/2 left-1/2 flex size-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-background text-foreground shadow-lg transition-transform group-hover:scale-105 motion-reduce:transition-none">
              <Play className="ml-0.5 size-5 fill-current" />
            </span>
            <span className="absolute right-3 bottom-3 rounded-md bg-background/15 px-2 py-0.5 font-mono text-[11px] text-background tabular-nums">
              1:32
            </span>
          </div>
        </button>
      </div>
    </section>
  );
}