import { Zap, Shield, Globe, Layers, Cpu, Terminal } from 'lucide-react'

const features = [
  {
    name: 'Instant Generation',
    description: 'Convert plain text descriptions into complex code structures instantly.',
    icon: Zap,
  },
  {
    name: 'Secure Environment',
    description: 'Your code runs in isolated, sandboxed environments for maximum security.',
    icon: Shield,
  },
  {
    name: 'Global Collaboration',
    description: 'Share live notebooks with teams across the globe in real-time.',
    icon: Globe,
  },
  {
    name: 'Multi-Layer Support',
    description: 'Support for Python, JavaScript, Rust, and Go in a single interface.',
    icon: Layers,
  },
  {
    name: 'Neural Processing',
    description: 'Built on advanced neural networks to understand context better.',
    icon: Cpu,
  },
  {
    name: 'CLI Integration',
    description: 'Connect your local workflow with our powerful command line tools.',
    icon: Terminal,
  },
]

export default function Features() {
  return (
    <div className="py-24 bg-brand-dark relative" id="features">
      <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 font-bold text-white mb-4">Everything you need to build faster</h2>
          <p className="text-gray-400 max-w-2xl mx-auto">
            Deepnote isn't just a notebook. It's a complete development environment powered by AI.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature) => (
            <div key={feature.name} className="glass-panel p-6 rounded-xl hover:border-gray-600 transition-colors group">
              <div className="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center mb-4 text-brand-accent group-hover:text-white group-hover:bg-brand-accent transition-all">
                <feature.icon size={24} />
              </div>
              <h3 className="text-xl font-bold text-white mb-2">{feature.name}</h3>
              <p className="text-gray-400 leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}