Testimonial Wall Glass

---
/**
 * TestimonialWallGlass — Full-page social proof testimonial wall with verified customer cards and stats.
 * 
 * @param {string} badge - Eyebrow badge text.
 * @param {string} title - Section main heading.
 * @param {string} subtitle - Supporting description text.
 */
interface Props {
  badge?: string;
  title?: string;
  subtitle?: string;
  className?: string;
}

const {
  badge = "Customer Love",
  title = "Trusted by 10,000+ Developers Worldwide",
  subtitle = "See how engineering teams ship faster and build beautiful Astro products with our component kit.",
  className = ""
} = Astro.props;
---

<div class="cq-testimonial-wall-glass-cq">
<section class={`testimonials-section ${className}`} aria-labelledby="testimonials-title">
  <div class="testimonials-bg" aria-hidden="true">
    <div class="test-glow test-glow--1"></div>
    <div class="test-glow test-glow--2"></div>
  </div>

  <div class="container">
    <!-- Header -->
    <div class="section-header">
      {badge && <span class="section-badge">{badge}</span>}
      <h2 id="testimonials-title" class="section-title">{title}</h2>
      <p class="section-subtitle">{subtitle}</p>

      <!-- Trust Metrics Bar -->
      <div class="trust-bar">
        <div class="trust-stat">
          <span class="trust-stat__num">4.9 / 5.0</span>
          <div class="trust-stars">★★★★★</div>
          <span class="trust-stat__label">Over 1,200 Reviews</span>
        </div>
        <div class="trust-sep"></div>
        <div class="trust-stat">
          <span class="trust-stat__num">99.8%</span>
          <span class="trust-stat__sub">Satisfaction Rate</span>
          <span class="trust-stat__label">Based on 2026 Survey</span>
        </div>
        <div class="trust-sep"></div>
        <div class="trust-stat">
          <span class="trust-stat__num">3.5x</span>
          <span class="trust-stat__sub">Faster Shipping</span>
          <span class="trust-stat__label">Average Team Velocity</span>
        </div>
      </div>
    </div>

    <!-- Testimonials Grid / Wall -->
    <div class="testimonial-wall">
      <!-- Card 1 -->
      <article class="test-card">
        <div class="test-card__stars">★★★★★</div>
        <p class="test-card__quote">
          "The UI/UX quality is astounding. We built our entire SaaS marketing site in a weekend and our Lighthouse scores went from 78 to a solid 100."
        </p>
        <div class="test-card__author">
          <div class="author-avatar author-avatar--1">SK</div>
          <div class="author-info">
            <span class="author-name">Sarah Kowalski</span>
            <span class="author-role">Staff Frontend Engineer at CloudScale</span>
          </div>
        </div>
      </article>

      <!-- Card 2 (Featured Highlight) -->
      <article class="test-card test-card--featured">
        <span class="featured-badge">Featured Case Study</span>
        <div class="test-card__stars">★★★★★</div>
        <p class="test-card__quote">
          "Zero client runtime JS combined with modern glassmorphic aesthetics is exactly what our agency needed. It cut our design-to-production turnaround by 70%."
        </p>
        <div class="test-card__author">
          <div class="author-avatar author-avatar--2">MA</div>
          <div class="author-info">
            <span class="author-name">Marc Andersson</span>
            <span class="author-role">Founder & Design Lead at HyperStudio</span>
          </div>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="test-card">
        <div class="test-card__stars">★★★★★</div>
        <p class="test-card__quote">
          "Strict TypeScript support made integrating these components into our existing Astro 5 monorepo completely frictionless."
        </p>
        <div class="test-card__author">
          <div class="author-avatar author-avatar--3">DL</div>
          <div class="author-info">
            <span class="author-name">David Lin</span>
            <span class="author-role">CTO at NexusFintech</span>
          </div>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="test-card">
        <div class="test-card__stars">★★★★★</div>
        <p class="test-card__quote">
          "The accessible form controls and micro-interactions feel like custom handcrafted components. Our users constantly compliment the new dashboard."
        </p>
        <div class="test-card__author">
          <div class="author-avatar author-avatar--4">EV</div>
          <div class="author-info">
            <span class="author-name">Elena Vega</span>
            <span class="author-role">Head of Product at DevMetrics</span>
          </div>
        </div>
      </article>

      <!-- Card 5 -->
      <article class="test-card">
        <div class="test-card__stars">★★★★★</div>
        <p class="test-card__quote">
          "Finally a component library that doesn't force bloated heavy dependencies. Pure Astro, pure CSS, ultra clean."
        </p>
        <div class="test-card__author">
          <div class="author-avatar author-avatar--5">TH</div>
          <div class="author-info">
            <span class="author-name">Thomas Huber</span>
            <span class="author-role">Senior Systems Architect</span>
          </div>
        </div>
      </article>

      <!-- Card 6 -->
      <article class="test-card">
        <div class="test-card__stars">★★★★★</div>
        <p class="test-card__quote">
          "The interactive 3D Galaxy hero alone saved our team weeks of WebGL experimentation. Outstanding work!"
        </p>
        <div class="test-card__author">
          <div class="author-avatar author-avatar--6">AR</div>
          <div class="author-info">
            <span class="author-name">Aria Rossi</span>
            <span class="author-role">Creative Director at OrbitLabs</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>
