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

const Home: React.FC = () => {
  const { translate } = useLocalization()
  const [currentSlide, setCurrentSlide] = useState(0)

  const slides = [
    {
      title: translate('::Public.hero.slide1.title'),
      subtitle: translate('::Public.hero.slide1.subtitle'),
      services: [
        {
          icon: <FaCalendarAlt className="mx-auto mb-4 text-blue-400" size={40} />,
          title: translate('::Public.hero.slide1.service1.title'),
          desc: translate('::Public.hero.slide1.service1.desc'),
        },
        {
          icon: <FaUsers className="mx-auto mb-4 text-purple-400" size={40} />,
          title: translate('::Public.hero.slide1.service2.title'),
          desc: translate('::Public.hero.slide1.service2.desc'),
        },
        {
          icon: <FaShieldAlt className="mx-auto mb-4 text-indigo-400" size={40} />,
          title: translate('::Public.hero.slide1.service3.title'),
          desc: translate('::Public.hero.slide1.service3.desc'),
        },
      ],
    },
    {
      title: translate('::Public.hero.slide2.title'),
      subtitle: translate('::Public.hero.slide2.subtitle'),
      services: [
        {
          icon: <FaChartBar className="mx-auto mb-4 text-green-400" size={40} />,
          title: translate('::Public.hero.slide2.service1.title'),
          desc: translate('::Public.hero.slide2.service1.desc'),
        },
        {
          icon: <FaCreditCard className="mx-auto mb-4 text-yellow-400" size={40} />,
          title: translate('::Public.hero.slide2.service2.title'),
          desc: translate('::Public.hero.slide2.service2.desc'),
        },
        {
          icon: <FaDatabase className="mx-auto mb-4 text-red-400" size={40} />,
          title: translate('::Public.hero.slide2.service3.title'),
          desc: translate('::Public.hero.slide2.service3.desc'),
        },
      ],
    },
    {
      title: translate('::Public.hero.slide3.title'),
      subtitle: translate('::Public.hero.slide3.subtitle'),
      services: [
        {
          icon: <FaDesktop className="mx-auto mb-4 text-cyan-400" size={40} />,
          title: translate('::Public.hero.slide3.service1.title'),
          desc: translate('::Public.hero.slide3.service1.desc'),
        },
        {
          icon: <FaServer className="mx-auto mb-4 text-orange-400" size={40} />,
          title: translate('::Public.hero.slide3.service2.title'),
          desc: translate('::Public.hero.slide3.service2.desc'),
        },
        {
          icon: <FaMobileAlt className="mx-auto mb-4 text-pink-400" size={40} />,
          title: translate('::Public.hero.slide3.service3.title'),
          desc: translate('::Public.hero.slide3.service3.desc'),
        },
      ],
    },
  ]

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length)
    }, 10000)
    return () => clearInterval(timer)
  }, [])

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length)
  }

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)
  }

  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('::App.Coordinator.Classroom.Planning'),
      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.services.web.title'),
      description: translate('::Public.solutions.web.desc'),
      color: 'bg-blue-600',
    },
    {
      icon: <FaMobileAlt className="w-16 h-16 text-white" />,
      title: translate('::Public.services.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 | ${APP_NAME}`}
        title={translate('::' + 'App.Home')}
        defaultTitle={APP_NAME}
      ></Helmet>

      {/* Hero Carousel */}
      <div className="relative min-h-screen overflow-hidden">
        <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>

        {/* Carousel Content */}
        <div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
          {slides.map((slide, index) => (
            <div
              key={index}
              className={`absolute inset-0 transition-all duration-700 ease-in-out ${
                index === currentSlide
                  ? 'opacity-100 translate-x-0'
                  : index < currentSlide
                    ? 'opacity-0 -translate-x-full'
                    : 'opacity-0 translate-x-full'
              }`}
            >
              <div className="container mx-auto px-4 pt-32">
                <div className="max-w-4xl mx-auto text-center">
                  <h1 className="text-3xl md:text-6xl font-bold mb-6 text-white animate-fade-in">
                    {slide.title}
                  </h1>
                  <p className="text-xl md:text-2xl text-gray-300 mb-12 animate-fade-in-delay">
                    {slide.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">
                    {slide.services.map((service, i) => (
                      <div
                        key={i}
                        className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all"
                      >
                        {service.icon}
                        <h3 className="text-xl font-semibold mb-3 text-white">{service.title}</h3>
                        <p className="text-gray-300">{service.desc}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Navigation Buttons */}
        <button
          onClick={prevSlide}
          className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white p-4 rounded-full transition-all z-10"
          aria-label="Previous slide"
        >
          <FaChevronLeft size={24} />
        </button>
        <button
          onClick={nextSlide}
          className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white p-4 rounded-full transition-all z-10"
          aria-label="Next slide"
        >
          <FaChevronRight size={24} />
        </button>

        {/* Slide Indicators */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-10">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`w-3 h-3 rounded-full transition-all ${
                index === currentSlide ? 'bg-white w-8' : 'bg-white/50 hover:bg-white/70'
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </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