import React from 'react'
import { Users, Award, Clock, Globe2 } from 'lucide-react'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useCountUp } from '@/utils/hooks/useCountUp'

const About: React.FC = () => {
  const { translate } = useLocalization()

  // Counter animations
  const clientsCount = useCountUp({ end: 300, suffix: '+', duration: 2500 })
  const experienceCount = useCountUp({ end: 20, suffix: '+', duration: 2000 })
  const countriesCount = useCountUp({ end: 3, duration: 1500 })

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-12">
        <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-20 relative">
          <h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">
            {translate('::Public.about.title')}
          </h1>
          <p className="text-xl max-w-3xl ml-4">{translate('::Public.about.subtitle')}</p>
        </div>
      </div>

      {/* Stats Section */}
      <div className="py-10 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" ref={clientsCount.elementRef}>
              <Users className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">
                {clientsCount.displayValue}
              </div>
              <div className="text-gray-600">{translate('::Public.about.stats.clients')}</div>
            </div>
            <div className="text-center" ref={experienceCount.elementRef}>
              <Award className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">
                {experienceCount.displayValue}
              </div>
              <div className="text-gray-600">{translate('::Public.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">{translate('::Public.about.stats.support')}</div>
            </div>
            <div className="text-center" ref={countriesCount.elementRef}>
              <Globe2 className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">
                {countriesCount.displayValue}
              </div>
              <div className="text-gray-600">{translate('::Public.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">
                {translate('::Public.about.description.part1')}
              </p>
              <p className="italic text-center text-blue-700 font-semibold">
                {translate('::Public.about.description.motto')}
              </p>
              <p className="bg-white p-5 shadow-md border-l-4 border-blue-600">
                {translate('::Public.about.description.part2')}
              </p>
              <p className="text-center text-blue-700 font-medium">
                {translate('::Public.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">
                {translate('::Public.about.mission')}
              </h3>
              <p className="text-gray-700">{translate('::Public.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">
                {translate('::Public.about.vision')}
              </h3>
              <p className="text-gray-700">{translate('::Public.about.vision.desc')}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default About