import React from 'react';
import { ArrowRight, Code, Globe2, Cpu } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useLanguage } from '../../context/LanguageContext';

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

  return (
    <div className="relative min-h-screen">
      <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div>
      <div className="absolute inset-0 opacity-20" style={{
        backgroundImage: 'url("https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1920")',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}></div>
      
      <div className="relative container mx-auto px-4 pt-32 pb-16">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
            {t('hero.title')}
          </h1>
          
          <p className="text-xl md:text-2xl text-gray-300 mb-12 leading-relaxed">
            {t('hero.subtitle')}
          </p>

          <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
            <Link
              to="/contact"
              className="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105"
            >
              {t('hero.cta.consultation')}
              <ArrowRight className="ml-2" size={20} />
            </Link>
            <Link
              to="/services"
              className="inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105"
            >
              {t('hero.cta.discover')}
            </Link>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center transform transition-all hover:scale-105 hover:bg-white/10">
              <Code className="mx-auto mb-4 text-blue-400" size={40} />
              <h3 className="text-xl font-semibold mb-3">{t('hero.service1.title')}</h3>
              <p className="text-gray-300">{t('hero.service1.desc')}</p>
            </div>
            
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center transform transition-all hover:scale-105 hover:bg-white/10">
              <Globe2 className="mx-auto mb-4 text-purple-400" size={40} />
              <h3 className="text-xl font-semibold mb-3">{t('hero.service2.title')}</h3>
              <p className="text-gray-300">{t('hero.service2.desc')}</p>
            </div>
            
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center transform transition-all hover:scale-105 hover:bg-white/10">
              <Cpu className="mx-auto mb-4 text-indigo-400" size={40} />
              <h3 className="text-xl font-semibold mb-3">{t('hero.service3.title')}</h3>
              <p className="text-gray-300">{t('hero.service3.desc')}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;