<template>
  <div class="dashboard-page">
    <nav class="navbar">
      <div class="nav-logo">
        <div class="nav-logo-icon"><img src="/logo.png" alt="有维商学" /></div>
        有维商学
      </div>
      <div class="nav-menu">
        <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">首页</router-link>
        <router-link to="/ai" class="nav-item" :class="{ active: $route.path === '/ai' }">AI智能体</router-link>
        <div class="nav-item">学习中心</div>
        <div class="nav-item">校友社群</div>
      </div>
      <div class="nav-user">
        <button class="nav-notification">🔔</button>
        <div class="user-dropdown">
          <div class="user-avatar" @click="toggleUserMenu">{{ userStore.userInitial }}</div>
          <div class="user-menu" :class="{ active: isUserMenuOpen }">
            <div class="user-menu-header">
              <h4>{{ userStore.currentUser }}</h4>
              <p>专业版会员</p>
            </div>
            <div class="user-menu-item" @click="goToMembership">
              <span>👑</span> 会员中心
            </div>
            <div class="user-menu-item">
              <span>⚙️</span> 账户设置
            </div>
            <div class="user-menu-item danger" @click="handleLogout">
              <span>🚪</span> 退出登录
            </div>
          </div>
        </div>
      </div>
    </nav>

    <div class="dashboard-content">
      <div class="dashboard-header">
        <h1>👋 欢迎回来，{{ userStore.currentUser }}</h1>
        <p>今天是学习的好日子，继续加油！</p>
      </div>

      <!-- Tab 导航 -->
      <div class="tab-nav">
        <button
          v-for="tab in tabs"
          :key="tab.id"
          class="tab-btn"
          :class="{ active: currentTab === tab.id }"
          @click="currentTab = tab.id"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 平台概览 Tab -->
      <div v-if="currentTab === 'overview'" class="tab-content">
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon purple">🎯</div>
            <div class="stat-value">OPC赋能</div>
            <div class="stat-label">平台定位</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon green">🤖</div>
            <div class="stat-value">AI驱动</div>
            <div class="stat-label">核心价值</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon blue">👑</div>
            <div class="stat-value">会员制</div>
            <div class="stat-label">服务模式</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon orange">🚀</div>
            <div class="stat-value">2000+</div>
            <div class="stat-label">服务OPC</div>
          </div>
        </div>

        <div class="content-card">
          <h2>🏛️ 平台使命</h2>
          <p class="description">
            有维商学致力于成为OPC创业者最信赖的成长伙伴，通过教育赋能、工具加持、社群连接，助力每一位OPC实现商业梦想。
          </p>

          <div class="content-grid">
            <div class="content-item">
              <div class="content-item-icon" style="background: #ede9fe">📚</div>
              <h3>有维教育</h3>
              <p>系统化的商业课程体系</p>
              <ul>
                <li>商业模式设计</li>
                <li>产品开发方法论</li>
                <li>市场营销策略</li>
                <li>运营管理体系</li>
              </ul>
            </div>
            <div class="content-item">
              <div class="content-item-icon" style="background: #d1fae5">🤖</div>
              <h3>AI工具</h3>
              <p>智能体赋能创业全流程</p>
              <ul>
                <li>AISM智能客服</li>
                <li>商业计划书生成</li>
                <li>市场调研分析</li>
                <li>财务模型计算</li>
              </ul>
            </div>
            <div class="content-item">
              <div class="content-item-icon" style="background: #fef3c7">👥</div>
              <h3>有维校友</h3>
              <p>互助共赢的创业者社群</p>
              <ul>
                <li>校友网络连接</li>
                <li>资源精准对接</li>
                <li>线上线下活动</li>
                <li>导师一对一辅导</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 有维教育 Tab -->
      <div v-if="currentTab === 'education'" class="tab-content">
        <div class="content-card">
          <h2>📚 有维教育 · 知行合一</h2>
          <p class="description">从认知升级到实战落地，为OPC创业者提供系统化的商业教育体系</p>

          <h3 style="margin: 24px 0 16px">核心课程体系</h3>
          <div class="course-grid">
            <div
              v-for="course in courses"
              :key="course.name"
              class="course-card"
            >
              <div class="course-card-icon" :style="{ background: course.bg }">
                {{ course.icon }}
              </div>
              <h4>{{ course.name }}</h4>
              <p>{{ course.desc }}</p>
              <div class="course-meta">
                <span>⏱️ {{ course.hours }}课时</span>
                <span>👥 {{ course.students }}学员</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- AI工具 Tab -->
      <div v-if="currentTab === 'ai-tools'" class="tab-content">
        <div class="content-card">
          <h2>🤖 AI工具 · OPC的数字员工</h2>
          <p class="description">智能体矩阵赋能创业全流程，让每位OPC都拥有专属的AI助手团队</p>

          <div class="ai-grid" style="margin-top: 24px">
            <div
              v-for="ai in aiTools"
              :key="ai.name"
              class="ai-card"
              @click="openChat(ai)"
            >
              <div class="ai-card-header">
                <div class="ai-card-avatar" :style="{ background: ai.bg }">{{ ai.icon }}</div>
                <div class="ai-card-info">
                  <h3>{{ ai.name }}</h3>
                  <span class="ai-card-tag">{{ ai.tag }}</span>
                </div>
              </div>
              <p>{{ ai.desc }}</p>
              <div class="ai-card-features">
                <span v-for="feature in ai.features" :key="feature" class="ai-card-feature">{{ feature }}</span>
              </div>
              <button class="ai-card-btn">开始对话</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 有维校友 Tab -->
      <div v-if="currentTab === 'alumni'" class="tab-content">
        <div class="content-card">
          <h2>👥 有维校友 · 互助共赢的创业者社群</h2>
          <p class="description">连接2000+优质OPC创业者，共享资源、互助成长、共创价值</p>

          <div class="content-grid">
            <div
              v-for="item in alumniFeatures"
              :key="item.title"
              class="content-item"
            >
              <div class="content-item-icon" :style="{ background: item.bg }">{{ item.icon }}</div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
              <ul>
                <li v-for="feature in item.features" :key="feature">{{ feature }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 会员体系 Tab -->
      <div v-if="currentTab === 'membership'" class="tab-content">
        <div class="content-card">
          <h2>👑 会员体系</h2>
          <p class="description">选择适合您的会员方案，开启创业成长之旅</p>

          <div class="membership-grid" style="margin-top: 32px">
            <div
              v-for="plan in membershipPlans"
              :key="plan.name"
              class="membership-card"
              :class="{ recommended: plan.recommended }"
            >
              <h3>{{ plan.name }}</h3>
              <div class="price" v-html="plan.price"></div>
              <p class="desc">{{ plan.desc }}</p>
              <ul>
                <li v-for="feature in plan.features" :key="feature">{{ feature }}</li>
              </ul>
              <button class="membership-btn">{{ plan.btnText }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天模态框 -->
    <div v-if="chatModal.isOpen" class="chat-modal" @click.self="closeChat">
      <div class="chat-window">
        <div class="chat-header">
          <div class="chat-title">
            <div class="chat-avatar" :style="{ background: chatModal.bg }">{{ chatModal.icon }}</div>
            <span>{{ chatModal.name }}</span>
          </div>
          <button class="chat-close" @click="closeChat">✕</button>
        </div>
        <div class="chat-messages" ref="chatMessages">
          <div
            v-for="(msg, index) in chatModal.messages"
            :key="index"
            class="chat-message"
            :class="msg.type"
          >
            <div class="message-avatar" :style="msg.type === 'user' ? { background: 'linear-gradient(135deg, #10B981 0%, #059669 100%)' } : { background: chatModal.bg }">
              {{ msg.type === 'user' ? userStore.userInitial : chatModal.icon }}
            </div>
            <div class="message-content">{{ msg.text }}</div>
          </div>
        </div>
        <div class="chat-input-area">
          <div class="quick-buttons">
            <button
              v-for="btn in quickButtons"
              :key="btn"
              class="quick-btn"
              @click="sendQuickMessage(btn)"
            >{{ btn }}</button>
          </div>
          <div class="chat-input-wrapper">
            <textarea
              v-model="chatInput"
              class="chat-input"
              placeholder="输入您的问题..."
              rows="1"
              @keydown.enter.prevent="sendMessage"
            ></textarea>
            <button class="chat-send" @click="sendMessage">➤</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// Tab 相关
const currentTab = ref('overview')
const tabs = [
  { id: 'overview', name: '平台概览' },
  { id: 'education', name: '有维教育' },
  { id: 'ai-tools', name: 'AI工具' },
  { id: 'alumni', name: '有维校友' },
  { id: 'membership', name: '会员体系' }
]

// 用户菜单
const isUserMenuOpen = ref(false)
const toggleUserMenu = () => {
  isUserMenuOpen.value = !isUserMenuOpen.value
}

// 点击外部关闭菜单
const handleClickOutside = (e: MouseEvent) => {
  const target = e.target as HTMLElement
  if (!target.closest('.user-dropdown')) {
    isUserMenuOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

// 退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

// 跳转到会员中心
const goToMembership = () => {
  currentTab.value = 'membership'
  isUserMenuOpen.value = false
}

// 课程数据
const courses = [
  { name: '商业模式设计', icon: '📊', desc: '掌握商业画布、价值主张设计，构建可持续的商业模式', hours: 32, students: '1.2k', bg: '#EDE9FE' },
  { name: '产品开发方法论', icon: '💡', desc: '学习精益创业、MVP验证，快速打造市场认可的产品', hours: 28, students: '980', bg: '#D1FAE5' },
  { name: '市场营销策略', icon: '📣', desc: '数字营销、内容运营、增长黑客，全渠道获客方法论', hours: 36, students: '1.5k', bg: '#DBEAFE' },
  { name: '运营管理体系', icon: '⚙️', desc: '团队搭建、流程优化、数据驱动，提升运营效率', hours: 24, students: '860', bg: '#FEF3C7' }
]

// AI 工具数据
const aiTools = [
  { name: 'AISM平台智能客服', icon: '🎯', tag: '客户服务', desc: '7×24小时在线服务，解答平台使用问题，提供智能化客户支持', features: ['即时响应', '多轮对话', '问题分流'], bg: '#EDE9FE' },
  { name: '会议纪要助手', icon: '📝', tag: '效率工具', desc: '自动记录会议内容，智能生成结构化纪要，提取行动项和决议', features: ['语音转文字', '重点提取', '任务分配'], bg: '#D1FAE5' },
  { name: 'Deepseek问答助手', icon: '🧠', tag: '知识问答', desc: '基于深度学习的智能问答系统，为您解答各类商业和技术问题', features: ['深度理解', '精准回答', '知识丰富'], bg: '#DBEAFE' },
  { name: '行政助手', icon: '📋', tag: '日常办公', desc: '处理日常行政事务，日程安排、文档整理、提醒通知等', features: ['日程管理', '文档处理', '智能提醒'], bg: '#FEF3C7' },
  { name: '战略目标分析师', icon: '📈', tag: '战略咨询', desc: '帮助制定和分解战略目标，SWOT分析，竞品研究，市场洞察', features: ['目标分解', 'SWOT分析', '竞品研究'], bg: '#FCE7F3' },
  { name: '商业计划书生成器', icon: '📄', tag: '创业工具', desc: '快速生成专业商业计划书，包含市场分析、财务预测等完整内容', features: ['模板丰富', '数据分析', '一键导出'], bg: '#E0E7FF' }
]

// 校友特色
const alumniFeatures = [
  { icon: '🌐', title: '校友网络', desc: '2000+精准人脉，拓展商业机会', features: ['行业分类精准', '地域覆盖广泛', '资源互补对接'], bg: '#EDE9FE' },
  { icon: '🤝', title: '资源对接', desc: '供需匹配，合作共赢', features: ['项目合作', '渠道对接', '投融资机会'], bg: '#D1FAE5' },
  { icon: '🎉', title: '专属活动', desc: '100+月度活动，学习社交两不误', features: ['行业沙龙', '创业大赛', '年度峰会'], bg: '#FEF3C7' },
  { icon: '❓', title: '互助问答', desc: '经验分享，问题互助', features: ['实战经验分享', '难题集体攻克', '案例复盘学习'], bg: '#DBEAFE' },
  { icon: '👨‍🏫', title: '导师辅导', desc: '资深导师一对一指导', features: ['行业专家', '成功创业者', '投资人导师'], bg: '#FCE7F3' },
  { icon: '🏅', title: '校友认证', desc: '专属身份标识，信任背书', features: ['官方认证标识', '信用体系', '优先权益'], bg: '#E0E7FF' }
]

// 会员方案
const membershipPlans = [
  {
    name: '基础版',
    price: '免费',
    desc: '适合初步了解平台的新用户',
    features: ['基础课程试看', 'AI智能体体验（每日3次）', '校友社群浏览', '平台基础功能'],
    btnText: '立即体验',
    recommended: false
  },
  {
    name: '专业版',
    price: '¥999<span>/年</span>',
    desc: '适合成长期的OPC创业者',
    features: ['全部课程无限学习', 'AI智能体无限使用', '校友社群全功能', '月度线上活动', '专属学习群', '导师答疑（每月2次）'],
    btnText: '立即订阅',
    recommended: true
  },
  {
    name: '企业版',
    price: '¥2999<span>/年</span>',
    desc: '适合规模化发展的OPC团队',
    features: ['包含专业版全部权益', '团队账号（最多5人）', '线下活动优先参与', '一对一导师辅导', '专属客户经理', '定制化培训方案'],
    btnText: '联系销售',
    recommended: false
  }
]

// 聊天模态框
const chatModal = ref({
  isOpen: false,
  name: '',
  icon: '',
  bg: '',
  messages: [] as { type: 'user' | 'bot'; text: string }[]
})

const chatInput = ref('')
const quickButtons = ['帮我写商业计划书', '分析一下市场趋势', '校友权益有哪些？', '联系客服']

const openChat = (ai: typeof aiTools[0]) => {
  chatModal.value = {
    isOpen: true,
    name: ai.name,
    icon: ai.icon,
    bg: ai.bg,
    messages: [
      { type: 'bot', text: `您好！我是${ai.name}，很高兴为您服务。请问有什么可以帮助您的吗？` }
    ]
  }
}

const closeChat = () => {
  chatModal.value.isOpen = false
}

const sendMessage = () => {
  const text = chatInput.value.trim()
  if (!text) return

  chatModal.value.messages.push({ type: 'user', text })
  chatInput.value = ''

  // 模拟 AI 回复
  setTimeout(() => {
    const responses = [
      '感谢您的提问！让我为您详细解答这个问题...',
      '这是一个很好的问题。根据我们的服务体系...',
      '我理解您的需求。有维商学为您提供了多种解决方案...',
      '让我为您查询相关信息。稍等片刻...'
    ]
    const response = responses[Math.floor(Math.random() * responses.length)] || '感谢您的提问！'
    chatModal.value.messages.push({ type: 'bot', text: response })
    scrollToBottom()
  }, 1000)
}

const sendQuickMessage = (text: string) => {
  chatInput.value = text
  sendMessage()
}

const scrollToBottom = () => {
  nextTick(() => {
    const container = document.querySelector('.chat-messages')
    if (container) {
      container.scrollTop = container.scrollHeight
    }
  })
}
</script>

<style scoped>
.dashboard-page {
  background: #f8fafc;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.navbar {
  background: white;
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  flex-shrink: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}

.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-item {
  padding: 10px 20px;
  border-radius: 10px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  text-decoration: none;
}

.nav-item:hover {
  background: #f8fafc;
  color: #1e293b;
}

.nav-item.active {
  background: #4f46e5;
  color: white;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-notification {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: #f8fafc;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s;
}

.nav-notification:hover {
  background: #e2e8f0;
}

.user-dropdown {
  position: relative;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  overflow: hidden;
  z-index: 100;
  animation: scaleIn 0.2s ease;
}

.user-menu.active {
  display: block;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.user-menu-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.user-menu-header h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.user-menu-header p {
  font-size: 12px;
  color: #64748b;
}

.user-menu-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s;
  color: #1e293b;
}

.user-menu-item:hover {
  background: #f8fafc;
}

.user-menu-item.danger {
  color: #ef4444;
}

.user-menu-item.danger:hover {
  background: #fef2f2;
}

.dashboard-content {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
  width: 100%;
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #1e293b;
}

.dashboard-header p {
  color: #64748b;
}

.tab-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 16px;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.tab-btn.active {
  background: #4f46e5;
  color: white;
}

.tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}

.stat-icon.purple {
  background: #ede9fe;
}
.stat-icon.green {
  background: #d1fae5;
}
.stat-icon.blue {
  background: #dbeafe;
}
.stat-icon.orange {
  background: #fef3c7;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
}

.content-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-card h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #1e293b;
}

.content-card .description {
  color: #64748b;
  margin-bottom: 24px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.content-item {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
}

.content-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.content-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #1e293b;
}

.content-item p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
}

.content-item ul {
  list-style: none;
  padding: 0;
}

.content-item li {
  padding: 6px 0;
  color: #64748b;
  font-size: 14px;
  position: relative;
  padding-left: 16px;
}

.content-item li::before {
  content: '•';
  color: #4f46e5;
  position: absolute;
  left: 0;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.course-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.course-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.course-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #1e293b;
}

.course-card p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.course-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #64748b;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ai-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ai-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ai-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.ai-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.ai-card-info h3 {
  font-size: 16px;
  margin-bottom: 4px;
  color: #1e293b;
}

.ai-card-tag {
  font-size: 12px;
  color: #4f46e5;
  background: #ede9fe;
  padding: 4px 8px;
  border-radius: 6px;
}

.ai-card > p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.ai-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ai-card-feature {
  font-size: 12px;
  color: #64748b;
  background: white;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.ai-card-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ai-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.membership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.membership-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}

.membership-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.membership-card.recommended {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  position: relative;
}

.membership-card.recommended::before {
  content: '推荐';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #4f46e5;
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.membership-card h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #1e293b;
}

.membership-card .price {
  font-size: 36px;
  font-weight: 800;
  color: #4f46e5;
  margin-bottom: 8px;
}

.membership-card .price span {
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
}

.membership-card .desc {
  color: #64748b;
  margin-bottom: 24px;
}

.membership-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
  text-align: left;
}

