Testimonials With Video

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-testimonials-accent)]">Customer stories</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">From the people who use it every day</h2>
    </div>

    <div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Testimonial with video -->
      <div class="flex flex-col gap-6 rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <!-- Video thumbnail -->
        <div class="group relative aspect-video cursor-pointer overflow-hidden rounded-xl bg-[var(--ws-testimonials-bg)]">
          <div class="absolute inset-0 flex items-center justify-center bg-slate-900/60">
            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-color-surface)] shadow-lg transition-transform group-hover:scale-110">
              <svg class="h-5 w-5 translate-x-0.5 text-slate-900" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </div>
          </div>
          <div class="h-full w-full bg-[var(--ws-testimonials-border)]"></div>
        </div>
        <!-- Quote -->
        <blockquote class="flex-1">
          <p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"It really did feel like magic. The level of visibility we have now — into where sensitive data lives and how it moves — is something I couldn't have imagined with our previous stack."</p>
        </blockquote>
        <!-- Attribution -->
        <div class="flex items-center gap-3">
          <div class="h-10 w-10 shrink-0 rounded-full bg-[var(--ws-testimonials-border)]"></div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Alex Faiella</p>
            <p class="text-xs text-[var(--ws-testimonials-text-soft)]">VP Security, ThoughtSpot</p>
          </div>
        </div>
      </div>

      <!-- Testimonial with video -->
      <div class="flex flex-col gap-6 rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <div class="group relative aspect-video cursor-pointer overflow-hidden rounded-xl bg-[var(--ws-testimonials-bg)]">
          <div class="absolute inset-0 flex items-center justify-center bg-indigo-900/70">
            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-color-surface)] shadow-lg transition-transform group-hover:scale-110">
              <svg class="h-5 w-5 translate-x-0.5 text-slate-900" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </div>
          </div>
          <div class="h-full w-full bg-[var(--ws-testimonials-border)]"></div>
        </div>
        <blockquote class="flex-1">
          <p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"We went from a backlog of hundreds of unresolved data incidents to near-zero in three months. The automated remediation alone saved us more than a full-time equivalent."</p>
        </blockquote>
        <div class="flex items-center gap-3">
          <div class="h-10 w-10 shrink-0 rounded-full bg-[var(--ws-testimonials-border)]"></div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Maria Chen</p>
            <p class="text-xs text-[var(--ws-testimonials-text-soft)]">CISO, Guild Education</p>
          </div>
        </div>
      </div>

      <!-- Testimonial with video -->
      <div class="flex flex-col gap-6 rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <div class="group relative aspect-video cursor-pointer overflow-hidden rounded-xl bg-[var(--ws-testimonials-bg)]">
          <div class="absolute inset-0 flex items-center justify-center bg-emerald-900/70">
            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-color-surface)] shadow-lg transition-transform group-hover:scale-110">
              <svg class="h-5 w-5 translate-x-0.5 text-slate-900" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </div>
          </div>
          <div class="h-full w-full bg-[var(--ws-testimonials-border)]"></div>
        </div>
        <blockquote class="flex-1">
          <p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"The onboarding was surprisingly fast. Within a week we had full coverage across our SaaS stack and the first risk report was more detailed than anything we'd produced manually."</p>
        </blockquote>
        <div class="flex items-center gap-3">
          <div class="h-10 w-10 shrink-0 rounded-full bg-[var(--ws-testimonials-border)]"></div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">James Okafor</p>
            <p class="text-xs text-[var(--ws-testimonials-text-soft)]">Head of IT Security, Akamai</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>