import FeatureCard from './FeatureCard';

export default function Features() {
  const features = [
    {
      icon: "🚀",
      title: "High Performance",
      description: "Built with Next.js for optimal performance and fast loading times. Experience lightning-fast page loads and smooth interactions."
    },
    {
      icon: "📱",
      title: "Responsive Design",
      description: "Mobile-first approach ensures your application looks great on all devices. From smartphones to desktop computers."
    },
    {
      icon: "🎨",
      title: "Modern UI",
      description: "Clean, modern interface designed with Tailwind CSS. Beautiful components that enhance user experience."
    },
    {
      icon: "⚡",
      title: "Fast Development",
      description: "Hot reload, TypeScript support, and modern tooling for rapid development. Build features faster than ever."
    },
    {
      icon: "🔒",
      title: "Secure",
      description: "Built-in security features and best practices. Protect your users' data with enterprise-grade security."
    },
    {
      icon: "🌐",
      title: "Scalable",
      description: "Architecture that grows with your needs. Handle thousands of users without performance degradation."
    }
  ];

  return (
    <section id="features" className="py-20 bg-gray-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-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Amazing Features
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Discover the powerful features that make our React application stand out from the rest.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="animate-fade-in" style={{ animationDelay: `${index * 0.1}s` }}>
              <FeatureCard {...feature} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}