components/Features.js

import { Zap, Shield, Globe, GitBranch, Palette, Database, Lock, Cpu } from 'lucide-react';

const features = [
  {
    icon: Zap,
    title: 'Lightning Fast',
    description: 'Go from idea to deployed app in under 60 seconds. Our AI understands your intent and generates production-quality code instantly.',
    color: 'from-yellow-400 to-orange-500',
  },
  {
    icon: Shield,
    title: 'Type-Safe by Default',
    description: 'Every line of generated code is fully typed with TypeScript. Catch errors before they reach your users.',
    color: 'from-blue-400 to-cyan-500',
  },
  {
    icon: Globe,
    title: 'Deploy Anywhere',
    description: 'One-click deployments to Vercel, Netlify, or any platform. Your app goes live the moment you ship it.',
    color: 'from-green-400 to-emerald-500',
  },
  {
    icon: GitBranch,
    title: 'Git-Native Workflow',
    description: 'Built-in version control with visual diffs. Roll back any change, branch with confidence, and collaborate seamlessly.',
    color: 'from-purple-400 to-violet-500',
  },
  {
    icon: Palette,
    title: 'Beautiful by Default',
    description: 'Every component follows design best practices. Responsive, accessible, and stunning on every device.',
    color: 'from-pink-400 to-rose-500',
  },
  {
    icon: Database,
    title: 'Full-Stack Supabase',
    description: 'Integrated Supabase backend with auth, database, and storage. Your app is full-stack from the first prompt.',
    color: 'from-brand-400 to-indigo-500',
  },
  {
    icon: Lock,
    title: 'Enterprise Security',
    description: 'SOC 2 compliant infrastructure. Your code and data are encrypted at rest and in transit. Always.',
    color: 'from-red-400 to-pink-500',
  },
  {
    icon: Cpu,
    title: 'AI That Understands',
    description: 'Context-aware AI that remembers your project structure, patterns, and preferences across sessions.',
    color: 'from-teal-400 to-cyan-500',
  },
];

export default function Features() {
  return (
    <section id="features" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand-500/20 to-transparent" />
      </div>

      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 mb-4">
            <span className="text-xs font-medium text-brand-300 uppercase tracking-wider">Features</span>
          </div>
          <h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
            Everything you need to <span className="gradient-text">ship fast</span>
          </h2>
          <p className="text-lg text-surface-300 max-w-2xl mx-auto">
            From frontend to backend, design to deployment — Lovable handles the full stack so you can focus on what matters.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {features.map((feature, index) => (
            <div
              key={feature.title}
              className="group glass-card p-6 hover:bg-white/[0.08] transition-all duration-300 hover:-translate-y-1"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                <feature.icon className="w-5 h-5 text-white" />
              </div>
              <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
              <p className="text-sm text-surface-300 leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}