Review Travel Light

                <!--
@type: Review
@industry: Travel
@style: Light
@category: Social Proof, Support, Feedback
@framework: Tailwind
@license: Free
-->

<style>
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  .animate-slideInLeft {
    animation: slideInLeft 0.8s ease-out forwards;
  }

  .animate-slideInRight {
    animation: slideInRight 0.8s ease-out forwards;
  }

  .review-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
  }

  .testimonial-shimmer {
    position: relative;
    overflow: hidden;
  }

  .testimonial-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    animation: shimmer 3s ease-in-out infinite;
  }

  .carousel-container {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel-container::-webkit-scrollbar {
    display: none;
  }
</style>

<section class="bg-gradient-to-br from-emerald-50 via-gray-50 to-emerald-50 relative flex items-center justify-center overflow-hidden py-16 md:py-20">
  <!-- Background Decorative Elements -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-20 left-10 w-32 h-32 bg-emerald-200 rounded-full opacity-20"></div>
    <div class="absolute top-40 right-20 w-24 h-24 bg-red-200 rounded-full opacity-30"></div>
  </div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

    <!-- Section Header -->
    <div class="text-center mb-16 animate-fadeInUp">
      <div
        class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg mb-6 border border-emerald-100">
        <span class="w-2 h-2 bg-red-500 rounded-full mr-2 animate-pulse"></span>
        <span class="text-sm font-medium text-gray-700">Customer Reviews</span>
      </div>

      <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
        What Our <span class="text-emerald-600">Travelers</span> Say
        <br>About Their <span class="text-red-500">Adventures</span>
      </h2>

      <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
        Don't just take our word for it. Read authentic reviews from thousands of happy travelers who've experienced
        the magic of our curated journeys.
      </p>
    </div>

    <!-- Review Carousel -->
    <div class="mb-16">
      <div class="relative">
        <!-- Carousel Container - Stack on mobile, scroll on desktop -->
        <div id="review-carousel" class="carousel-container grid grid-cols-1 md:grid-cols-none md:flex gap-4 md:gap-6 md:overflow-x-auto md:pb-4">

          <!-- Review Card 1 -->
          <div
            class="bg-white border border-gray-200 review-card testimonial-shimmer rounded-3xl p-6 w-full md:min-w-[320px] lg:min-w-[380px] shadow-md animate-fadeInUp md:animate-slideInLeft">
            <div class="flex items-start space-x-4 mb-4">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Amanda Rodriguez" class="h-12 w-12 rounded-full object-cover">
              <div class="flex-1">
                <div class="font-semibold text-gray-900">Amanda Rodriguez</div>
                <div class="text-sm text-gray-600">Bali Wellness Retreat</div>
                <div class="flex text-yellow-400 text-sm mt-1">★★★★★</div>
              </div>
              <div class="text-xs text-gray-500">2 days ago</div>
            </div>
            <p class="text-gray-700 leading-relaxed mb-4">
              "The attention to detail was incredible! Our guide knew all the hidden gems and the accommodations
              exceeded our expectations. The yoga sessions at sunrise were absolutely magical."
            </p>
            <div class="flex items-center justify-between text-sm">
              <span class="text-emerald-600 font-medium">✓ Verified Booking</span>
              <div class="flex space-x-1">
                <button class="text-gray-400 hover:text-red-500 transition-colors">♥</button>
                <span class="text-gray-400">24</span>
              </div>
            </div>
          </div>

          <!-- Review Card 2 -->
          <div
            class="bg-white border border-gray-200 review-card testimonial-shimmer rounded-3xl p-6 w-full md:min-w-[320px] lg:min-w-[380px] shadow-md animate-fadeInUp md:animate-slideInLeft">
            <div class="flex items-start space-x-4 mb-4">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="David Kim" class="h-12 w-12 rounded-full object-cover">
              <div class="flex-1">
                <div class="font-semibold text-gray-900">David Kim</div>
                <div class="text-sm text-gray-600">African Safari Adventure</div>
                <div class="flex text-yellow-400 text-sm mt-1">★★★★★</div>
              </div>
              <div class="text-xs text-gray-500">5 days ago</div>
            </div>
            <p class="text-gray-700 leading-relaxed mb-4">
              "Witnessing the Great Migration was a dream come true! The expert guides made sure we were in the right
              place at the right time. Professional service throughout the entire journey."
            </p>
            <div class="flex items-center justify-between text-sm">
              <span class="text-emerald-600 font-medium">✓ Verified Booking</span>
              <div class="flex space-x-1">
                <button class="text-gray-400 hover:text-red-500 transition-colors">♥</button>
                <span class="text-gray-400">31</span>
              </div>
            </div>
          </div>

          <!-- Review Card 3 -->
          <div
            class="bg-white border border-gray-200 review-card testimonial-shimmer rounded-3xl p-6 w-full md:min-w-[320px] lg:min-w-[380px] shadow-md animate-fadeInUp md:animate-slideInLeft">
            <div class="flex items-start space-x-4 mb-4">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="Lisa Chen" class="h-12 w-12 rounded-full object-cover">
              <div class="flex-1">
                <div class="font-semibold text-gray-900">Lisa Chen</div>
                <div class="text-sm text-gray-600">Japan Cultural Experience</div>
                <div class="flex text-yellow-400 text-sm mt-1">★★★★★</div>
              </div>
              <div class="text-xs text-gray-500">1 week ago</div>
            </div>
            <p class="text-gray-700 leading-relaxed mb-4">
              "From cherry blossoms in Kyoto to the bustling streets of Tokyo, every moment was perfectly curated. The
              tea ceremony experience was unforgettable. Highly recommended!"
            </p>
            <div class="flex items-center justify-between text-sm">
              <span class="text-emerald-600 font-medium">✓ Verified Booking</span>
              <div class="flex space-x-1">
                <button class="text-gray-400 hover:text-red-500 transition-colors">♥</button>
                <span class="text-gray-400">18</span>
              </div>
            </div>
          </div>

          <!-- Review Card 4 -->
          <div
            class="bg-white border border-gray-200 review-card testimonial-shimmer rounded-3xl p-6 w-full md:min-w-[320px] lg:min-w-[380px] shadow-md animate-fadeInUp md:animate-slideInLeft">
            <div class="flex items-start space-x-4 mb-4">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Marcus O'Brien" class="h-12 w-12 rounded-full object-cover">
              <div class="flex-1">
                <div class="font-semibold text-gray-900">Marcus O'Brien</div>
                <div class="text-sm text-gray-600">Iceland Northern Lights</div>
                <div class="flex text-yellow-400 text-sm mt-1">★★★★★</div>
              </div>
              <div class="text-xs text-gray-500">2 weeks ago</div>
            </div>
            <p class="text-gray-700 leading-relaxed mb-4">
              "The Northern Lights tour was absolutely spectacular! Our guide's knowledge of the best viewing spots
              made all the difference. The hot springs visit was the perfect end to each day."
            </p>
            <div class="flex items-center justify-between text-sm">
              <span class="text-emerald-600 font-medium">✓ Verified Booking</span>
              <div class="flex space-x-1">
                <button class="text-gray-400 hover:text-red-500 transition-colors">♥</button>
                <span class="text-gray-400">42</span>
              </div>
            </div>
          </div>

          <!-- Review Card 5 -->
          <div
            class="bg-white border border-gray-200 review-card testimonial-shimmer rounded-3xl p-6 w-full md:min-w-[320px] lg:min-w-[380px] shadow-md animate-fadeInUp md:animate-slideInLeft">
            <div class="flex items-start space-x-4 mb-4">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-5.webp" alt="Rachel Thompson" class="h-12 w-12 rounded-full object-cover">
              <div class="flex-1">
                <div class="font-semibold text-gray-900">Rachel Thompson</div>
                <div class="text-sm text-gray-600">Peru Machu Picchu Trek</div>
                <div class="flex text-yellow-400 text-sm mt-1">★★★★★</div>
              </div>
              <div class="text-xs text-gray-500">3 weeks ago</div>
            </div>
            <p class="text-gray-700 leading-relaxed mb-4">
              "Challenging but incredibly rewarding! The support team was amazing and the views were breathtaking.
              Reaching Machu Picchu at sunrise was a life-changing moment."
            </p>
            <div class="flex items-center justify-between text-sm">
              <span class="text-emerald-600 font-medium">✓ Verified Booking</span>
              <div class="flex space-x-1">
                <button class="text-gray-400 hover:text-red-500 transition-colors">♥</button>
                <span class="text-gray-400">27</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Carousel Navigation -->
        <button id="scroll-left"
          class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 bg-white shadow-lg rounded-full hidden md:flex items-center justify-center text-gray-600 hover:text-emerald-600 transition-all duration-300 z-10">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button id="scroll-right"
          class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 bg-white shadow-lg rounded-full hidden md:flex items-center justify-center text-gray-600 hover:text-emerald-600 transition-all duration-300 z-10">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>

<script>
  // Carousel functionality
  const carousel = document.getElementById('review-carousel');
  const scrollLeftBtn = document.getElementById('scroll-left');
  const scrollRightBtn = document.getElementById('scroll-right');

  const cardWidth = 380 + 24; // Card width + gap

  scrollLeftBtn.addEventListener('click', () => {
    carousel.scrollBy({
      left: -cardWidth,
      behavior: 'smooth'
    });
  });

  scrollRightBtn.addEventListener('click', () => {
    carousel.scrollBy({
      left: cardWidth,
      behavior: 'smooth'
    });
  });

  // Auto-scroll carousel
  let autoScrollInterval;

  const startAutoScroll = () => {
    autoScrollInterval = setInterval(() => {
      if (carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth) {
        carousel.scrollTo({ left: 0, behavior: 'smooth' });
      } else {
        carousel.scrollBy({ left: cardWidth, behavior: 'smooth' });
      }
    }, 5000);
  };

  const stopAutoScroll = () => {
    clearInterval(autoScrollInterval);
  };

  // Start auto-scroll when page loads
  setTimeout(startAutoScroll, 3000);

  // Stop auto-scroll when user interacts
  carousel.addEventListener('mouseenter', stopAutoScroll);
  carousel.addEventListener('mouseleave', startAutoScroll);
  scrollLeftBtn.addEventListener('click', stopAutoScroll);
  scrollRightBtn.addEventListener('click', stopAutoScroll);

  // Update navigation button states
  const updateNavButtons = () => {
    const isAtStart = carousel.scrollLeft <= 10;
    const isAtEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;

    scrollLeftBtn.style.opacity = isAtStart ? '0.5' : '1';
    scrollRightBtn.style.opacity = isAtEnd ? '0.5' : '1';
    scrollLeftBtn.style.pointerEvents = isAtStart ? 'none' : 'auto';
    scrollRightBtn.style.pointerEvents = isAtEnd ? 'none' : 'auto';
  };

  carousel.addEventListener('scroll', updateNavButtons);
  updateNavButtons(); // Initial state

  // Like button functionality
  document.querySelectorAll('.review-card button[class*="hover:text-red-500"]').forEach(button => {
    button.addEventListener('click', function (e) {
      e.preventDefault();
      const isLiked = this.classList.contains('text-red-500');
      const likeCount = this.nextElementSibling;
      const currentCount = parseInt(likeCount.textContent);

      if (isLiked) {
        this.classList.remove('text-red-500');
        this.classList.add('text-gray-400');
        likeCount.textContent = currentCount - 1;
      } else {
        this.classList.add('text-red-500');
        this.classList.remove('text-gray-400');
        likeCount.textContent = currentCount + 1;

        // Add heart animation
        this.style.transform = 'scale(1.2)';
        setTimeout(() => {
          this.style.transform = 'scale(1)';
        }, 200);
      }
    });
  });

  // Intersection Observer for animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0) translateX(0)';
      }
    });
  }, observerOptions);

  // Observe all animated elements
  document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
    el.style.opacity = '0';
    if (el.classList.contains('animate-slideInLeft')) {
      el.style.transform = 'translateX(-40px)';
    } else if (el.classList.contains('animate-slideInRight')) {
      el.style.transform = 'translateX(40px)';
    } else {
      el.style.transform = 'translateY(40px)';
    }
    observer.observe(el);
  });

  // Add subtle parallax effect to floating elements
  window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const parallaxElements = document.querySelectorAll('');

    parallaxElements.forEach((element, index) => {
      const speed = 0.5 + (index * 0.1);
      element.style.transform = `translateY(${scrolled * speed}px)`;
    });
  });

  // Add shimmer effect to review cards on hover
  document.querySelectorAll('.testimonial-shimmer').forEach(card => {
    card.addEventListener('mouseenter', function () {
      const shimmer = this.querySelector('::before') || this;
      shimmer.style.animationPlayState = 'running';
    });
  });

  // Smooth scroll for review section navigation
  function scrollToReviews() {
    document.querySelector('#review-carousel').scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  }

  // Add touch/swipe support for mobile carousel
  let startX = 0;
  let scrollLeft = 0;

  carousel.addEventListener('touchstart', (e) => {
    startX = e.touches[0].pageX - carousel.offsetLeft;
    scrollLeft = carousel.scrollLeft;
  });

  carousel.addEventListener('touchmove', (e) => {
    if (!startX) return;

    e.preventDefault();
    const x = e.touches[0].pageX - carousel.offsetLeft;
    const walk = (x - startX) * 2;
    carousel.scrollLeft = scrollLeft - walk;
  });

  carousel.addEventListener('touchend', () => {
    startX = 0;
  });

  // Add loading animation for reviews
  const addLoadingEffect = () => {
    const cards = document.querySelectorAll('.review-card');
    cards.forEach((card, index) => {
      setTimeout(() => {
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
      }, index * 200);
    });
  };

  // Initialize loading effect after a short delay
  setTimeout(addLoadingEffect, 500);

  // Add review filter functionality (for future enhancement)
  const filterReviews = (rating) => {
    // This would filter reviews by star rating
    // Implementation would depend on backend data structure
    console.log(`Filtering reviews by ${rating} stars`);
  };

  // Add keyboard navigation for carousel
  document.addEventListener('keydown', (e) => {
    if (document.activeElement === carousel || carousel.contains(document.activeElement)) {
      if (e.key === 'ArrowLeft') {
        e.preventDefault();
        scrollLeftBtn.click();
      } else if (e.key === 'ArrowRight') {
        e.preventDefault();
        scrollRightBtn.click();
      }
    }
  });
</script>