import React from 'react';
import { Zap, Shield, Rocket, Users } from 'lucide-react';

const features = [
  {
    icon: <Zap className="h-8 w-8" />,
    title: "Lightning Fast",    description: "Experience blazing fast performance with our optimized architecture and cutting-edge technology."
  },
  {
    icon: <Shield className="h-8 w-8" />,
    title: "Secure & Reliable",    description: "Your data is protected with enterprise-grade security measures and 99.9% uptime guarantee."
  },
  {
    icon: <Rocket className="h-8 w-8" />,
    title: "Scale with Ease",    description: "Grow your business without limits. Our platform scales automatically to meet your needs."
  },
  {
    icon: <Users className="h-8 w-8" />,
    title: "Team Collaboration",    description: "Work together seamlessly with real-time collaboration tools and shared workspaces."
  }
];

const FeatureCardOne: React.FC = () => {
  return (
    <section className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Why Choose Our Platform?
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Discover the features that make us the preferred choice for thousands of businesses worldwide.
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="group">
              <div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100 hover:border-blue-200">
                <div className="flex items-center justify-center w-16 h-16 bg-blue-100 rounded-xl mb-6 group-hover:bg-blue-200 transition-colors duration-300">
                  <div className="text-blue-600">
                    {feature.icon}
                  </div>
                </div>
                
                <h3 className="text-xl font-semibold text-gray-900 mb-4">
                  {feature.title}
                </h3>
                
                <p className="text-gray-600 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeatureCardOne;