import React from 'react';
import { Code2, Database, Globe2, Smartphone, Server, Users, Shield, Settings } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';

const Services: React.FC = () => {
  const { t } = useLanguage();

  const services = [
    {
      icon: <Code2 className="w-12 h-12 text-blue-600" />,
      title: t('services.software.title'),
      description: t('services.software.desc'),
      features: [
        t('services.software.features.analysis'),
        t('services.software.features.design'),
        t('services.software.features.development'),
        t('services.software.features.testing'),
        t('services.software.features.maintenance')
      ]
    },
    {
      icon: <Globe2 className="w-12 h-12 text-purple-600" />,
      title: t('services.web.title'),
      description: t('services.web.desc'),
      features: [
        t('services.web.features.frontend'),
        t('services.web.features.backend'),
        t('services.web.features.api'),
        t('services.web.features.seo'),
        t('services.web.features.performance')
      ]
    },
    {
      icon: <Smartphone className="w-12 h-12 text-green-600" />,
      title: t('services.mobile.title'),
      description: t('services.mobile.desc'),
      features: [
        t('services.mobile.features.design'),
        t('services.mobile.features.native'),
        t('services.mobile.features.cross'),
        t('services.mobile.features.push'),
        t('services.mobile.features.store')
      ]
    },
    {
      icon: <Database className="w-12 h-12 text-red-600" />,
      title: t('services.database.title'),
      description: t('services.database.desc'),
      features: [
        t('services.database.features.design'),
        t('services.database.features.optimization'),
        t('services.database.features.migration'),
        t('services.database.features.backup'),
        t('services.database.features.recovery')
      ]
    },
    {
      icon: <Server className="w-12 h-12 text-yellow-600" />,
      title: t('services.integration.title'),
      description: t('services.integration.desc'),
      features: [
        t('services.integration.features.api'),
        t('services.integration.features.middleware'),
        t('services.integration.features.legacy'),
        t('services.integration.features.realtime'),
        t('services.integration.features.monitoring')
      ]
    },
    {
      icon: <Users className="w-12 h-12 text-indigo-600" />,
      title: t('services.consulting.title'),
      description: t('services.consulting.desc'),
      features: [
        t('services.consulting.features.tech'),
        t('services.consulting.features.project'),
        t('services.consulting.features.digital'),
        t('services.consulting.features.risk'),
        t('services.consulting.features.training')
      ]
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-24">
        <div className="absolute inset-0 opacity-20" style={{
          backgroundImage: 'url("https://images.pexels.com/photos/3183173/pexels-photo-3183173.jpeg?auto=compress&cs=tinysrgb&w=1920")',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}></div>
        <div className="container mx-auto pt-16 px-4 relative">
          <h1 className="text-5xl font-bold mb-6">{t('services.title')}</h1>
          <p className="text-xl max-w-3xl">
            {t('services.subtitle')}
          </p>
        </div>
      </div>

      {/* Services Grid */}
      <div className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
                <div className="mb-6">{service.icon}</div>
                <h3 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h3>
                <p className="text-gray-600 mb-6">{service.description}</p>
                <ul className="space-y-2">
                  {service.features.map((feature, fIndex) => (
                    <li key={fIndex} className="flex items-center text-gray-700">
                      <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Call to Action */}
      <div className="bg-blue-900 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">{t('services.cta.title')}</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            {t('services.cta.description')}
          </p>
          <Link 
            to="/contact"
            className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
          >
            {t('services.cta.contact')}
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Services;