import React, { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet'
import navigationIcon from '@/configs/navigation-icon.config'
import { AboutDto } from '@/proxy/about/models'
import { getAbout } from '@/services/about'
import { useLocalization } from '@/utils/hooks/useLocalization'

const About: React.FC = () => {
  const { translate } = useLocalization()
  const [loading, setLoading] = useState(true)
  const [about, setAbout] = useState<AboutDto>()

  const iconColors = [
    'text-blue-600',
    'text-red-600',
    'text-green-600',
    'text-purple-600',
    'text-yellow-600',
    'text-indigo-600',
  ]

  function getRandomColor() {
    return iconColors[Math.floor(Math.random() * iconColors.length)]
  }

  useEffect(() => {
    setLoading(true)
    const fetchServices = async () => {
      try {
        const result = await getAbout()
        setAbout(result.data)
      } catch (error) {
        console.error('About alınırken hata oluştu:', error)
      } finally {
        setLoading(false)
      }
    }
    fetchServices()
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
        </div>
      </div>
    )
  }

  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">
              {about?.statsDto.map((stat, index) => {
                const IconComponent = navigationIcon[stat.icon || '']

                let displayValue = stat.value
                let elementRef = undefined

                return (
                  <div key={index} className="text-center">
                    {IconComponent && (
                      <IconComponent className={`w-12 h-12 mx-auto mb-4 ${getRandomColor()}`} />
                    )}
                    <div className="text-4xl font-bold text-gray-900 mb-2">{displayValue}</div>
                    <div className="text-gray-600">{translate('::' + stat.labelKey)}</div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="py-6">
          <div className="container mx-auto px-4">
            <div className="mb-6">
              <div className="p-5 mx-auto mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600">
                <p>{translate('::' + about?.descriptionsDto[0])}</p>
                <p className="text-center p-5 text-blue-800">
                  {translate('::' + about?.descriptionsDto[1])}
                </p>
                <p>{translate('::' + about?.descriptionsDto[2])}</p>
                <p className="text-center p-5 text-blue-800">
                  {translate('::' + about?.descriptionsDto[3])}
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              {about?.sectionsDto.map((section, index) => (
                <div key={index} className="bg-white p-8 rounded-xl shadow-lg">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">
                    {translate('::' + section.key)}
                  </h3>
                  <p className="text-gray-700">{translate('::' + section.descKey)}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default About