import React from 'react'
import { Link } from 'react-router-dom'
import {
  FaArrowRight,
  FaCalendarAlt,
  FaUsers,
  FaShieldAlt,
  FaDesktop,
  FaMobileAlt,
  FaServer,
  FaDatabase,
  FaChartBar,
  FaBookOpen,
  FaCreditCard,
  FaRegComment,
  FaPhone
} from 'react-icons/fa';
import { useLocalization } from '@/utils/hooks/useLocalization'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Helmet } from 'react-helmet'

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

  const features = [
    {
      icon: <FaUsers className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.reliable'),
      description: translate('::Public.features.reliable.desc'),
    },
    {
      icon: <FaCalendarAlt className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.rapid'),
      description: translate('::Public.features.rapid.desc'),
    },
    {
      icon: <FaBookOpen className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.expert'),
      description: translate('::Public.features.expert.desc'),
    },
    {
      icon: <FaCreditCard className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.muhasebe'),
      description: translate('::Public.features.muhasebe.desc'),
    },
    {
      icon: <FaRegComment className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.iletisim'),
      description: translate('::Public.features.iletisim.desc'),
    },
    {
      icon: <FaPhone className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.mobil'),
      description: translate('::Public.features.mobil.desc'),
    },
    {
      icon: <FaChartBar className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.scalable'),
      description: translate('::Public.features.scalable.desc'),
    },
    {
      icon: <FaShieldAlt className="w-12 h-12 text-blue-500" />,
      title: translate('::Public.features.guvenlik'),
      description: translate('::Public.features.guvenlik.desc'),
    },
  ]

  const solutions = [
    {
      icon: <FaDesktop className="w-16 h-16 text-white" />,
      title: translate('::Public.solutions.web.title'),
      description: translate('::Public.solutions.web.desc'),
      color: 'bg-blue-600',
    },
    {
      icon: <FaMobileAlt className="w-16 h-16 text-white" />,
      title: translate('::Public.solutions.mobile.title'),
      description: translate('::Public.solutions.mobile.desc'),
      color: 'bg-purple-600',
    },
    {
      icon: <FaServer className="w-16 h-16 text-white" />,
      title: translate('::Public.solutions.custom.title'),
      description: translate('::Public.solutions.custom.desc'),
      color: 'bg-green-600',
    },
    {
      icon: <FaDatabase className="w-16 h-16 text-white" />,
      title: translate('::Public.solutions.database.title'),
      description: translate('::Public.solutions.database.desc'),
      color: 'bg-red-600',
    },
  ]

  return (
    <div className="min-h-screen">
      <Helmet
        titleTemplate="%s | Sözsoft"
        title={translate('::' + 'App.Home')}
        defaultTitle="Sözsoft"
      ></Helmet>

      {/* Hero */}
      <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">
            <h1 className="text-3xl md:text-5xl font-bold mb-6 text-white">
              {translate('::Public.hero.title')}
            </h1>
            <p className="text-xl md:text-2xl text-gray-300 mb-12">
              {translate('::Public.hero.subtitle')}
            </p>

            <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
              <Link
                to={ROUTES_ENUM.public.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"
              >
                {translate('::Public.hero.cta.consultation')}{' '}
                <FaArrowRight className="ml-2" size={20} />
              </Link>
              <Link
                to={ROUTES_ENUM.public.products}
                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"
              >
                {translate('::Public.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 hover:scale-105 hover:bg-white/10 transition-all">
                <FaCalendarAlt className="mx-auto mb-4 text-blue-400" size={40} />
                <h3 className="text-xl font-semibold mb-3 text-white">
                  {translate('::Public.hero.service1.title')}
                </h3>
                <p className="text-gray-300">{translate('::Public.hero.service1.desc')}</p>
              </div>
              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all">
                <FaUsers className="mx-auto mb-4 text-purple-400" size={40} />
                <h3 className="text-xl font-semibold mb-3 text-white">
                  {translate('::Public.hero.service2.title')}
                </h3>
                <p className="text-gray-300">{translate('::Public.hero.service2.desc')}</p>
              </div>
              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all">
                <FaShieldAlt className="mx-auto mb-4 text-indigo-400" size={40} />
                <h3 className="text-xl font-semibold mb-3 text-white">
                  {translate('::Public.hero.service3.title')}
                </h3>
                <p className="text-gray-300">{translate('::Public.hero.service3.desc')}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Features */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              {translate('::Public.features.title')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              {translate('::Public.features.subtitle')}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, i) => (
              <div
                key={i}
                className="p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow"
              >
                <div className="mb-6">{feature.icon}</div>
                <h2 className="text-2xl font-bold text-gray-900">{feature.title}</h2>
                <p className="text-gray-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Solutions */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              {translate('::Public.solutions.title')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              {translate('::Public.solutions.subtitle')}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {solutions.map((s, i) => (
              <div
                key={i}
                className="group relative overflow-hidden rounded-2xl transition-all hover:scale-105"
              >
                <div className={`${s.color} p-8 h-full`}>
                  <div className="mb-6">{s.icon}</div>
                  <h3 className="text-2xl font-semibold text-white mb-4">{s.title}</h3>
                  <p className="text-white/90">{s.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="bg-blue-600 py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            {translate('::Public.common.getStarted')}
          </h2>
          <p className="text-white text-lg mb-8">{translate('::Public.common.contact')}</p>
          <Link
            to={ROUTES_ENUM.public.contact}
            className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
          >
            {translate('::Public.common.learnMore')}
          </Link>
        </div>
      </section>
    </div>
  )
}

export default Home