import React from 'react';
import { Users, Award, Clock, Globe2 } from 'lucide-react';
import { useLanguage } from '../context/LanguageContext';
import { team } from '../locales/team';

const About: React.FC = () => {
  const { t, language } = useLanguage();

  const teamData = team[language];

  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/3183183/pexels-photo-3183183.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('about.title')}</h1>
          <p className="text-xl max-w-3xl">
            {t('about.subtitle')}
          </p>
        </div>
      </div>

      {/* Stats Section */}
      <div className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="text-center">
              <Users className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">300+</div>
              <div className="text-gray-600">{t('about.stats.clients')}</div>
            </div>
            <div className="text-center">
              <Award className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">20+</div>
              <div className="text-gray-600">{t('about.stats.experience')}</div>
            </div>
            <div className="text-center">
              <Clock className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">7/24</div>
              <div className="text-gray-600">{t('about.stats.support')}</div>
            </div>
            <div className="text-center">
              <Globe2 className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">3</div>
              <div className="text-gray-600">{t('about.stats.countries')}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="py-6">
        <div className="container mx-auto px-4">
          <div className="mb-6">

            <div className="space-y-6 mx-auto mx-auto text-gray-800 text-lg leading-relaxed">
              <p className="bg-white p-5 shadow-md border-l-4 border-blue-600">
                {t('about.description.part1')}
              </p>
              <p className="italic text-center text-blue-700 font-semibold">
                {t('about.description.motto')}
              </p>
              <p className="bg-white p-5 shadow-md border-l-4 border-blue-600">
                {t('about.description.part2')}
              </p>
              <p className="text-center text-blue-700 font-medium">
                {t('about.description.closing')}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div className="bg-white p-8 rounded-xl shadow-lg">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">{t('about.mission')}</h3>
              <p className="text-gray-700">{t('about.mission.desc')}</p>
            </div>
            <div className="bg-white p-8 rounded-xl shadow-lg">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">{t('about.vision')}</h3>
              <p className="text-gray-700">{t('about.vision.desc')}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Team Section */}
      <div className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
            {t('about.team')}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-5 gap-8">
            {teamData.map((member, index) => (
              <div key={index} className="text-center">
                <img src={member.imageUrl} alt={member.name} className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
                <h3 className="text-xl font-semibold text-gray-900">{member.name}</h3>
                <p className="text-gray-600">{member.title}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;