Product Reviews Component - Playful Jewel Tones with Reservation Focus

<div class="font-sans antialiased text-gray-800 bg-emerald-50 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transform transition-all duration-500 scale-95 hover:scale-100 flex flex-col md:flex-row">
    
    <!-- Left Section: Overall Rating & Summary -->
    <div class="w-full md:w-1/3 p-6 sm:p-8 bg-emerald-600 dark:bg-emerald-800 text-white flex flex-col items-center justify-center text-center rounded-t-3xl md:rounded-l-3xl md:rounded-tr-none relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-700 to-emerald-500 opacity-20 dark:opacity-30"></div>
      <div class="relative z-10">
        <h2 class="text-4xl sm:text-5xl font-extrabold mb-2 leading-tight">4.8<span class="text-2xl">/5</span></h2>
        <div class="flex justify-center mb-4 text-yellow-300 dark:text-yellow-400">
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
        </div>
        <p class="text-lg sm:text-xl font-semibold mb-6">Based on 128 Reviews</p>
        <button class="bg-white text-emerald-600 dark:bg-emerald-700 dark:text-white px-8 py-3 rounded-full font-bold text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-500">
          Leave a Review
        </button>
      </div>
    </div>

    <!-- Right Section: Individual Reviews & Filter -->
    <div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col justify-between dark:text-gray-200">
      <div>
        <h3 class="text-2xl sm:text-3xl font-extrabold text-ruby-700 dark:text-ruby-400 mb-6">What our customers say</h3>
        
        <!-- Filter/Sorting -->
        <div class="flex flex-wrap gap-2 mb-6">
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-sapphire-600 dark:bg-sapphire-800 text-white rounded-full text-sm font-semibold hover:bg-sapphire-700 dark:hover:bg-sapphire-700 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-sapphire-300 dark:focus:ring-sapphire-600">
            All Reviews (128)
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-500">
            5 Stars (98)
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
            With Bookings
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
            Most Recent
          </button>
        </div>

        <!-- Review Items (Scrollable) -->
        <div class="space-y-6 max-h-96 md:max-h-[calc(100vh-250px)] overflow-y-auto pr-2 scrollbar-thumb-emerald-500 scrollbar-track-emerald-200 dark:scrollbar-thumb-emerald-700 dark:scrollbar-track-emerald-900 scrollbar-w-2 scrollbar-thumb-rounded scrollbar-track-rounded">

          <!-- Review 1 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Elara Vance</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Facial & Massage Package</span> on <time datetime="2023-10-26">Oct 26, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Absolutely loved my spa day! The facial left my skin glowing and the massage was incredibly relaxing. Highly recommend the staff, they were so friendly and professional!"</p>
            </div>
          </div>

          <!-- Review 2 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Marcus Thorne</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Deep Tissue Massage</span> on <time datetime="2023-10-20">Oct 20, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Good massage, felt much relief. The booking process was smooth and easy. Would book again for sure!"</p>
            </div>
          </div>

          <!-- Review 3 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Sophia Lee</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Aromatherapy Session</span> on <time datetime="2023-10-15">Oct 15, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Wonderful experience! The aromatherapy was exactly what I needed after a stressful week. The online booking was super user-friendly."</p>
            </div>
          </div>

           <!-- Review 4 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">David Chen</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Sports Massage</span> on <time datetime="2023-10-08">Oct 08, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Very effective sports massage after my marathon. Professional and understanding. I appreciate the easy booking system!"</p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* For a more custom scrollbar aligned with the playful theme */
.scrollbar-w-2::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thumb-emerald-500::-webkit-scrollbar-thumb {
  background-color: var(--tw-bg-emerald-500);
  border-radius: 9999px;
}

.scrollbar-track-emerald-200::-webkit-scrollbar-track {
  background-color: var(--tw-bg-emerald-200);
  border-radius: 9999px;
}

.dark .scrollbar-thumb-emerald-700::-webkit-scrollbar-thumb {
  background-color: var(--tw-bg-emerald-700);
}

.dark .scrollbar-track-emerald-900::-webkit-scrollbar-track {
  background-color: var(--tw-bg-emerald-900);
}

/* Custom colors (optional: if you want to extend tailwind.config.js) */
/* If you were using a Tailwind config, these would be in 'theme.extend.colors' */
:root {
  --color-emerald-50: #ecfdf5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e40;
  
  --color-sapphire-400: #60a5fa; /* A vibrant blue */
  --color-sapphire-600: #2563eb;
  --color-sapphire-800: #1e40af;

  --color-ruby-400: #ef4444; /* A vibrant red */
  --color-ruby-700: #b91c1c;
}
.dark {
  --tw-bg-emerald-50: #1a202c;
  --tw-bg-gray-900: #1a202c;
}
</style>