<!-- src/views/AIWorkshop.vue -->
<template>
  <section class="ai-workshop">
    <!-- 顶部标题 -->
    <header class="hero">
      <h1>东师理想AI教学智能体</h1>
      <!-- <p>一站式 AI 能力体验中心</p> -->
    </header>

    <!-- 能力卡片 -->
    <ul class="cards">
      <li
        v-for="item in features"
        :key="item.key"
        class="card"
        @click="jump(item.key)"
      >
        <img :src="item.icon" class="icon" :alt="item.title" />
        <h2 style="margin-bottom: 10px">{{ item.title }}</h2>
        <p>{{ item.desc }}</p>
        <span class="tag">{{ item.tag }}</span>
      </li>
    </ul>

    <!-- 纯 CSS 粒子（随机位置由 JS 注入）-->
    <div class="particles">
      <i v-for="p in particles" :key="p.id" :style="p.style" />
    </div>
  </section>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const jump = (key) => {
  if (key === "math") {
    router.push("/math");
  } else if (key === "essaycn") {
    router.push("/essaycn");
  } else if (key === "essayen") {
    router.push("/essayen");
  } else if (key === "manim") {
    router.push("/manim");
  } else if (key === "ggb3d") {
    router.push("/ggb3d");
  }
};

/* 随机粒子数据 */
const particles = Array.from({ length: 50 }, (_, i) => ({
  id: i,
  style: {
    left: `${Math.random() * 100}%`,
    animationDuration: `${20 + Math.random() * 20}s`,
    animationDelay: `${Math.random() * 20}s`,
    "--tx": `${Math.random() * 60 - 30}px`,
  },
}));

/* 六个功能卡片数据 */
const features = [
  {
    key: "math",
    title: "GeoGebra助手",
    desc: "GeoGebra助手融合AI人工智能技术，教师一键即可生成精准动态的几何图形，学生即刻可视探究；依托这一智能助手，课堂演示更直观，使几何教学更高效、更生动。",
    tag: "GeoGebra",
    icon: "/src/assets/ggb.jpg",
  },
  {
    key: "essaycn",
    title: "中小学作文批阅助手",
    desc: "“中小学作文批阅助手” 是一款基于AI技术的智能批改工具，能够自动检测语法错误、优化表达逻辑，并提供个性化评分与修改建议，帮助学生快速提升写作水平，让教师批改更高效。",
    tag: "作文批阅助手",
    icon: `/src/assets/a.png`,
  },
  {
    key: "essayen",
    title: "中小学英语作文批阅助手",
    desc: "“中小学英语作文批阅助手” 是一款基于AI技术的智能批改工具，能够自动检测语法错误、优化表达逻辑，并提供个性化评分与修改建议，帮助学生快速提升写作水平，让教师批改更高效。",
    tag: "作文批阅助手",
    icon: `/src/assets/essayen.png`,
  },
  {
    key: "manim",
    title: "数学动画AI制作平台",
    desc: "“数学动画AI制作平台”，依托强大AI技术，将复杂数学概念转化为生动3D动画，将抽象公式、定理直观呈现，助力师生高效理解数学知识，提升教学趣味。",
    tag: "制作平台",
    icon: `/src/assets/manim.png`,
  },
  {
    key: "ggb3d",
    title: "几何题图形交互3D",
    desc: "“几何题图形交互3D” 打破传统二维局限，以逼真3D场景呈现几何图形。支持全方位旋转、缩放与拖动，让你从不同视角观察图形。轻松解几何难题，开启沉浸式几何学习新体验。",
    tag: "GeoGebra",
    icon: `/src/assets/ggb3d.png`,
  },
];
</script>

<style>
/* 全局变量写在最外层，避免 scoped 隔离 */
:root {
  --bg: #0f1116;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --accent: linear-gradient(135deg, #00dbde, #fc00ff);
}
</style>

<style scoped>
/* 整体布局 */
.ai-workshop {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 顶部标题 */
.hero {
  text-align: center;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  color: var(--text-muted);
}

/* 卡片网格 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 2rem 0 10vh;
  padding: 0 4vw;
  list-style: none;
  z-index: 2;
}
.card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2rem;
  cursor: pointer;
  transition: 0.3s ease;
  backdrop-filter: blur(6px);
}
.card:hover {
  transform: translateY(-8px);
  background: var(--surface-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  fill: none;
  stroke: url(#grad);
  stroke-width: 2;
}
h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
}

/* 粒子背景 */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.particles i {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: float linear infinite;
}
@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(var(--tx));
    opacity: 0;
  }
}

.icon {
  width: 260px;
  height: 260px;
  margin-bottom: 1rem;
  object-fit: contain;
}
</style>
