import React from 'react';

const BenefitsSection = () => {
  const benefits = [
    {
      title: "Flexibility and scalability",
      description: "Automated and infrastructure and our managed container and orchestration services, you can add and delete resources directly via the 3engines Control Panel, or via API."
    },
    {
      title: "Predictable costs and transparent billing",
      description: "Only pay for what you use. API callback network traffic are included. If you're opting for a long-term subscription, then there is a great way to save money."
    },
    {
      title: "Interoperability and standardisation",
      description: "Feel free to mix and match various cloud technologies to suit your needs. Based on open-source standards such as OpenStack, Kubernetes or Docker, our cloud is interoperable and helps you avoid vendor lock."
    },
    {
      title: "Resilience for your critical applications",
      description: "We're always working to provide you with cloud solutions designed to a 24/7 SLA, opening that means the highest standards of availability and reliability, with the best price-performance ratio."
    },
    {
      title: "Data residency",
      description: "Get your data as close to your users as possible by deploying in our Local Zones."
    },
    {
      title: "Sovereignty and security of your data",
      description: "Regardless of where you choose to deploy it, your data stays your data. Most of our Cloud services are already certified with the highest standards of security and compliance."
    }
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 py-12">
      {/* Title */}
      <div className="text-center mb-12">
        <h2 className="text-4xl font-bold text-gray-700 max-w-4xl mx-auto leading-tight">
          Benefits
        </h2>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {benefits.map((benefit, index) => (
          <div 
            key={index} 
            className="bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 p-6 border border-gray-100"
          >
            <div className="space-y-4">
              <h3 className="text-lg font-semibold text-blue-900 leading-tight">
                {benefit.title}
              </h3>
              <p className="text-gray-600 text-sm leading-relaxed">
                {benefit.description}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default BenefitsSection;