import React from 'react';

const FeatureCardOne = () => {
  const features = [
    {
      title: 'Lightning Fast',
      description: 'Built with performance in mind, delivering exceptional speed and reliability.',
      icon: '⚡',
    },
    {
      title: 'Modern Design',
      description: 'Clean, contemporary aesthetics that captivate and engage your audience.',
      icon: '🎨',
    },
    {
      title: 'Responsive',
      description: 'Perfectly optimized for all devices, from mobile to desktop.',
      icon: '📱',
    },
    {
      title: 'Secure',
      description: 'Enterprise-grade security measures to protect your data and users.',
      icon: '🔒',
    },
  ];

  return (
    <section className="py-20 bg-gray-900 text-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 sm:text-4xl lg:text-5xl font-bold mb-4">
            Why Choose Us
          </h2>
          <p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
            Discover the features that make our platform stand out from the competition.
          </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="bg-gray-800 p-6 rounded-lg hover:bg-gray-700 transition-colors">
              <div className="text-4xl mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
              <p className="text-gray-400">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeatureCardOne;
