<script setup>
import PageHero from '../components/PageHero.vue'

const modules = [
  {
    title: '设备接入（IIoT）',
    desc: '覆盖 PLC/仪表/传感器/网关等多类型设备，支持边缘计算、离线缓存与断点续传。',
    points: ['协议适配与采集', '运行监控与告警', '远程运维与工单'],
  },
  {
    title: '工业数据治理',
    desc: '沉淀可复用的数据资产：统一资产、口径与血缘，推动“可用数据”规模化生产。',
    points: ['资产目录与标签', '数据质量与校验', '指标中心与口径管理'],
  },
  {
    title: '工业应用（低代码）',
    desc: '面向生产、质量、能源与设备运维，提供组件库与模板，快速搭建可运营应用。',
    points: ['表单/流程/看板', '权限与审计', '应用市场与复用'],
  },
  {
    title: '智能分析（AI）',
    desc: '结合工业机理与算法模型，落地质检、预测维护、异常检测与能效优化。',
    points: ['视觉质检', '预测性维护', '异常与根因分析'],
  },
]

const deliver = [
  { title: 'SaaS', desc: '开箱即用，按需订阅，快速试点与复制。' },
  { title: '私有化', desc: '数据本地化部署，适配企业安全与合规要求。' },
  { title: '混合云', desc: '核心数据本地，弹性算力上云，兼顾成本与性能。' },
]
</script>

<template>
  <div>
    <PageHero
      kicker="产品矩阵"
      title="工业互联网能力中台"
      subtitle="以工业 PaaS 为底座，叠加 IIoT 接入、数据治理、低代码应用与智能分析，形成从“连接”到“运营”的全链路能力。"
    >
      <template #actions>
        <RouterLink class="btn btn-primary" to="/contact">获取产品资料</RouterLink>
        <RouterLink class="btn btn-ghost" to="/solutions">查看方案</RouterLink>
      </template>
    </PageHero>

    <section class="section">
      <div class="container">
        <div class="sectionHead">
          <div>
            <div class="section-kicker">模块能力</div>
            <h2 class="h2">面向落地的可组合能力</h2>
            <div class="muted">每个模块都可独立交付，也可与其他模块组合，形成端到端解决方案。</div>
          </div>
        </div>

        <div class="grid grid-2 moduleGrid">
          <div v-for="m in modules" :key="m.title" class="card card-pad moduleCard">
            <div class="moduleTitle">{{ m.title }}</div>
            <div class="muted moduleDesc">{{ m.desc }}</div>
            <div class="modulePoints">
              <div v-for="p in m.points" :key="p" class="modulePoint">
                <span class="dot" aria-hidden="true"></span>
                <span>{{ p }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section--soft">
      <div class="container">
        <div class="sectionHead">
          <div>
            <div class="section-kicker">交付方式</div>
            <h2 class="h2">灵活适配企业 IT 架构</h2>
          </div>
        </div>

        <div class="grid grid-3">
          <div v-for="d in deliver" :key="d.title" class="card card-pad deliverCard">
            <div class="deliverTitle">{{ d.title }}</div>
            <div class="muted">{{ d.desc }}</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.moduleGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moduleTitle {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.moduleDesc {
  margin-top: 8px;
}

.modulePoints {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.modulePoint {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-700);
  font-weight: 600;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-600);
  box-shadow: 0 8px 14px rgba(29, 78, 216, 0.20);
}

.deliverTitle {
  font-weight: 900;
  margin-bottom: 6px;
}

@media (max-width: 960px) {
  .moduleGrid {
    grid-template-columns: 1fr;
  }
}
</style>

