Customer Reviews & Testimonials Section

<section class="sm:px-6 lg:px-8 bg-white max-w-7xl rounded-2xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
  <div class="text-center mb-12">
    <h2 class="text-3xl font-semibold tracking-tight font-geist mb-4">What Our Customers Say</h2>
    <p class="text-lg text-neutral-600 font-sans">Join thousands of satisfied Nike customers</p>
    <div class="flex items-center justify-center gap-2 mt-4">
      <div class="flex items-center">
        <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
      </div>
      <span class="text-sm font-medium text-neutral-900 ml-2 font-geist">4.8/5 based on 12,847 reviews</span>
    </div>
  </div>

  <!-- Featured Testimonials -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
    <!-- Testimonial 1 -->
    <article class="bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-2xl p-8 hover-lift fade-in">
      <div class="flex items-center gap-1 mb-4">
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
      </div>
      
      <div class="flex items-center gap-3">
        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
          <span class="text-white font-semibold font-geist">SJ</span>
        </div>
        <div>
          <div class="font-semibold text-neutral-900 font-geist">Sarah Johnson</div>
          <div class="text-sm text-neutral-600 font-sans">Verified Buyer • 2 weeks ago</div>
        </div>
      </div>
    </article>

    <!-- Testimonial 2 -->
    <article class="bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-2xl p-8 hover-lift fade-in" style="animation-delay: 0.1s;">
      <div class="flex items-center gap-1 mb-4">
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
      </div>
      
      <div class="flex items-center gap-3">
        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center">
          <span class="text-white font-semibold font-geist">MC</span>
        </div>
        <div>
          <div class="font-semibold text-neutral-900 font-geist">Mike Chen</div>
          <div class="text-sm text-neutral-600 font-sans">Verified Buyer • 1 month ago</div>
        </div>
      </div>
    </article>

    <!-- Testimonial 3 -->
    <article class="bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-2xl p-8 hover-lift fade-in" style="animation-delay: 0.2s;">
      <div class="flex items-center gap-1 mb-4">
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
        </svg>
      </div>
      
      <div class="flex items-center gap-3">
        <div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-600 rounded-full flex items-center justify-center">
          <span class="text-white font-semibold font-geist">ER</span>
        </div>
        <div>
          <div class="font-semibold text-neutral-900 font-geist">Emma Rodriguez</div>
          <div class="text-sm text-neutral-600 font-sans">Verified Buyer • 3 weeks ago</div>
        </div>
      </div>
    </article>
  </div>

  <!-- Review Stats -->
  <div class="bg-gradient-to-r from-neutral-100 to-neutral-50 rounded-2xl p-8 mb-12">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="text-center">
        <div class="text-3xl font-bold text-neutral-900 font-geist mb-2">12,847</div>
        <div class="text-sm text-neutral-600 font-sans">Total Reviews</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold text-neutral-900 font-geist mb-2">4.8/5</div>
        <div class="text-sm text-neutral-600 font-sans">Average Rating</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold text-neutral-900 font-geist mb-2">96%</div>
        <div class="text-sm text-neutral-600 font-sans">Would Recommend</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold text-neutral-900 font-geist mb-2">89%</div>
        <div class="text-sm text-neutral-600 font-sans">5-Star Reviews</div>
      </div>
    </div>
  </div>

  <!-- Recent Reviews -->
  <div class="">
    <div class="flex items-center justify-between mb-8">
      <h3 class="text-2xl font-semibold tracking-tight font-geist">Recent Reviews</h3>
      <button class="inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-all duration-200 hover:scale-105 font-sans">
        View All Reviews
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
          <path d="M5 12h14" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
      </button>
    </div>

    <div class="space-y-6">
      <!-- Review 1 -->
      <article class="border border-neutral-200 rounded-xl p-6 hover-lift fade-in bg-white">
        <div class="flex items-start justify-between mb-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center">
              <span class="text-white font-semibold text-sm font-geist">JD</span>
            </div>
            <div>
              <div class="font-semibold text-neutral-900 font-geist">James Davis</div>
              <div class="text-sm text-neutral-600 font-sans">Purchased Nike Air Max 270 • US 10</div>
            </div>
          </div>
          <div class="flex items-center gap-1">
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
          </div>
        </div>
        <p class="text-neutral-700 font-geist mb-4">
          "Absolutely love these shoes! The fit is perfect and they're incredibly comfortable for all-day wear. The Air Max cushioning really makes a difference during workouts. Highly recommend!"
        </p>
        <div class="flex items-center gap-4 text-sm text-neutral-500">
          <span class="font-sans">3 days ago</span>
          <span class="font-sans">Verified Purchase</span>
          <button class="inline-flex items-center gap-1 hover:text-neutral-700 transition-colors font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
              <path d="M7 10v12l5-3 5 3V10" class=""></path>
              <path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" class=""></path>
            </svg>
            Helpful (24)
          </button>
        </div>
      </article>

      <!-- Review 2 -->
      <article class="border border-neutral-200 rounded-xl p-6 hover-lift fade-in bg-white" style="animation-delay: 0.1s;">
        <div class="flex items-start justify-between mb-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center">
              <span class="text-white font-semibold text-sm font-geist">AL</span>
            </div>
            <div class="">
              <div class="font-semibold text-neutral-900 font-geist">Alex Thompson</div>
              <div class="text-sm text-neutral-600 font-sans">Purchased Nike Air Max 270 • US 9</div>
            </div>
          </div>
          <div class="flex items-center gap-1">
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-neutral-300 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
          </div>
        </div>
        <p class="text-neutral-700 font-geist mb-4">
          "Great quality and style! The only minor issue is they run slightly large, so consider sizing down. Otherwise, these are fantastic everyday sneakers."
        </p>
        <div class="flex items-center gap-4 text-sm text-neutral-500">
          <span class="font-sans">1 week ago</span>
          <span class="font-sans">Verified Purchase</span>
          <button class="inline-flex items-center gap-1 hover:text-neutral-700 transition-colors font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
              <path d="M7 10v12l5-3 5 3V10" class=""></path>
              <path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" class=""></path>
            </svg>
            Helpful (18)
          </button>
        </div>
      </article>

      <!-- Review 3 -->
      <article class="border border-neutral-200 rounded-xl p-6 hover-lift fade-in bg-white" style="animation-delay: 0.2s;">
        <div class="flex items-start justify-between mb-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-green-600 rounded-full flex items-center justify-center">
              <span class="text-white font-semibold text-sm font-geist">LS</span>
            </div>
            <div class="">
              <div class="font-semibold text-neutral-900 font-geist">Lisa Smith</div>
              <div class="text-sm text-neutral-600 font-sans">Purchased Nike Air Max 270 • US 8</div>
            </div>
          </div>
          <div class="flex items-center gap-1">
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path>
            </svg>
          </div>
        </div>
        <p class="text-neutral-700 font-geist mb-4">
          "Super fast delivery and excellent packaging. The shoes are exactly as described and the quality is top-notch. Will definitely order from Nike again!"
        </p>
        <div class="flex items-center gap-4 text-sm text-neutral-500">
          <span class="font-sans">2 weeks ago</span>
          <span class="font-sans">Verified Purchase</span>
          <button class="inline-flex items-center gap-1 hover:text-neutral-700 transition-colors font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
              <path d="M7 10v12l5-3 5 3V10" class=""></path>
              <path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" class=""></path>
            </svg>
            Helpful (31)
          </button>
        </div>
      </article>
    </div>
  </div>

  <!-- Write a Review CTA -->
  <div class="text-center mt-12 p-8 bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-2xl text-white">
    <h3 class="text-xl font-semibold tracking-tight font-geist mb-2">Share Your Experience</h3>
    <p class="text-neutral-300 mb-6 font-sans">Help other customers by writing a review</p>
    <button class="inline-flex items-center gap-2 bg-white text-black px-6 py-3 rounded-lg font-medium hover:bg-neutral-100 transition-all duration-300 hover:scale-105 font-geist">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
        <path d="M12 20h9" class=""></path>
        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" class=""></path>
      </svg>
      Write a Review
    </button>
  </div>
</section>