import { Shield, Clock, Headphones, Award, Globe, Lock, Zap, Users } from 'lucide-react'

const Features = () => {
  const features = [
    {
      icon: Shield,
      title: '99.9% Uptime SLA',
      description: 'Industry-leading uptime guarantee with compensation for outages',
    },
    {
      icon: Clock,
      title: '24/7 Support',
      description: 'Round-the-clock technical support from hosting experts',
    },
    {
      icon: Lock,
      title: 'Enterprise Security',
      description: 'DDoS protection, SSL certificates, and security monitoring',
    },
    {
      icon: Zap,
      title: 'Lightning Fast',
      description: 'SSD storage, CDN, and optimized server configurations',
    },
    {
      icon: Globe,
      title: 'Global Infrastructure',
      description: 'Data centers worldwide for optimal performance',
    },
    {
      icon: Users,
      title: 'Developer Friendly',
      description: 'APIs, documentation, and tools built for developers',
    },
    {
      icon: Award,
      title: 'Industry Recognition',
      description: 'Trusted by 50,000+ developers and businesses worldwide',
    },
    {
      icon: Headphones,
      title: 'Expert Consultation',
      description: 'Human developer consulting for complex projects',
    },
  ]

  return (
    <section className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">Why Choose SiliconPin?</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Built by developers, for developers. We understand what you need to succeed.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={index}
                className="text-center group hover:scale-105 transition-transform duration-300"
              >
                <div className="w-16 h-16 bg-gradient-primary rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:shadow-glow transition-shadow duration-300">
                  <Icon className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-lg font-semibold mb-3">{feature.title}</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  {feature.description}
                </p>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}

export default Features