import Link from "next/link"
import Image from "next/image"

const digitalHumans = [
  {
    id: 1,
    name: "小雅",
    avatar: "/human/0ac179c47f1957d03ccc6858e6351f1d.jpeg",
    category: "商务助手",
    description: "专业的商务顾问，擅长企业咨询、市场分析、商务谈判等场景，为您提供智能化的商业决策支持。",
    color: "from-purple-500 to-pink-500",
    bgColor: "bg-purple-50",
    textColor: "text-purple-600",
  },
  {
    id: 2,
    name: "书淇",
    avatar: "/human/166c0f9202afc463e9264529764ddb7f.jpg",
    category: "教育导师",
    description: "知识渊博的教育专家，专注于在线教学、课程辅导、学习规划，让学习更高效、更有趣。",
    color: "from-blue-500 to-cyan-500",
    bgColor: "bg-blue-50",
    textColor: "text-blue-600",
  },
  {
    id: 3,
    name: "樱桃",
    avatar: "/human/541ab483fbafcc7b5476a63dbd350fb5.jpg",
    category: "生活陪伴",
    description: "活泼可爱的虚拟伙伴，擅长日常聊天、情感陪伴、生活建议，为您的生活增添温暖与乐趣。",
    color: "from-pink-500 to-rose-500",
    bgColor: "bg-pink-50",
    textColor: "text-pink-600",
  },
  {
    id: 4,
    name: "星辰",
    avatar: "/human/8365454662deb53637146f8b81476124.png",
    category: "科技顾问",
    description: "前沿科技专家，精通AI技术、编程开发、技术咨询，助力您在数字时代保持竞争力。",
    color: "from-indigo-500 to-blue-500",
    bgColor: "bg-indigo-50",
    textColor: "text-indigo-600",
  },
  {
    id: 5,
    name: "墨竹",
    avatar: "/human/a4c1285f4d131a65821a541c1d58181a.jpg",
    category: "创意设计",
    description: "富有创意的设计师，擅长视觉设计、艺术创作、品牌策划，为您的创意项目注入灵感。",
    color: "from-green-500 to-emerald-500",
    bgColor: "bg-green-50",
    textColor: "text-green-600",
  },
  {
    id: 6,
    name: "清风",
    avatar: "/human/aa5332e4434fcf0cc8bcb9a4d8122ad0.jpeg",
    category: "健康顾问",
    description: "专业的健康管理师，提供健康咨询、饮食建议、运动指导，守护您和家人的健康生活。",
    color: "from-teal-500 to-cyan-500",
    bgColor: "bg-teal-50",
    textColor: "text-teal-600",
  },
  {
    id: 7,
    name: "小悦",
    avatar: "/human/dd709ef07f783ef0b912127191004580.jpg",
    category: "娱乐主播",
    description: "活力四射的娱乐主播，擅长直播互动、内容策划、粉丝运营，为您的娱乐生活带来无限精彩。",
    color: "from-orange-500 to-amber-500",
    bgColor: "bg-orange-50",
    textColor: "text-orange-600",
  },
  {
    id: 8,
    name: "心灵",
    avatar: "/human/decbb93c49351eae57b4f3251cab9f26.jpg",
    category: "心理咨询",
    description: "温柔专业的心理咨询师，提供情绪疏导、心理测评、压力管理，守护您的心理健康。",
    color: "from-violet-500 to-purple-500",
    bgColor: "bg-violet-50",
    textColor: "text-violet-600",
  },
]

const categories = ["全部", "商务助手", "教育导师", "生活陪伴", "科技顾问", "创意设计", "健康顾问", "娱乐主播", "心理咨询"]