</div>
<style>
  .cq-testimonial-wall-glass-cq { container-type: inline-size; }
  .testimonials-section {
    position: relative;
    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
    background: var(--c-bg-primary, #030712);
    overflow: hidden;
  }

  .testimonials-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .test-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
  }

  .test-glow--1 {
    top: 20%;
    left: 10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #6366f1, transparent 70%);
  }

  .test-glow--2 {
    bottom: 20%;
    right: 10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #eab308, transparent 70%);
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--sp-12, 3rem);
  }

  .section-badge {
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.25);
    margin-bottom: var(--sp-4, 1rem);
  }

  .section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-4, 1rem);
  }

  .section-subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 2rem;
  }

  /* Trust Bar */
  .trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.25rem 2rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    max-width: 750px;
    margin: 0 auto;
  }

  .trust-stat {
    text-align: center;
  }

  .trust-stat__num {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
  }

  .trust-stars {
    color: #eab308;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin: 0.1rem 0;
  }

  .trust-stat__sub {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #10b981;
  }

  .trust-stat__label {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
  }

  .trust-sep {
    width: 1px;
    height: 40px;
    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
  }

  /* Wall Grid */
  .testimonial-wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .test-card {
    position: relative;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: var(--r-xl, 18px);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease;
  }

  .test-card:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
  }

  .test-card--featured {
    background: rgba(25, 30, 60, 0.75);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.25);
  }

  .featured-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    padding: 0.2rem 0.65rem;
    background: #6366f1;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 9999px;
  }

  .test-card__stars {
    color: #eab308;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
  }

  .test-card__quote {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    font-style: italic;
  }

  .test-card__author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
  }

  .author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
    border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
  }

  .author-avatar--1 { background: linear-gradient(135deg, #6366f1, #a855f7); }
  .author-avatar--2 { background: linear-gradient(135deg, #eab308, #f97316); }
  .author-avatar--3 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
  .author-avatar--4 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
  .author-avatar--5 { background: linear-gradient(135deg, #10b981, #059669); }
  .author-avatar--6 { background: linear-gradient(135deg, #f43f5e, #be123c); }

  .author-info {
    display: flex;
    flex-direction: column;
  }

  .author-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
  }

  .author-role {
    font-size: 0.75rem;
    color: #64748b;
  }

  @container (max-width: 960px) {
    .trust-bar {
      flex-direction: column;
      gap: 1rem;
    }
    .trust-sep {
      width: 80%;
      height: 1px;
    }
    .testimonial-wall {
      grid-template-columns: 1fr;
    }
  }
</style>