const testimonials = [
  {
    content: "I was blown away by Bookwiz's ability to fill in story gaps, understand and alter my characters, and it eliminates resistance. \"I don't feel like writing today\" is no longer an excuse.",
    author: "Ryan Maloney",
    role: "Author",
    avatar: "/testimonials/ryan.webp"
  },
  {
    content: "Bookwiz is great! ... I am confident in the products ability and what I see it evolving into for writers, copywriters, bloggers, etc. If you are looking for a partner with laser focused attention to your vision to offer creative ideas to move your copy along, look no further. Seriously! LOOK. NO. FURTHER.",
    author: "Milan Mazak",
    role: "Writer",
    avatar: "/testimonials/milan.jpg"
  },
  {
    content: "I've generated the synopsis, theme, setting and even the cover - It was almost surreal to see my ideas, which had been swirling around in my mind for so long, come to life with such ease and precision!",
    author: "Nilaksha Rathnayake",
    role: "Author",
    avatar: "/testimonials/nilaksha.webp"
  },
  {
    content: "I appreciate the quick answers. Overall I have found it to be one of the better options out there, if not the best.",
    author: "Jim Parducci",
    role: "Writer",
    avatar: "/testimonials/jim.png"
  }
]

interface TestimonialsProps {
  variant?: 'default' | 'landing'
  className?: string
}

export default function Testimonials({ variant = 'default', className = '' }: TestimonialsProps) {
  const isLanding = variant === 'landing'
  
  return (
    <div className={`bg-gradient-to-r from-teal-50 to-cyan-50 py-12 sm:py-16 lg:py-20 relative z-10 ${className}`}>
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12 sm:mb-16">
          <div className="inline-flex items-center px-3 sm:px-4 py-2 rounded-full bg-yellow-50 border border-yellow-200 text-yellow-700 text-xs sm:text-sm font-medium mb-4 sm:mb-6">
            <svg className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
            Loved by Writers
          </div>
          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-900 mb-3 sm:mb-4">
            {isLanding ? 'Real Authors, Real Results' : 'Join Thousands of Happy Authors'}
          </h2>
          <p className="text-base sm:text-lg lg:text-xl text-slate-600 max-w-2xl mx-auto">
            {isLanding 
              ? 'See how writers are finishing their novels 3x faster and publishing their first books with Bookwiz'
              : 'See how Bookwiz has transformed the writing journey for authors around the world'
            }
          </p>
        </div>
        <div className="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {testimonials.map((testimonial, index) => (
            <div 
              key={index} 
              className="group bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl p-4 sm:p-6 border border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:transform hover:scale-105"
            >
              <div className="flex items-center mb-3 sm:mb-4">
                <div className="relative">
                  <img
                    className="h-10 w-10 sm:h-12 sm:w-12 rounded-full border-2 border-teal-200 group-hover:border-teal-400 transition-colors duration-300"
                    src={testimonial.avatar}
                    alt={testimonial.author}
                  />
                  <div className="absolute -bottom-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-green-400 rounded-full border-2 border-white"></div>
                </div>
                <div className="ml-3">
                  <h4 className="text-sm sm:text-base font-semibold text-slate-900">{testimonial.author}</h4>
                  <p className="text-xs sm:text-sm text-slate-600">{testimonial.role}</p>
                </div>
              </div>
              <p className="text-slate-700 text-xs sm:text-sm leading-relaxed italic">"{testimonial.content}"</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}