components/Features.jsx

import { Cpu, Zap, Wifi, Code, Shield, Users } from 'lucide-react';

const features = [
  {
    icon: Cpu,
    title: 'High Performance',
    description: 'Powered by advanced actuators providing precise control and smooth movements for complex tasks.',
  },
  {
    icon: Zap,
    title: 'Easy Setup',
    description: 'Get started in minutes with our intuitive setup process and comprehensive documentation.',
  },
  {
    icon: Wifi,
    title: 'Cloud Connected',
    description: 'Seamlessly integrate with cloud services and control your robot from anywhere in the world.',
  },
  {
    icon: Code,
    title: 'Open Source',
    description: 'Fully open-source hardware and software. Customize and extend to fit your specific needs.',
  },
  {
    icon: Shield,
    title: 'Safe & Reliable',
    description: 'Built with safety in mind. Includes collision detection and emergency stop functionality.',
  },
  {
    icon: Users,
    title: 'Community Driven',
    description: 'Join a vibrant community of developers, researchers, and robotics enthusiasts.',
  },
];

export default function Features() {
  return (
    <section id="features" className="py-24 bg-gray-800/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">
            <span className="text-gradient">Powerful Features</span>
          </h2>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Everything you need to bring your robotics projects to life
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div
              key={index}
              className="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10"
            >
              <div className="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <feature.icon className="w-7 h-7 text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-white">{feature.title}</h3>
              <p className="text-gray-400">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}