import React from 'react'
import {
  FaUsers,
  FaAward,
  FaClock,
  FaGlobe
} from 'react-icons/fa';
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useCountUp } from '@/utils/hooks/useCountUp'
import { Helmet } from 'react-helmet'

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 (
    <>
      <Helmet
        titleTemplate="%s | Sözsoft"
        title={translate('::' + 'Public.about.title')}
        defaultTitle="Sözsoft"
      ></Helmet>

      <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}>
                <FaUsers 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}>
                <FaAward 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">
                <FaClock 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}>
                <FaGlobe 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