<template>
  <div class="bg-white">
    <Header />

    <section class="max-w-[1200px] mx-auto mt-20 mb-2 px-4 text-center">
      <h2 class="text-[28px] font-bold text-[#0644a1]">DeepOil智慧经营平台</h2>
      <p class="mt-2 text-[#606266]">提供多维度、更可靠的数字化服务</p>
    </section>

    <section class="max-w-[1200px] mx-auto px-2 mb-8 mt-5">
      <div class="grid gap-5 grid-cols-1 md:grid-cols-3 xl:grid-cols-3">
        <CardItem
          v-for="card in cards"
          :key="card.key"
          :title="card.title"
          :id="card.id"
          :desc="card.desc"
          :items="card.items"
          :bg="card.bg"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import Header from "@components/home/header.vue";
import CardItem from "@components/home/CardItem.vue";
import img1 from "@/assets/images/1.jpg";
import img2 from "@/assets/images/2.jpg";
import img3 from "@/assets/images/3.jpg";
import { type Card } from "@types/cards";

const cards: Card[] = [
  {
    key: "device",
    title: "经营管理平台",
    desc: "通过设备物联，实时掌握车间动态信息",
    id: "management",
    bg: img1,
    items: [
      { label: "经营驾驶舱", tag: "新" },
      { label: "战略解码与执行" },
      { label: "财务管理(收入、成本、应收账款)" },
      { label: "技术研发管理" },
      { label: "客户管理(CRM)" },
      { label: "人力资源(EHR)" },
      { label: "供应链管理(SCM)" },
      { label: "组织资产管理" },
      { label: "风控、合规管理" },
    ],
  },
  {
    key: "scene",
    title: "生产指挥平台",
    desc: "深入工业场景，为中小企业数字化升级赋能",
    id: "command",
    bg: img2,
    items: [
      { label: "智能钻井系统", tag: "热" },
      { label: "智能压裂系统" },
      { label: "智能注气系统" },
      { label: "智能连油系统" },
      { label: "QHSE (安全监控、应急指挥)" },
      { label: "设备管理系统 (PMS)" },
      { label: "项目管理 (PM)" },
    ],
  },
  {
    key: "factory",
    title: "Chat BI平台",
    desc: "工厂上云，高效协同，生产效率和产品质量提升",
    id: "chatbi",
    bg: img3,
    items: [
      { label: "全局数据治理 (数据中台)", tag: "热" },
      { label: "智能决策" },
      { label: "行业AI大模型", tag: "新" },
      { label: "AI智能体 (智能交互)", tag: "新" },
    ],
  },
];
</script>

<style scoped></style>
