Clean Testimonial Card

---
/**
 * TestimonialCardClean — Minimalist card for user quotes and reviews.
 * 
 * @param {string} quote - The body of the testimonial review.
 * @param {string} name - The reviewer's full name.
 * @param {string} role - The reviewer's job title or company role.
 * @param {string} avatarUrl - Optional string tracking the avatar headshot URL.
 */
interface Props {
  quote: string;
  name: string;
  role: string;
  avatarUrl?: string;
}

const { quote, name, role, avatarUrl } = Astro.props;
---

<div class="testi-card">
  <blockquote class="testi-card__quote">"{quote}"</blockquote>
  <div class="testi-card__author">
    <div class="testi-card__pic" style={avatarUrl ? `background-image: url('${avatarUrl}'); background-size: cover;` : ''}></div>
    <div class="testi-card__info">
      <h5 class="testi-card__name">{name}</h5>
      <span class="testi-card__role">{role}</span>
    </div>
  </div>
</div>

<style>
  .testi-card { 
    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
    padding: var(--sp-8, 2rem); 
    border-radius: var(--r-xl, 20px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  }
  .testi-card__quote { 
    font-size: 1rem; color: var(--c-text-1, #e2e8f0); 
    font-style: italic; line-height: 1.6; 
    margin: 0 0 2rem 0; 
  }
  .testi-card__author { display: flex; align-items: center; gap: var(--sp-4, 1rem); }
  .testi-card__pic { 
    width: 40px; height: 40px; 
    background: var(--c-bg, #334155); 
    border-radius: var(--r-full, 50%); 
  }
  .testi-card__name { margin: 0; color: var(--c-text-1, #fff); font-size: 0.95rem; }
  .testi-card__role { font-size: 0.75rem; color: var(--c-text-2, #64748b); }
</style>