import React from 'react'
import { Link } from 'react-router-dom'
import {
  ArrowRight,
  Calendar,
  Users,
  Shield,
  Monitor,
  Smartphone,
  Server,
  Database,
  BarChart,
  BookOpen,
  CreditCard,
  MessageSquare,
  Phone,
} from 'lucide-react'
import { useLanguage } from '../context/LanguageContext'

const Home: React.FC = () => {
  const { t } = useLanguage()

  const features = [
    { icon: <Users className="w-12 h-12 text-blue-500" />, title: t('features.reliable'), description: t('features.reliable.desc') },
    { icon: <Calendar className="w-12 h-12 text-blue-500" />, title: t('features.rapid'), description: t('features.rapid.desc') },
    { icon: <BookOpen className="w-12 h-12 text-blue-500" />, title: t('features.expert'), description: t('features.expert.desc') },
    { icon: <CreditCard className="w-12 h-12 text-blue-500" />, title: t('features.muhasebe'), description: t('features.muhasebe.desc') },
    { icon: <MessageSquare className="w-12 h-12 text-blue-500" />, title: t('features.iletisim'), description: t('features.iletisim.desc') },
    { icon: <Phone className="w-12 h-12 text-blue-500" />, title: t('features.mobil'), description: t('features.mobil.desc') },
    { icon: <BarChart className="w-12 h-12 text-blue-500" />, title: t('features.scalable'), description: t('features.scalable.desc') },
    { icon: <Shield className="w-12 h-12 text-blue-500" />, title: t('features.guvenlik'), description: t('features.guvenlik.desc') },
  ]

  const solutions = [
    { icon: <Monitor className="w-16 h-16 text-white" />, title: t('solutions.web.title'), description: t('solutions.web.desc'), color: 'bg-blue-600' },
    { icon: <Smartphone className="w-16 h-16 text-white" />, title: t('solutions.mobile.title'), description: t('solutions.mobile.desc'), color: 'bg-purple-600' },
    { icon: <Server className="w-16 h-16 text-white" />, title: t('solutions.custom.title'), description: t('solutions.custom.desc'), color: 'bg-green-600' },
    { icon: <Database className="w-16 h-16 text-white" />, title: t('solutions.database.title'), description: t('solutions.database.desc'), color: 'bg-red-600' },
  ]

  return (
    <div className="min-h-screen">

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

            <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
              <Link to="/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">
                {t('hero.cta.consultation')} <ArrowRight className="ml-2" size={20} />
              </Link>
              <Link to="/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">
                {t('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">
                <Calendar className="mx-auto mb-4 text-blue-400" size={40} />
                <h3 className="text-xl font-semibold mb-3">{t('hero.service1.title')}</h3>
                <p className="text-gray-300">{t('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">
                <Users className="mx-auto mb-4 text-purple-400" size={40} />
                <h3 className="text-xl font-semibold mb-3">{t('hero.service2.title')}</h3>
                <p className="text-gray-300">{t('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">
                <Shield className="mx-auto mb-4 text-indigo-400" size={40} />
                <h3 className="text-xl font-semibold mb-3">{t('hero.service3.title')}</h3>
                <p className="text-gray-300">{t('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">{t('features.title')}</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('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>
                <h3 className="text-xl font-semibold text-gray-900 mb-4">{feature.title}</h3>
                <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">{t('solutions.title')}</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('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">{t('common.getStarted')}</h2>
          <p className="text-white text-lg mb-8">{t('common.contact')}</p>
          <Link to="/contact" className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
            {t('common.learnMore')}
          </Link>
        </div>
      </section>
    </div>
  )
}

export default Home