import React from 'react';
import { useTranslation } from 'react-i18next';
import { Rocket, Shield, Zap, Headphones } from 'lucide-react';

const BenefitsSection: React.FC = () => {
    const { t } = useTranslation();

    const benefits = [
        {
            icon: Rocket,
            title: t('marketing.benefits.rapidDeployment.title'),
            description: t('marketing.benefits.rapidDeployment.description'),
            color: 'text-blue-600 dark:text-blue-400',
            bgColor: 'bg-blue-100 dark:bg-blue-900/30',
        },
        {
            icon: Shield,
            title: t('marketing.benefits.enterpriseSecurity.title'),
            description: t('marketing.benefits.enterpriseSecurity.description'),
            color: 'text-green-600 dark:text-green-400',
            bgColor: 'bg-green-100 dark:bg-green-900/30',
        },
        {
            icon: Zap,
            title: t('marketing.benefits.highPerformance.title'),
            description: t('marketing.benefits.highPerformance.description'),
            color: 'text-purple-600 dark:text-purple-400',
            bgColor: 'bg-purple-100 dark:bg-purple-900/30',
        },
        {
            icon: Headphones,
            title: t('marketing.benefits.expertSupport.title'),
            description: t('marketing.benefits.expertSupport.description'),
            color: 'text-orange-600 dark:text-orange-400',
            bgColor: 'bg-orange-100 dark:bg-orange-900/30',
        },
    ];

    return (
        <section className="py-20 bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {benefits.map((benefit, index) => (
                        <div key={index} className="text-center group hover:-translate-y-1 transition-transform duration-300">
                            <div className={`inline-flex p-4 rounded-2xl ${benefit.bgColor} mb-6 group-hover:scale-110 transition-transform duration-300`}>
                                <benefit.icon className={`w-8 h-8 ${benefit.color}`} />
                            </div>
                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                                {benefit.title}
                            </h3>
                            <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                                {benefit.description}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default BenefitsSection;