export default function DigitalHumansPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <nav className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-sm">
        <div className="max-w-6xl mx-auto px-6 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">AI</span>
              </div>
              <span className="font-bold text-gray-900">冲浪智能体广场</span>
            </Link>
            <div className="flex items-center gap-6">
              <Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
              <Link href="/agents" className="text-gray-600 hover:text-blue-600 transition">智能体广场</Link>
              <Link href="/digital-humans" className="text-blue-600 font-medium">数字人</Link>
              <Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
              <Link
                href="/admin/login"
                className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"
              >
                登录
              </Link>
            </div>
          </div>
        </div>
      </nav>

      <main className="pt-16">
        {/* Hero 区域 */}
        <section className="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-20">
          <div className="max-w-6xl mx-auto px-6 text-center">
            <div className="text-6xl mb-6">🧑💼</div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              数字人库
            </h1>
            <p className="text-lg text-white/90 leading-relaxed max-w-2xl mx-auto">
              探索我们的虚拟数字人角色，每个数字人都拥有独特的个性、专业技能和应用场景，
              为您的工作和生活提供智能化服务。
            </p>
          </div>
        </section>

        {/* 视频展示 */}
        <section className="py-12 bg-white border-b border-gray-200">
          <div className="max-w-4xl mx-auto px-6">
            <h2 className="text-2xl font-bold text-gray-900 text-center mb-2">数字人展示</h2>
            <p className="text-gray-500 text-center mb-8">观看我们的数字人技术演示视频</p>
            <div className="relative rounded-2xl overflow-hidden shadow-lg bg-black aspect-video">
              <video
                className="w-full h-full object-contain"
                src="/human/sample.mp4"
                controls
                playsInline
              />
            </div>
          </div>
        </section>

        {/* 分类筛选 */}
        <section className="py-8 bg-white border-b border-gray-200">
          <div className="max-w-6xl mx-auto px-6">
            <div className="flex flex-wrap gap-3 justify-center">
              {categories.map((category) => (
                <button
                  key={category}
                  className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                    category === "全部"
                      ? "bg-purple-600 text-white"
                      : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                  }`}
                >
                  {category}
                </button>
              ))}
            </div>
          </div>
        </section>

        {/* 数字人列表 */}
        <section className="py-16">
          <div className="max-w-6xl mx-auto px-6">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-12">
              {digitalHumans.map((human) => (
                <div
                  key={human.id}
                  className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:border-purple-300 hover:shadow-lg transition-all duration-300"
                >
                  {/* 图片区域 */}
                  <div className="relative aspect-[3/4] overflow-hidden">
                    <Image
                      src={human.avatar}
                      alt={human.name}
                      fill
                      className="object-contain"
                    />
                    {/* 左下角遮罩显示姓名 */}
                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                      <h3 className="text-lg font-bold text-white">{human.name}</h3>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 试用区域 */}
        <section className="py-16 bg-gradient-to-r from-purple-600 to-pink-600">
          <div className="max-w-6xl mx-auto px-6 text-center">
            <h2 className="text-3xl font-bold text-white mb-4">立即体验数字人</h2>
            <p className="text-lg text-white/90 mb-8 max-w-2xl mx-auto">
              选择您心仪的数字人角色，开启智能交互新体验
            </p>
            <a
              href="https://www.baidu.com"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block bg-white text-purple-600 font-semibold px-8 py-3 rounded-full text-lg hover:bg-purple-50 transition-colors shadow-lg"
            >
              免费试用
            </a>
          </div>
        </section>

        {/* 特性介绍 */}
        <section className="py-16 bg-white">
          <div className="max-w-6xl mx-auto px-6">
            <h2 className="text-2xl font-bold text-gray-900 text-center mb-10">为什么选择我们的数字人</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center p-6">
                <div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
                  🎭
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">逼真形象</h3>
                <p className="text-sm text-gray-500">超写实数字人形象，支持表情动画、语音交互，带来沉浸式体验</p>
              </div>
              <div className="text-center p-6">
                <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
                  🧠
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">智能交互</h3>
                <p className="text-sm text-gray-500">基于大语言模型，支持多轮对话、上下文理解、智能决策</p>
              </div>
              <div className="text-center p-6">
                <div className="w-16 h-16 bg-pink-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
                  🎯
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">场景定制</h3>
                <p className="text-sm text-gray-500">针对不同应用场景深度优化，满足商务、教育、生活等多元需求</p>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 底部 */}
      <div className="border-t border-gray-200 py-8">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-xs">AI</span>
            </div>
            <span className="font-semibold text-gray-700 text-sm">江苏冲浪软件科技有限公司</span>
          </div>
          <div className="text-gray-400 text-sm text-center">
            © 2026 江苏冲浪软件科技有限公司 · AI 智能体广场
          </div>
          <div className="flex gap-4 text-xs text-gray-400">
            <a className="hover:text-gray-600 cursor-pointer transition">关于我们</a>
            <a className="hover:text-gray-600 cursor-pointer transition">隐私政策</a>
            <a className="hover:text-gray-600 cursor-pointer transition">联系我们</a>
          </div>
        </div>
      </div>
    </div>
  )
}