.membership-card li {
  padding: 8px 0;
  color: #1e293b;
  position: relative;
  padding-left: 24px;
}

.membership-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: 700;
}

.membership-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.membership-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* 聊天模态框 */
.chat-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.chat-window {
  width: 90%;
  max-width: 600px;
  height: 80vh;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #1e293b;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.chat-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  cursor: pointer;
  font-size: 18px;
  color: #64748b;
  transition: all 0.2s;
}

.chat-close:hover {
  background: #cbd5e1;
  color: #1e293b;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-message {
  display: flex;
  gap: 12px;
  max-width: 80%;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.message-content {
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 16px;
  color: #1e293b;
  line-height: 1.5;
}

.chat-message.user .message-content {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
}

.chat-input-area {
  padding: 20px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.quick-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.quick-btn {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-btn:hover {
  border-color: #4f46e5;
  color: #4f46e5;
}

.chat-input-wrapper {
  display: flex;
  gap: 12px;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.chat-input:focus {
  border-color: #4f46e5;
}

.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .membership-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 12px 20px;
  }
  .nav-menu {
    display: none;
  }
  .dashboard-content {
    padding: 20px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .content-grid {
    grid-template-columns: 1fr;
  }
  .course-grid {
    grid-template-columns: 1fr;
  }
  .ai-grid {
    grid-template-columns: 1fr;
  }
  .tab-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .tab-btn {
    white-space: nowrap;
  }
}
</style>
