import { useState } from 'react';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Badge } from '@/client/components/ui/badge';
import { Separator } from '@/client/components/ui/separator';
import {
  Brain,
  Layout,
  Code,
  Users,
  Zap,
  Rocket,
  Shield,
  CheckCircle,
  Target,
  Building,
  ArrowRight
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import UserInfoModal from '@/client/home/components/UserInfoModal';
import { useAuth } from '@/client/home/hooks/AuthProvider';

export default function HomePage() {
  const navigate = useNavigate();
  const { user, isAuthenticated } = useAuth();
  const [showUserModal, setShowUserModal] = useState(false);

  const services = [
    {
      icon: <Brain className="h-8 w-8" />,
      title: "AI工具平台",
      description: "智能文档处理、图像识别、数据分析等AI解决方案",
      link: "/ai-tools",
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      icon: <Layout className="h-8 w-8" />,
      title: "设计规划服务",
      description: "UI/UX设计、品牌视觉、产品架构等专业设计服务",
      link: "/design-planning",
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      icon: <Code className="h-8 w-8" />,
      title: "软件开发",
      description: "Web应用、桌面应用、云原生等全方位开发服务",
      link: "/software-requirements",
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      icon: <Users className="h-8 w-8" />,
      title: "人才共享",
      description: "专业人才派遣、项目外包、技术咨询等灵活合作",
      link: "/talent-sharing",
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    }
  ];

  const stats = [
    { value: "2018", label: "成立时间", icon: <Building className="h-5 w-5" /> },
    { value: "50+", label: "专业团队", icon: <Users className="h-5 w-5" /> },
    { value: "200+", label: "成功项目", icon: <CheckCircle className="h-5 w-5" /> },
    { value: "1000+", label: "服务客户", icon: <Target className="h-5 w-5" /> }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/5 to-purple-600/5" />
        
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-16">
          <div className="text-center">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-6">
              <Zap className="h-4 w-4 mr-2" />
              专业AI技术解决方案提供商
            </div>
            
            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
              元亨科技
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
                引领智能未来
              </span>
            </h1>
            
            <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
              专注于人工智能技术研发与应用，为企业提供全方位的智能化解决方案，
              助力数字化转型和业务创新
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button 
                size="lg" 
                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-3 text-lg"
                onClick={() => navigate('/ai-tools')}
              >
                <Rocket className="h-5 w-5 mr-2" />
                了解产品
              </Button>
              <Button 
                size="lg" 
                variant="outline"
                className="border-2 px-8 py-3 text-lg"
                onClick={() => navigate('/contact')}
              >
                <ArrowRight className="h-5 w-5 mr-2" />
                联系我们
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <div className="bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="flex justify-center mb-3">
                  <div className="p-3 bg-blue-100 rounded-full">
                    {stat.icon}
                  </div>
                </div>
                <div className="text-3xl font-bold text-gray-900 mb-1">{stat.value}</div>
                <div className="text-sm text-gray-600">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Services Section */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              核心服务
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              我们提供全方位的技术服务和解决方案
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {services.map((service, index) => (
              <Card 
                key={index}
                className="border-0 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer"
                onClick={() => navigate(service.link)}
              >
                <CardHeader>
                  <div className="flex items-center mb-4">
                    <div className={`p-3 rounded-lg ${service.bgColor} ${service.color} mr-4`}>
                      {service.icon}
                    </div>
                    <CardTitle className="text-xl">{service.title}</CardTitle>
                  </div>
                  <CardDescription className="text-base">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Button variant="ghost" className="w-full justify-between">
                    了解更多
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Why Choose Us */}
      <div className="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              为什么选择元亨科技
            </h2>
            <p className="text-xl text-gray-600">
              专业、创新、可靠的技术合作伙伴
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: "技术实力",
                description: "拥有资深的技术团队和前沿的技术栈，确保项目质量",
                icon: <Zap className="h-8 w-8" />,
                features: ["资深技术团队", "前沿技术栈", "严格质量把控"]
              },
              {
                title: "丰富经验",
                description: "服务过众多行业客户，积累了丰富的项目经验",
                icon: <CheckCircle className="h-8 w-8" />,
                features: ["200+成功项目", "多行业经验", "深度客户理解"]
              },
              {
                title: "持续创新",
                description: "紧跟技术发展趋势，持续创新产品和服务",
                icon: <Rocket className="h-8 w-8" />,
                features: ["技术研发投入", "产品迭代优化", "服务创新升级"]
              }
            ].map((item, index) => (
              <Card key={index} className="border-0 shadow-lg text-center">
                <CardHeader>
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
                    {item.icon}
                  </div>
                  <CardTitle>{item.title}</CardTitle>
                  <CardDescription>{item.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {item.features.map((feature, featureIndex) => (
                      <li key={featureIndex} className="text-sm text-gray-600">
                        • {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold mb-4">
            开启智能技术合作
          </h2>
          <p className="text-xl text-blue-100 mb-8">
            让我们共同打造卓越的技术解决方案
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button 
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3"
              onClick={() => navigate('/contact')}
            >
              <ArrowRight className="h-4 w-4 mr-2" />
              立即咨询
            </Button>
            <Button 
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white/10 px-8 py-3"
              onClick={() => navigate('/about')}
            >
              了解公司
            </Button>
          </div>
        </div>
      </div>

      <UserInfoModal
        isOpen={showUserModal}
        onClose={() => setShowUserModal(false)}
      />
    </div>
  );
}