import {
  FolderOpen,
  Settings,
  ArrowRight,
  Sparkles,
  Target,
  Zap,
  Database,
  MessageSquare,
  GitBranch,
} from "lucide-react";
import { features, menuItems } from "../Layout/menu";
import { useNavigate } from "react-router";
import { Card } from "antd";

export default function WelcomePage() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="max-w-7xl mx-auto px-4 py-12">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium mb-6">
            <Sparkles className="w-4 h-4" />
            AI数据集准备工具
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            构建高质量
            <span className="text-blue-600"> AI数据集</span>
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
            从数据管理到知识生成，一站式解决企业AI数据处理的场景问题。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <span
              onClick={() => navigate("/data/management")}
              className="cursor-pointer rounded px-4 py-2 inline-flex items-center bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg"
            >
              <Database className="mr-2 w-4 h-4" />
              开始使用
            </span>
            <span
              onClick={() => navigate("/data/content-generation")}
              className="cursor-pointer rounded px-4 py-2 inline-flex items-center bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg"
            >
              <MessageSquare className="mr-2 w-4 h-4" />
              内容生成
            </span>
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-6 mb-16">
          {features.map((feature, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-shadow"
            >
              <div className="text-center pb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <feature.icon className="w-6 h-6 text-blue-600" />
                </div>
                <div className="text-lg">{feature.title}</div>
              </div>
              <div className="text-center">
                <p className="text-gray-600 text-sm">{feature.description}</p>
              </div>
            </Card>
          ))}
        </div>

        {/* Menu Items Grid */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
            功能模块
          </h2>
          <div className="flex flex-wrap justify-center gap-6">
            {menuItems.map((item) => (
              <Card
                key={item.id}
                onClick={() => navigate(item.children ? `/data/${item.children[0].id}`: `/data/${item.id}`)}
                className="cursor-pointer hover:shadow-lg transition-all duration-200 border-0 shadow-md relative overflow-hidden group w-full md:w-[calc(50%-12px)] lg:w-[280px]"
              >
                <div className="text-center relative">
                  <div
                    className={`w-16 h-16 ${item.color} rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-200`}
                  >
                    <item.icon className="w-8 h-8 text-white" />
                  </div>
                  <div className="flex items-center justify-center gap-2 mb-2"></div>
                  <div className="text-xl group-hover:text-blue-600 transition-colors">
                    {item.title}
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-sm group-hover:text-gray-700 transition-colors">
                    {item.description}
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
