import { Card, CardContent } from '@/components/ui/card'
import { Star, Quote } from 'lucide-react'

const Testimonials = () => {
  const testimonials = [
    {
      name: 'Alex Rodriguez',
      role: 'Senior DevOps Engineer',
      company: 'TechCorp',
      content:
        "SiliconPin's Kubernetes hosting has been a game-changer for our deployment pipeline. The auto-scaling works flawlessly and the support team is incredibly knowledgeable.",
      rating: 5,
      avatar: 'AR',
    },
    {
      name: 'Sarah Chen',
      role: 'Full Stack Developer',
      company: 'StartupXYZ',
      content:
        "The VPS performance is outstanding and the control panel makes management so easy. I've moved all my client projects here and couldn't be happier.",
      rating: 5,
      avatar: 'SC',
    },
    {
      name: 'Marcus Thompson',
      role: 'CTO',
      company: 'GrowthLab',
      content:
        'Their SMTP service has 99.9% deliverability rates. Our email campaigns have never performed better. The API integration was seamless.',
      rating: 5,
      avatar: 'MT',
    },
    {
      name: 'Emily Davis',
      role: 'Product Manager',
      company: 'InnovateCo',
      content:
        "The web tools suite is incredibly useful. The speech-to-text API powers our transcription service and it's more accurate than any other solution we've tried.",
      rating: 5,
      avatar: 'ED',
    },
  ]

  return (
    <section className="py-24 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">Trusted by Developers</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            See what our customers say about SiliconPin's services
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {testimonials.map((testimonial, index) => (
            <Card key={index} className="hover:shadow-card transition-shadow duration-300">
              <CardContent className="p-8">
                <div className="flex items-center mb-4">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-warning text-warning" />
                  ))}
                </div>

                <Quote className="w-8 h-8 text-primary mb-4 opacity-60" />

                <p className="text-foreground mb-6 leading-relaxed italic">
                  "{testimonial.content}"
                </p>

                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-gradient-hero rounded-full flex items-center justify-center text-white font-semibold">
                    {testimonial.avatar}
                  </div>
                  <div>
                    <div className="font-semibold text-foreground">{testimonial.name}</div>
                    <div className="text-sm text-muted-foreground">
                      {testimonial.role} at {testimonial.company}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Testimonials