"use client";
import dynamic from "next/dynamic";
import { motion } from "framer-motion";
import { Cpu, CircuitBoard, Sparkles, Atom, Waves, Camera, Brain } from "lucide-react";
import Link from "next/link";
import clsx from "clsx";

const Scene = dynamic(() => import("@/components/Scene"), { ssr: false });

// 已移除浮动花哨徽章组件，保留简洁风格

const moduleLinks = [
  { title: "力学实验模块", href: "#mechanics", icon: Waves, desc: "单摆精密测量 / 大摆角与阻尼修正 / 傅科摆进动 / 多参数智能拟合" },
  { title: "电路实验模块", href: "#circuit", icon: CircuitBoard, desc: "YOLO 电路识别 → 拓扑重建 → 虚拟仿真 → AI 智能辅导闭环" },
  { title: "电磁学实验模块", href: "#electromag", icon: Atom, desc: "气垫导轨 + 视觉测量 + 后续 BO/RL 迭代优化电磁能量转换效率" },
  { title: "光学实验模块", href: "#optics", icon: Camera, desc: "分光计视觉十字像追踪 + 步骤引导提升调节精度与效率" },
];

export default function Home() {
  return (
  <main className="relative w-full h-full text-slate-100 overflow-x-hidden">
      {/* 3D Background */}
  <Scene />

      {/* Hero Section */}
      <section className="snap-section min-h-screen relative flex flex-col items-center justify-center px-6 pt-24 text-center">
        <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_40%_30%,rgba(59,130,246,0.25),transparent_65%)]" />
        <motion.h1
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
          className="text-5xl md:text-7xl font-bold leading-tight gradient-text drop-shadow-lg tracking-tight"
        >
          AI视觉驱动的智慧物理实验创新平台
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.3 }}
          className="mt-8 max-w-3xl mx-auto text-lg md:text-xl leading-relaxed text-slate-300"
        >
          “AI + CV”双引擎，重构数据采集、分析、交互与反馈全链路。摆球轨迹追踪、智能电路识别、Web端轻量化、跨平台实时推理，让物理实验进入沉浸式智能时代。
        </motion.p>
        <motion.div
          initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.45 }}
            className="mt-10 flex flex-wrap items-center justify-center gap-4"
        >
          <Link href="/expo" className="group relative">
            <span className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-sky-600/80 to-cyan-500/70 px-6 py-3 text-sm font-semibold tracking-wide text-white shadow-lg shadow-sky-900/30 backdrop-blur-md transition hover:from-sky-500 hover:to-cyan-400 focus:outline-none focus:ring-2 focus:ring-sky-400/70">
              <Sparkles className="w-4 h-4" /> 展台同步视频演示
            </span>
            <span className="pointer-events-none absolute -inset-px rounded-full border border-sky-300/30 group-hover:border-cyan-200/40 transition" />
          </Link>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.6, type: "spring" }}
          className="mt-14 flex flex-wrap justify-center gap-6"
        >
          {moduleLinks.map((m) => (
            <Link key={m.title} href={m.href}>
              <motion.div
                whileHover={{ y: -6, boxShadow: "0 12px 40px -8px rgba(56,189,248,0.4)" }}
                whileTap={{ scale: 0.95 }}
                className={clsx(
                  "relative group rounded-xl px-6 py-5 w-64 overflow-hidden cursor-pointer transition-all card-hover",
                  "panel"
                )}
              >
                <div className="relative flex items-center gap-3">
                  <m.icon className="w-7 h-7 text-slate-200" />
                  <h3 className="font-semibold tracking-wide text-base text-slate-100">{m.title}</h3>
                </div>
                <p className="relative mt-3 text-xs leading-relaxed text-slate-400 min-h-12">{m.desc}</p>
                <div className="relative mt-4 flex items-center gap-2 text-[10px] text-slate-400">
                  <Sparkles className="w-4 h-4 text-slate-500" /> 查看详情
                </div>
              </motion.div>
            </Link>
          ))}
        </motion.div>
      </section>

      {/* Architecture Section */}
  <section id="architecture" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-20 items-start">
            <div>
              <motion.h2
                initial={{ opacity: 0, x: -40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
                className="text-3xl md:text-5xl font-bold gradient-text mb-8"
              >
                平台总体设计与核心技术架构
              </motion.h2>
              <motion.div
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.3, duration: 0.8 }}
                className="space-y-6 text-sm leading-relaxed text-slate-400"
              >
                <p className="indent-4">
                  本平台以“AI + CV”双引擎驱动：前端浏览器侧完成数据感知、实时视觉解析与轻量推理，后端/边缘协同完成大模型问答与复杂优化计算，形成数据采集—建模拟合—智能校正—反馈交互的闭环。
                </p>
                <div className="grid grid-cols-2 gap-5 pt-4">
                  {[
                    { t: "CV 感知", d: "Hough/轮廓/YOLO 追踪摆球、电路元件识别" },
                    { t: "AI 分析", d: "非线性拟合 / 符号回归 / 误差自适应校正" },
                    { t: "智能交互", d: "Agent 提示步骤 / 故障诊断 / 学习引导" },
                    { t: "可视化", d: "WebGL & 交互式参数变化动态渲染" },
                  ].map((b) => (
                    <div key={b.t} className="relative p-4 rounded-lg panel card-hover">
                      <h4 className="text-sm font-semibold mb-1 text-slate-200">{b.t}</h4>
                      <p className="text-xs text-slate-500 leading-snug">{b.d}</p>
                      <span className="absolute -top-px -left-px h-2 w-2 bg-gradient-to-br from-sky-400 to-fuchsia-500 rounded-full shadow" />
                    </div>
                  ))}
                </div>
              </motion.div>
            </div>
            <div className="relative">
              <div className="relative panel rounded-2xl p-10 space-y-8 card-hover">
                <h3 className="text-xl font-semibold flex items-center gap-3 text-slate-100"><Sparkles className="text-sky-400" />“AI + CV”双引擎协同</h3>
                <ul className="space-y-4 text-xs leading-relaxed text-slate-400">
                  <li>CV 模块：图像序列 → 轨迹/姿态/拓扑；YOLO + 自定义滤波器优化稳定性。</li>
                  <li>AI 模块：特征→参数拟合→误差补偿→智能讲解；支持本地与云端混合推理。</li>
                  <li>数据管线：WebAssembly/OpenCV.js 实时帧处理；TensorFlow.js / WebGPU 加速。</li>
                  <li>交互体验：自然语言问答、实验步骤导航、异常检测提醒。</li>
                  <li>部署形态：纯 Web / 微信小程序 / 边缘一体盒子可拓展。</li>
                </ul>
                <div className="grid grid-cols-3 gap-4 pt-2 text-center text-[10px] font-mono">
                  {['Capture','Track','Fit','Correct','Explain','Feedback'].map(s => (
                    <div key={s} className="p-2 rounded-md bg-[#18202b] border border-[#223042]">
                      <span className="text-[10px] text-slate-300 font-semibold tracking-wide">{s}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Module Overview Section */}
  <section id="modules" className="snap-section relative py-24 px-6 md:px-16">
        <div className="max-w-7xl mx-auto">
          <motion.h2
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-3xl md:text-5xl font-bold gradient-text mb-14 text-center"
          >
            四大实验模块 & 未来拓展
          </motion.h2>
          <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-10">
            {moduleLinks.map((m) => (
              <Link key={m.title} href={m.href} className="group block relative">
                <div className="relative rounded-xl panel p-6 h-full flex flex-col overflow-hidden card-hover">
                  <div className="flex items-center gap-3">
                    <m.icon className="w-6 h-6 text-slate-200" />
                    <h3 className="font-semibold text-sm tracking-wide text-slate-100">{m.title}</h3>
                  </div>
                  <p className="mt-3 text-[11px] leading-relaxed text-slate-500 flex-1">{m.desc}</p>
                  <div className="mt-4 text-[10px] tracking-wider text-slate-500 flex items-center gap-2">
                    <Sparkles className="w-4 h-4 text-slate-600" /> 内部锚点
                  </div>
                </div>
              </Link>
            ))}
          </div>
          <div className="mt-20 grid md:grid-cols-3 gap-8">
            {[
              { icon: Waves, t: '统一“AI + CV”技术底座', d: '共享采集 → 追踪 → 拟合 → 校正 → 交互流水线，跨力学 / 电学 / 电磁 / 光学复用。' },
              { icon: Camera, t: '纯 Web 端实时推理', d: '浏览器即可完成摄像采集 + OpenCV.js 处理 + 轻量模型推理，无需本地安装。' },
              { icon: Brain, t: '智能实验助手', d: '误差分析、参数解释、探索性提问引导，支持未来符号回归自动方程发现。' },
            ].map(card => (
              <div key={card.t} className="relative rounded-xl panel p-6 overflow-hidden card-hover">
                <card.icon className="w-8 h-8 text-slate-300 mb-4" />
                <h4 className="font-semibold text-sm mb-2 text-slate-200">{card.t}</h4>
                <p className="text-[11px] leading-relaxed text-slate-500">{card.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mechanics Module Detail */}
      <section id="mechanics" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-6xl mx-auto space-y-10">
          <h2 className="text-3xl md:text-4xl font-bold gradient-text">力学实验模块 · 单摆 & 傅科摆</h2>
          <div className="grid lg:grid-cols-3 gap-10">
            <div className="lg:col-span-2 space-y-8">
              <div className="space-y-4 text-sm text-slate-400 leading-relaxed">
                <p>聚焦单摆高精度测量与扩展（大摆角修正 / 阻尼 / 品质因数 / 进动现象），实现从 <span className="text-slate-200">“验证型”</span> 向 <span className="text-slate-200">“探究型 + 参数发现”</span> 转化。</p>
                <ul className="list-disc pl-5 space-y-2">
                  <li><span className="text-slate-200">基础模型：</span> 小角近似  → 解析周期 ；</li>
                  <li><span className="text-slate-200">大摆角修正：</span> 椭圆积分展开（振幅  时周期 +1.7%；时 +3.7%）；</li>
                  <li><span className="text-slate-200">空气阻尼：</span> 线性阻尼模型  ，对振幅指数衰减拟合获取 γ & Q；</li>
                  <li><span className="text-slate-200">进动效应：</span> 初步观测傅科摆水平轨迹椭圆长轴缓慢进动，实验相对理论偏差 ≈1.9%。</li>
                </ul>
                <p className="text-slate-300">AI 数据处理流水线：</p>
                <ol className="list-decimal pl-5 space-y-1 text-xs md:text-sm">
                  <li>CV 追踪：HSV 阈值 + 轮廓 + 质心 → 轨迹 (30–240fps)</li>
                  <li>降噪：LSTM / 滤波平滑缺失帧</li>
                  <li>非线性拟合：阻尼简谐 + 大摆角修正同步反演 (A, γ, ω<sub>d</sub>, φ)</li>
                  <li>系统误差校正：大摆角 / 阻尼 / 像素标定统一补偿</li>
                  <li>结果生成：g、γ、Q、误差拆解与置信区间</li>
                </ol>
              </div>
              <div className="grid md:grid-cols-3 gap-4 text-[11px]">
                {[
                  { k: 'g 相对误差', v: '0.43%' },
                  { k: 'Q 典型值', v: '≈ 900+' },
                  { k: '进动偏差', v: '≈ 1.9%' },
                  { k: 'FPS 需求', v: '≥ 60 fps' },
                  { k: '拟合优度 R²', v: '≈ 1.0000' },
                  { k: 'γ 精度', v: '1e-4 s⁻¹ 级' },
                ].map(x => (
                  <div key={x.k} className="panel p-3 rounded-lg flex flex-col">
                    <span className="text-slate-500">{x.k}</span>
                    <span className="text-slate-200 font-semibold text-sm">{x.v}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="space-y-6 text-xs md:text-sm text-slate-500">
              <h3 className="text-slate-200 font-semibold">误差来源 & 缓解</h3>
              <ul className="list-disc pl-5 space-y-2">
                <li>摆长测量主导：像素-长度标定引入 &gt;50% 误差份额 → 透视校正 + 直尺仰拍。</li>
                <li>大摆角不修正： 可致 g 低估 ~0.5% → 自动角幅检测触发修正。</li>
                <li>阻尼 γ 不确定度：衰减峰值回归 + 多周期平均抑制噪声。</li>
                <li>时间戳漂移：基于浏览器高精度计时 + 丢帧插值。</li>
              </ul>
              <h3 className="text-slate-200 font-semibold pt-4">拓展实验</h3>
              <p>自由落体 / 斜抛 / 弹簧振子共用“轨迹 → 拟合”管线；增加加速度二阶差分平滑与物理约束回填。</p>
            </div>
          </div>
        </div>
      </section>

      {/* Circuit Module Detail */}
      <section id="circuit" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-6xl mx-auto space-y-10">
          <h2 className="text-3xl md:text-4xl font-bold gradient-text">电路实验模块 · 实物 → 虚拟 智能桥接</h2>
          <div className="grid lg:grid-cols-3 gap-10">
            <div className="lg:col-span-2 space-y-6 text-sm text-slate-400">
              <p>面向电路搭建“高错误率 / 低直观 / 教学成本高”痛点，平台构建 <span className="text-slate-200">拍照识别 → 拓扑生成 → 虚拟仿真 → AI 辅导 → 诊断优化</span> 闭环。</p>
              <h3 className="text-slate-200 font-semibold">识别与转换流程</h3>
              <ol className="list-decimal pl-5 space-y-1 text-xs md:text-sm">
                <li>上传实物俯视图：对比度增强 / 去噪预处理</li>
                <li>YOLO 模型：元件类别 + 位置检测 (置信度 &gt; 90%)</li>
                <li>导线解析：颜色分割 + 形态学 + 拓扑推断</li>
                <li>结构化导出：JSON(元件, 参数, 连接) → 虚拟场景重建</li>
                <li>序列化 / 反序列化：支持再编辑 & 教学复用</li>
              </ol>
              <h3 className="text-slate-200 font-semibold pt-2">AI 实验助手 (Agent)</h3>
              <ul className="list-disc pl-5 space-y-1 text-xs md:text-sm">
                <li>电路原理答疑：上下文相关自然语言解析</li>
                <li>故障排查：短路 / 断路 / 量程错误定位 (准确率 &gt;85%)</li>
                <li>个性化引导：分层次提问 + 练习建议</li>
                <li>策略建议：参数调优与替代元件推荐</li>
              </ul>
              <h3 className="text-slate-200 font-semibold pt-2">功能改造亮点</h3>
              <p>重构虚拟电表架构：统一量程 / 内阻抽象，支持序列化与自定义显示函数，适配直流电桥 / 复杂测量场景。</p>
            </div>
            <div className="space-y-6 text-xs md:text-sm text-slate-500">
              <h4 className="text-slate-200 font-semibold">价值提升</h4>
              <ul className="list-disc pl-5 space-y-2">
                <li>从“手工搭建”延伸到“智能反馈 + 虚实双轨”体验</li>
                <li>降低误接线风险，减少元件损耗</li>
                <li>学习路径个性化：错误模式 → 策略建议</li>
              </ul>
              <h4 className="text-slate-200 font-semibold pt-4">核心数据面板</h4>
              <div className="grid grid-cols-2 gap-3 text-[11px]">
                {[
                  { k: '识别置信度', v: '>90%' },
                  { k: '故障诊断', v: '>85%' },
                  { k: '转换延迟', v: '< 3 s' },
                  { k: '数据格式', v: 'JSON 标准化' },
                ].map(x => (
                  <div key={x.k} className="panel p-3 rounded-lg"><p className="text-slate-500">{x.k}</p><p className="text-slate-200 font-semibold">{x.v}</p></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Electromagnetics Module Detail */}
      <section id="electromag" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-6xl mx-auto space-y-10">
          <h2 className="text-3xl md:text-4xl font-bold gradient-text">电磁学实验模块 · 电磁能量转换优化</h2>
          <div className="grid lg:grid-cols-3 gap-10">
            <div className="lg:col-span-2 space-y-6 text-sm text-slate-400">
              <p>围绕气垫导轨低摩擦环境 + 永磁体滑块 + 线圈 + 可编程电源构建“视觉测量 + 参数智能优化”平台，实现 <span className="text-slate-200">加速 / 制动能量转换效率</span> 最大化。</p>
              <h3 className="text-slate-200 font-semibold">视觉 & 数据采集</h3>
              <ul className="list-disc pl-5 space-y-1 text-xs md:text-sm">
                <li>荧光标签 + HSV 阈值 + 轮廓提取 → 位移序列</li>
                <li>差分计算速度 / 加速度，功率曲线与感应电压时间同步</li>
                <li>亚像素插值提升定位至 0.1 px</li>
              </ul>
              <h3 className="text-slate-200 font-semibold pt-2">优化算法闭环</h3>
              <ol className="list-decimal pl-5 space-y-1 text-xs md:text-sm">
                <li>参数向量：提前量 Δt，脉冲宽度 τ，强度 U/I</li>
                <li>安全约束：V / I / dI/dt / 线圈温度限幅</li>
                <li>奖励函数：加速 → v<sub>out</sub>/能耗；制动 → 回收能量/距离</li>
                <li>冷启动：均匀采样 5–8 组 → 贝叶斯优化拟合响应面</li>
                <li>迭代 30–50 次收敛至最优策略</li>
              </ol>
              <h3 className="text-slate-200 font-semibold pt-2">实验价值</h3>
              <p>将传统“经验调参”转化为 <span className="text-slate-200">数据驱动小样本优化</span>；可扩展到多线圈同步控制与能量回收策略研究。</p>
            </div>
            <div className="space-y-6 text-xs md:text-sm text-slate-500">
              <h4 className="text-slate-200 font-semibold">主要误差控制</h4>
              <ul className="list-disc pl-5 space-y-2">
                <li>动态模糊：提升快门 / 降低曝光，结合运动补偿滤波</li>
                <li>时间量化：60 fps → 插值校正 16.67ms 间隔偏差</li>
                <li>探索噪声：RL 初期随机性通过收敛监测抑制</li>
              </ul>
              <div className="grid grid-cols-2 gap-3 text-[11px] pt-2">
                {[
                  { k: '像素精度', v: '0.1 px' },
                  { k: '收敛迭代', v: '≤ 50' },
                  { k: '参数维度', v: '3~5 可扩展' },
                  { k: '奖励形式', v: '可插拔' },
                ].map(x => (
                  <div key={x.k} className="panel p-3 rounded-lg"><p className="text-slate-500">{x.k}</p><p className="text-slate-200 font-semibold">{x.v}</p></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Optics Module Detail */}
      <section id="optics" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-6xl mx-auto space-y-10">
          <h2 className="text-3xl md:text-4xl font-bold gradient-text">光学实验模块 · 分光计智能辅助</h2>
          <div className="grid lg:grid-cols-3 gap-10">
            <div className="lg:col-span-2 space-y-6 text-sm text-slate-400">
              <p>针对分光计“调节耗时 / 精度依赖经验 / 错误代价高”痛点，引入 <span className="text-slate-200">十字像视觉追踪 + 规则/算法混合引导 + PID 精细调节</span>。</p>
              <h3 className="text-slate-200 font-semibold">系统能力</h3>
              <ul className="list-disc pl-5 space-y-1 text-xs md:text-sm">
                <li>十字像偏移检测：HSV 分割 + 卡尔曼预测补帧</li>
                <li>分步指引：载物台 → 望远镜 → 平行光管层层收敛</li>
                <li>方向纠错：若偏移增大 → 即时反向提示</li>
                <li>PID 复合：P 快速靠近 + I 消除残差 + D 减少过冲</li>
              </ul>
              <h3 className="text-slate-200 font-semibold pt-2">效果指标</h3>
              <div className="grid grid-cols-3 gap-4 text-[11px]">
                {[
                  { k: '光轴垂直度误差', v: '±1′ (改进自 ±5′)' },
                  { k: '光谱测量误差', v: '0.8% (原 3%)' },
                  { k: '调节练习次数', v: '3 次 (原 8 次)' },
                ].map(x => (
                  <div key={x.k} className="panel p-3 rounded-lg"><p className="text-slate-500">{x.k}</p><p className="text-slate-200 font-semibold">{x.v}</p></div>
                ))}
              </div>
              <p>通过“实物操作 ↔ 虚拟反馈”双通道，强化对最小偏向角 / 光路可逆性等抽象概念的可视化理解。</p>
            </div>
            <div className="space-y-6 text-xs md:text-sm text-slate-500">
              <h4 className="text-slate-200 font-semibold">算法要点</h4>
              <ul className="list-disc pl-5 space-y-2">
                <li>多源容错：反光 / 暂时遮挡 → 轨迹预测维持稳定</li>
                <li>操作建议语言模板化，降低认知负荷</li>
                <li>未来扩展：自动电机微调 + 自监督姿态估计</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Innovation Section */}
      <section id="innovation" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-6xl mx-auto space-y-10">
          <h2 className="text-3xl md:text-4xl font-bold gradient-text">创新点与特色</h2>
          <div className="grid md:grid-cols-2 gap-12 text-sm text-slate-400">
            <div className="space-y-5">
              <h3 className="text-slate-200 font-semibold">平台特色</h3>
              <ul className="list-disc pl-5 space-y-2">
                <li>统一 Web 前端栈：摄像 / 视觉 / 推理 / 可视化 一体化。</li>
                <li>模块化实验插件：力学 / 电学 / 电磁 / 光学按需加载。</li>
                <li>AI 贯穿“采集 → 分析 → 交互 → 评估”全链路。</li>
                <li>纯浏览器运行：降低硬件门槛 & 便于推广。</li>
              </ul>
              <h3 className="text-slate-200 font-semibold pt-4">技术统一性</h3>
              <p>CV 负责“看见”；AI 负责“理解 / 校正 / 解释”；Agent 负责“交互与引导”。三者协同构成可拓展物理实验智能底座。</p>
            </div>
            <div className="space-y-5">
              <h3 className="text-slate-200 font-semibold">核心创新</h3>
              <ol className="list-decimal pl-5 space-y-2">
                <li>YOLO + 物理约束拟合：替代人工计时与单一软件辅助。</li>
                <li>多参数联测：单摆拓展至 (g, γ, Q) & 大摆角修正耦合。</li>
                <li>虚实转换桥：电路识别 → 拓扑生成 → 仿真联动。</li>
                <li>小样本优化：BO / RL 迭代探索最优电磁脉冲。</li>
                <li>可扩展方程发现：预留符号回归 / 自监督接口。</li>
                <li>统一序列化：虚拟元件 / 轨迹 / 训练日志规范输出。</li>
              </ol>
              <h3 className="text-slate-200 font-semibold pt-4">拓展潜力</h3>
              <p>预期接入：衍射条纹分析、热膨胀追踪、声学驻波测量、流体可视化——形成多学科“AI 实验超集”。</p>
            </div>
          </div>
        </div>
      </section>

      {/* Outlook Section */}
      <section id="outlook" className="snap-section relative py-28 px-6 md:px-16">
        <div className="max-w-5xl mx-auto space-y-8 text-sm text-slate-400">
          <h2 className="text-3xl md:text-4xl font-bold gradient-text">总结与展望</h2>
          <p>平台验证了“AI + CV” 在物理实验 <span className="text-slate-200">高精度测量 / 多参数挖掘 / 智能交互 / 自适应优化</span> 多维价值：单摆 g 误差压至 0.43%；电路拓扑自动化；电磁脉冲小样本收敛；光学调节效率显著提升。</p>
          <ul className="list-disc pl-5 space-y-2">
            <li><span className="text-slate-200">技术深化：</span> 引入自监督特征提取、符号回归 (SINDy / AI Feynman) 自动方程发现。</li>
            <li><span className="text-slate-200">场景拓展：</span> 热学、流体、复杂耦合系统多源数据融合。</li>
            <li><span className="text-slate-200">智能调参：</span> AI 基于学习目标与实时数据主动推荐实验条件。</li>
            <li><span className="text-slate-200">教育生态：</span> 数据共享与协作分析社区，支撑探究式教学改革。</li>
          </ul>
          <p>目标：建设面向未来理工教育的 <span className="text-slate-200">“全能型 AI 实验基础设施”</span>，让每一位学生以低门槛获得科研级观测与建模能力。</p>
        </div>
      </section>

      {/* Web Deployment Section */}
  <section id="web" className="snap-section relative py-24 px-6 md:px-16">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-20 items-center">
            <div>
              <motion.h2
                initial={{ opacity: 0, x: -40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
                className="text-3xl md:text-5xl font-bold gradient-text mb-8"
              >
                Web 端轻量化与跨平台
              </motion.h2>
              <ul className="space-y-4 text-sm text-slate-300/90 leading-relaxed">
                <li>跨平台：浏览器即实验室，覆盖手机 / PC / 平板 / 小程序。</li>
                <li>本地推理：TensorFlow.js / WebGPU 使 YOLO / Transformer 部分模型可端侧运行，降低延迟。</li>
                <li>实时 CV：getUserMedia + OpenCV.js 在纯前端实现图像滤波、边缘检测、轮廓拟合与运动轨迹重建。</li>
                <li>混合架构：轻量模型前端运行，大模型问答 & 复杂优化通过 API 协同。</li>
                <li>开放拓展：支持未来热学 / 声学 / 流体等模块的即插式算法集成。</li>
              </ul>
            </div>
            <div className="relative">
              <div className="relative panel p-10 rounded-2xl card-hover">
                <h3 className="font-semibold mb-6 flex items-center gap-2 text-slate-100"><Cpu className="text-sky-400" /> 端侧计算栈</h3>
                <div className="grid grid-cols-2 gap-4 text-[11px] font-mono">
                  {[
                    'WebGL','WebGPU','WASM','OpenCV.js','TensorFlow.js','MediaPipe','YOLOv8-tiny','Edge Agent'
                  ].map(s => (
                    <div key={s} className="p-2 rounded-md bg-[#18202b] border border-[#223042] text-center text-slate-300 tracking-wide">
                      {s}
                    </div>
                  ))}
                </div>
                <div className="mt-8 relative">
                  <div className="relative h-40 w-40 mx-auto rounded-full flex items-center justify-center bg-[#18202b] border border-[#223042]">
                    <div className="text-center text-[10px] leading-relaxed text-slate-400">
                      <span className="text-slate-200 font-semibold">Edge Inference Core</span><br />
                      Capture → Track → Fit → Insight
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative py-14 text-center text-[11px] text-slate-500">
        <div className="max-w-5xl mx-auto px-6">
          <p>© {new Date().getFullYear()} AI 视觉驱动智慧物理实验平台 · 展示页 · 外链为占位符</p>
        </div>
      </footer>
    </main>
  );
}