const TestimonialsSection = () => {
  const testimonials = [
    {
      name: "Sarah Johnson",
      location: "New York, USA",
      rating: 5,
      text: "Absolutely incredible experience! The attention to detail and personalized service exceeded all my expectations. I'll definitely be returning.",
      avatar: "SJ"
    },
    {
      name: "Marcus Weber",
      location: "Berlin, Germany", 
      rating: 5,
      text: "The perfect blend of luxury and comfort. Every aspect of my stay was meticulously planned and executed. Highly recommended!",
      avatar: "MW"
    },
    {
      name: "Emily Chen",
      location: "Tokyo, Japan",
      rating: 5,
      text: "From check-in to check-out, everything was seamless. The staff went above and beyond to make my business trip comfortable and productive.",
      avatar: "EC"
    }
  ];

  return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-6xl font-light text-foreground mb-4">testimonials</h2>
          <p className="text-muted-foreground text-lg">
            What our guests say about their experience
          </p>
        </div>
        
        <div className="grid md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="card-elevated p-8 text-center">
              <div className="w-16 h-16 bg-wood-accent rounded-full flex items-center justify-center text-primary font-medium text-lg mb-6 mx-auto">
                {testimonial.avatar}
              </div>
              
              <div className="flex justify-center gap-1 mb-4">
                {[...Array(testimonial.rating)].map((_, i) => (
                  <span key={i} className="text-wood-accent text-lg">★</span>
                ))}
              </div>
              
              <p className="text-muted-foreground leading-relaxed mb-6 italic">
                "{testimonial.text}"
              </p>
              
              <div>
                <h4 className="font-medium text-foreground">{testimonial.name}</h4>
                <p className="text-muted-foreground text-sm">{testimonial.location}</p>
              </div>
            </div>
          ))}
        </div>
        
        <div className="text-center mt-12">
          <div className="flex justify-center gap-2">
            {[1, 2, 3, 4, 5].map((dot, index) => (
              <div 
                key={index}
                className={`w-2 h-2 rounded-full ${index === 0 ? 'bg-wood-accent' : 'bg-muted/30'}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default TestimonialsSection;