{# Testimonials Component #}
<section class="relative py-24 pb-36 bg-white dark:bg-navy/80">
  <div class="absolute left-0 top-0 w-32 h-32 bg-gradient-to-br from-brand/10 to-blue/10 rounded-full blur-2xl opacity-30 pointer-events-none"></div>
  <div class="absolute right-0 bottom-0 w-40 h-40 bg-gradient-to-tr from-blue/10 to-brand/10 rounded-full blur-3xl opacity-20 pointer-events-none"></div>
  <div class="max-w-5xl mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-extrabold text-navy dark:text-white mb-4">What Our Clients Say About Us</h2>
      <p class="text-lg text-charcoal/80 dark:text-gray-200 max-w-2xl mx-auto">Real feedback from clinics and healthcare professionals we've helped grow.</p>
    </div>
    <div class="grid md:grid-cols-3 gap-10">
      <!-- Testimonial 1 -->
      <div class="bg-slate-50 dark:bg-navy/70 rounded-2xl shadow-lg p-8 flex flex-col items-center text-center border border-gray-100 dark:border-navy/40">
        <div class="flex items-center mb-4">
          <img src="{{ siteUrl }}assets/layout/testimonial.jpg" alt="Tara Philips" class="w-14 h-14 rounded-full object-cover border-2 border-brand shadow-md mr-3">
          <div>
            <div class="flex items-center justify-center mb-1">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
            </div>
            <span class="font-semibold text-navy dark:text-white">Tara Philips</span>
            <div class="text-xs text-charcoal/60 dark:text-gray-400">Tara Phillips Hypnotherapy</div>
          </div>
        </div>
        <p class="text-charcoal/80 dark:text-gray-200">"I'm absolutely thrilled with the website designed and developed by Fine Digital. From the start, they really took the time to listen and understand my tone of voice and the specific requirements I had for my website. Following our initial discussions, they created a design that perfectly reflected my brand and tone of voice—it couldn't have been more spot on!"</p>
      </div>
      <!-- Testimonial 2 -->
      <div class="bg-slate-50 dark:bg-navy/70 rounded-2xl shadow-lg p-8 flex flex-col items-center text-center border border-gray-100 dark:border-navy/40">
        <div class="flex items-center mb-4">
          <img src="{{ siteUrl }}assets/layout/testimonial.jpg" alt="David Anderson" class="w-14 h-14 rounded-full object-cover border-2 border-brand shadow-md mr-3">
          <div>
            <div class="flex items-center justify-center mb-1">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
            </div>
            <span class="font-semibold text-navy dark:text-white">David Anderson</span>
            <div class="text-xs text-charcoal/60 dark:text-gray-400">Anderson Eye Care</div>
          </div>
        </div>
        <p class="text-charcoal/80 dark:text-gray-200">"Outstanding. Effective, responsive and professional business builders with proven results. A pleasure to work with and to review. Highly recommend."</p>
      </div>
      <!-- Testimonial 3 -->
      <div class="bg-slate-50 dark:bg-navy/70 rounded-2xl shadow-lg p-8 flex flex-col items-center text-center border border-gray-100 dark:border-navy/40">
        <div class="flex items-center mb-4">
          <img src="{{ siteUrl }}assets/layout/testimonial.jpg" alt="Dr Amy Law" class="w-14 h-14 rounded-full object-cover border-2 border-brand shadow-md mr-3">
          <div>
            <div class="flex items-center justify-center mb-1">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><polygon points="10 1.5 12.59 7.36 18.9 7.64 13.97 11.64 15.54 17.86 10 14.27 4.46 17.86 6.03 11.64 1.1 7.64 7.41 7.36 10 1.5"/></svg>
            </div>
            <span class="font-semibold text-navy dark:text-white">Dr Amy Law</span>
            <div class="text-xs text-charcoal/60 dark:text-gray-400">Dr Amy Law Cosmetics Clinic</div>
          </div>
        </div>
        <p class="text-charcoal/80 dark:text-gray-200">"I couldn't be without Plamen and his team for the website support. Having been hugely disappointed when I got over promised (and hugely overcharged) for an intial website to be made with a different company who took 12 months to complete , and would take a further 2/3 months to make the smallest change I was at my wits end. I'd lost confidence in the company and got recommended Plamen "</p>
      </div>
    </div>
  </div>
</section>