<template>
  <div class="page">
    <!-- Hero -->
    <section class="relative overflow-hidden bg-gradient-to-br from-blue-900 via-indigo-800 to-blue-900 text-white">
      <!-- 背景装饰 -->
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-1/2 -right-1/4 w-[800px] h-[800px] rounded-full bg-blue-500/20 blur-3xl"></div>
        <div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-indigo-500/20 blur-3xl"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] rounded-full bg-cyan-500/10 blur-3xl"></div>
        <!-- 网格线 -->
        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
        <!-- 浮动光点 -->
        <div class="absolute top-20 left-20 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
        <div class="absolute top-40 right-40 w-3 h-3 rounded-full bg-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
        <div class="absolute bottom-32 left-1/3 w-2 h-2 rounded-full bg-cyan-300/40 animate-pulse" style="animation-delay: 1s"></div>
        <div class="absolute top-1/3 right-1/4 w-1.5 h-1.5 rounded-full bg-white/30 animate-pulse" style="animation-delay: 1.5s"></div>
      </div>
      <div class="relative mx-auto max-w-screen-xl px-4 py-20 md:py-28">
        <div class="grid items-center gap-10 md:grid-cols-2">
          <div>
            <div class="mb-4 flex flex-wrap gap-2">
              <a-tag color="blue" class="text-white border-white/30 bg-white/20">AI 驱动</a-tag>
              <a-tag color="cyan" class="border-cyan-300/50 bg-cyan-400/20 text-cyan-100">🏠 企业一站式管理</a-tag>
            </div>
            <h1 class="mb-4 text-3xl font-bold md:text-5xl">
              葳管家
            </h1>
            <p class="mb-6 text-lg text-white/90">
              集服务器管理、项目协作、审批、考勤、文档于一体的企业一站式管理平台。AI 智能运维、自动告警、任务协同，让企业日常管理更轻松、更高效。
            </p>
            <div class="flex flex-wrap gap-3">
              <a-button type="primary" size="large" class="bg-white text-blue-700 border-white hover:bg-white/90" @click="navigateTo('/console')">免费使用</a-button>
              <a-button ghost size="large" class="border-white text-white hover:bg-white/10" @click="navigateTo('/contact')">预约演示</a-button>
            </div>
          </div>
          <!-- 右侧：审批流程示意 -->
          <div class="relative">
            <div class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur">
              <div class="mb-3 text-sm text-white/60 font-medium">📋 待处理审批</div>
              <div v-for="item in heroApprovals" :key="item.title"
                class="mb-3 flex items-center gap-3 rounded-xl bg-white/10 px-4 py-3 last:mb-0">
                <span class="text-xl">{{ item.emoji }}</span>
                <div class="flex-1 min-w-0">
                  <div class="text-sm font-medium truncate">{{ item.title }}</div>
                  <div class="text-xs text-white/50">{{ item.from }} · {{ item.time }}</div>
                </div>
                <a-tag :color="item.color" class="text-xs flex-shrink-0">{{ item.status }}</a-tag>
              </div>
              <div class="mt-4 rounded-xl bg-blue-500/30 px-4 py-3 flex items-center gap-2">
                <span class="text-xl">🤖</span>
                <span class="text-sm text-white/90">AI 已帮您整理今日 3 条待办，优先处理报销审批</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据亮点 -->
    <section class="bg-white py-10 border-b border-gray-100">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="grid grid-cols-2 gap-6 md:grid-cols-4">
          <div v-for="stat in stats" :key="stat.label" class="text-center">
            <div class="text-3xl font-bold text-blue-600 md:text-4xl">{{ stat.value }}</div>
            <div class="mt-1 text-sm text-gray-500">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心模块 -->
    <section class="py-16 md:py-24">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">核心功能模块</h2>
          <p class="text-slate-500">覆盖企业日常运营全场景，开箱即用</p>
        </div>
        <div class="grid gap-6 md:grid-cols-3">
          <a-card v-for="f in coreModules" :key="f.title" class="h-full hover:shadow-lg transition-shadow group">
            <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-2xl group-hover:bg-blue-100 transition-colors">
              {{ f.emoji }}
            </div>
            <h3 class="mb-2 text-lg font-semibold">{{ f.title }}</h3>
            <p class="mb-4 text-slate-500 text-sm leading-relaxed">{{ f.desc }}</p>
            <div class="flex flex-wrap gap-1.5">
              <span v-for="tag in f.tags" :key="tag"
                class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs text-blue-600">{{ tag }}</span>
            </div>
          </a-card>
        </div>
      </div>
    </section>

    <!-- AI 智能化亮点 -->
    <section class="bg-gradient-to-br from-blue-50 via-indigo-50 to-white py-16 md:py-24 overflow-hidden">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="grid items-center gap-12 md:grid-cols-2">
          <!-- 左侧文字 -->
          <div>
            <div class="mb-3 flex items-center gap-2">
              <span class="text-4xl">🤖</span>
              <a-tag color="blue" class="text-sm font-medium">AI 深度集成</a-tag>
            </div>
            <h2 class="mb-4 text-2xl font-bold md:text-3xl">
              不只是管理工具<br/>更是你的智能工作助理
            </h2>
            <p class="mb-4 text-slate-600 leading-relaxed">
              系统内置 AI 大模型能力，覆盖从会议记录到报告生成的全流程，让 AI 承担繁琐的重复工作，让员工专注于真正有价值的事。
            </p>
            <p class="mb-6 text-slate-600 leading-relaxed">
              支持接入 GPT-4、Claude、DeepSeek 等主流大模型，也可对接企业私有化模型，<strong class="text-blue-600">数据不出企业，安全完全可控</strong>。
            </p>
            <div class="flex flex-wrap gap-3">
              <div v-for="tag in aiTags" :key="tag"
                class="rounded-full bg-blue-100 px-4 py-1.5 text-sm font-medium text-blue-700">
                {{ tag }}
              </div>
            </div>
          </div>
          <!-- 右侧特性卡片 -->
          <div class="grid gap-4 grid-cols-2">
            <div v-for="item in aiFeatures" :key="item.title"
              class="rounded-2xl border border-blue-100 bg-white p-5 shadow-sm hover:shadow-md transition-shadow">
              <div class="mb-3 text-2xl">{{ item.emoji }}</div>
              <h4 class="mb-1 font-semibold text-slate-800">{{ item.title }}</h4>
              <p class="text-xs text-slate-500 leading-relaxed">{{ item.desc }}</p>
            </div>
            <!-- 底部 banner -->
            <div class="col-span-2 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 p-5 text-white flex items-center justify-between">
              <div>
                <div class="font-bold text-lg">接入企业专属 AI 大模型</div>
                <div class="text-sm text-white/80 mt-1">私有化部署，数据安全，完全可控</div>
              </div>
              <span class="text-4xl">🔐</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 应用场景 -->
    <section class="py-16 md:py-24">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">适用场景</h2>
          <p class="text-slate-500">各类型企业团队的协同效率解决方案</p>
        </div>
        <div class="grid gap-6 md:grid-cols-4">
          <div v-for="s in scenarios" :key="s.title" class="rounded-xl bg-white border border-gray-100 p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
            <div class="mb-4 text-3xl">{{ s.emoji }}</div>
            <h3 class="mb-2 font-semibold">{{ s.title }}</h3>
            <p class="text-sm text-slate-500 leading-relaxed">{{ s.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 套餐 -->
    <section class="bg-slate-50 py-16 md:py-24">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-2xl font-bold md:text-3xl">套餐与价格</h2>
          <p class="text-slate-500">按人数计费，按需选择，随时升级</p>
        </div>
        <div class="grid gap-6 md:grid-cols-3">
          <a-card v-for="p in plans" :key="p.name" class="relative h-full">
            <div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
              <a-tag color="blue">推荐</a-tag>
            </div>
            <div class="mb-4 text-center">
              <h3 class="text-lg font-semibold">{{ p.name }}</h3>
              <div class="mt-2 text-3xl font-bold text-blue-600">{{ p.price }}</div>
              <div class="text-sm text-slate-400">{{ p.period }}</div>
            </div>
            <a-divider />
            <ul class="space-y-3">
              <li v-for="feat in p.features" :key="feat" class="flex items-start gap-2">
                <CheckOutlined class="mt-0.5 text-green-500 flex-shrink-0" />
                <span class="text-sm text-slate-600">{{ feat }}</span>
              </li>
            </ul>
            <a-button :type="p.recommended ? 'primary' : 'default'" block class="mt-6" @click="navigateTo('/contact')">
              立即咨询
            </a-button>
          </a-card>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="bg-gradient-to-r from-blue-600 to-indigo-600 py-16 text-white">
      <div class="mx-auto max-w-screen-xl px-4 text-center">
        <h2 class="mb-4 text-2xl font-bold md:text-3xl">准备好提升团队效率了吗？</h2>
        <p class="mb-6 text-white/90">现在联系我们，获取专属方案和 14 天免费试用账号</p>
        <div class="flex justify-center gap-3">
          <a-button type="primary" size="large" ghost @click="navigateTo('/contact')">预约演示</a-button>
          <a-button size="large" class="bg-white text-blue-700 border-white hover:bg-white/90" @click="navigateTo('/contact')">立即咨询</a-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { CheckOutlined } from '@ant-design/icons-vue'

useHead({ title: '葳管家 - 企业一站式管理平台 · 葳溯科技' })
definePageMeta({ layout: 'default' })

// Hero 审批示意数据
const heroApprovals = [
  { emoji: '💰', title: '差旅费报销申请 ¥3,200', from: '张三', time: '10分钟前', status: '待审批', color: 'orange' },
  { emoji: '📅', title: '年假申请 3天', from: '李四', time: '1小时前', status: '审批中', color: 'blue' },
  { emoji: '📦', title: '办公设备采购申请', from: '王五', time: '昨天', status: '已通过', color: 'green' },
]

// 数据亮点
const stats = [
  { value: '80%', label: '审批效率提升' },
  { value: '3x', label: '团队协作速度' },
  { value: '60%', label: '会议时长缩短' },
  { value: '99.9%', label: '系统可用率' },
]

// AI 标签
const aiTags = ['AI 会议纪要', '智能周报', '自动任务拆解', '语义搜索', '流程自动化']

// AI 特性
const aiFeatures = [
  { emoji: '🎙️', title: 'AI 会议助理', desc: '自动录音转写，提炼决议和待办事项，会后即时同步给全员' },
  { emoji: '📝', title: 'AI 周报生成', desc: '根据本周任务完成情况，一键生成图文并茂的个人周报' },
  { emoji: '🔍', title: '智能语义搜索', desc: '全局跨模块搜索，理解意图而非仅匹配关键词' },
  { emoji: '⚡', title: '流程自动化', desc: '条件触发自动执行，申请提交→通知→审批→归档一键完成' },
]

// 核心模块
const coreModules = [
  {
    emoji: '🖥️',
    title: '服务器管理',
    desc: '统一纳管企业服务器与云主机，实时监控 CPU/内存/磁盘，AI 自动巡检告警，一键远程运维，再也不担心半夜宕机。',
    tags: ['实时监控', 'AI 告警', '远程运维', '多云接入'],
  },
  {
    emoji: '📋',
    title: '项目管理',
    desc: '看板 / 甘特 / 列表三视图自由切换。AI 智能拆解目标、预测工期风险、自动分配任务给合适成员。',
    tags: ['看板视图', '甘特图', 'AI 拆解', '里程碑'],
  },
  {
    emoji: '✅',
    title: '智能审批流',
    desc: '可视化流程设计器，支持条件分支、多级审批、代理审批。AI 自动识别异常单据并高亮提醒，一键查看审批历史。',
    tags: ['多级审批', '条件分支', '移动端', 'AI 风控'],
  },
  {
    emoji: '⏰',
    title: '考勤打卡',
    desc: '支持 GPS 定位、Wi-Fi 围栏、人脸识别多种打卡方式。自动生成月度考勤报表，异常记录一目了然。',
    tags: ['GPS 定位', 'Wi-Fi 围栏', '人脸识别', '报表导出'],
  },
  {
    emoji: '📁',
    title: '云端文档协作',
    desc: '多人实时共编，支持富文本、表格、思维导图。AI 一键生成摘要、会议纪要、周报，历史版本随时回溯。',
    tags: ['实时协作', 'AI 摘要', '版本管理', '权限控制'],
  },
  {
    emoji: '📊',
    title: '数据报表中心',
    desc: '拖拽搭建自定义仪表盘，关键经营指标实时可视化。支持 AI 问答式数据分析，用自然语言查询业务数据。',
    tags: ['自定义看板', 'AI 问答', '实时数据', '多维分析'],
  },
]

// 应用场景
const scenarios = [
  { emoji: '🏢', title: '中小企业', desc: '快速部署，低成本实现数字化办公，告别 Excel + 微信群的混乱管理' },
  { emoji: '🏭', title: '制造业', desc: '生产排班、设备报修、质量追溯、供应链协同全流程数字化' },
  { emoji: '🏥', title: '医疗机构', desc: '人员排班、科室协作、物资申请，合规审批留痕，满足监管要求' },
  { emoji: '🏫', title: '教育机构', desc: '教职工考勤、学生管理、课程排期、家校沟通一体化' },
  { emoji: '🛒', title: '零售连锁', desc: '门店考勤、货品盘点、促销审批、区域协同统一管控' },
  { emoji: '💼', title: '咨询服务', desc: '项目进度追踪、客户文档协作、工时统计、账单管理' },
  { emoji: '🏗️', title: '工程建筑', desc: '现场打卡定位、施工日志、材料采购审批、安全巡检记录' },
  { emoji: '🚀', title: '互联网团队', desc: '敏捷开发看板、跨部门协同、OKR 追踪、研发效能数据分析' },
]

// 套餐
const plans = [
  {
    name: '基础版',
    price: '¥0',
    period: '永久免费',
    recommended: false,
    features: ['10 人以内团队', '核心审批 & 考勤', '5GB 云端存储', '基础任务管理', '社区技术支持'],
  },
  {
    name: '专业版',
    price: '¥599',
    period: '/月（50人）',
    recommended: true,
    features: ['50 人团队', '全模块功能解锁', '50GB 云端存储', 'AI 会议纪要 & 周报', 'API 集成接口', '专属客服支持'],
  },
  {
    name: '企业版',
    price: '¥2,999',
    period: '/月（无限人数）',
    recommended: false,
    features: ['无限人数', '私有化部署可选', '无限存储空间', '企业专属 AI 模型接入', 'SLA 99.9% 保障', '专属客户成功经理'],
  },
]
</script>

<style scoped>
.page {
  min-height: 100vh;
}
</style>
