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

    <section class="max-w-[1200px] mx-auto mt-20 mb-8 px-4">
      <div class="text-center mb-8">
        <h2 class="text-[28px] font-bold text-[#0644a1]">经营管理平台</h2>
        <p class="mt-2 text-[#606266]">通过设备物联，实时掌握车间动态信息</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div
          v-for="item in items"
          :key="item.id"
          class="group relative overflow-hidden rounded-lg bg-white shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer"
        >
          <div class="relative h-48 overflow-hidden">
            <div
              class="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-110"
              :style="{ backgroundImage: `url(${item.bg})` }"
            >
              <div
                class="absolute inset-0 bg-gradient-to-t from-[#0050b3]/40 to-[#0050b3]/10 group-hover:from-[#0050b3]/50 group-hover:to-[#0050b3]/20 transition-colors duration-300"
              ></div>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-lg font-semibold text-[#1f2d3d] mb-2">
              {{ item.title }}
            </h3>
            <p class="text-sm text-[#606266] leading-relaxed">
              {{ item.desc }}
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import Header from "@components/home/header.vue";
import img1 from "@/assets/images/1.jpg";
import img2 from "@/assets/images/2.jpg";
import ehr from "@/assets/images/ehr.png";
import crm from "@/assets/images/crm.png";
import scm from "@/assets/images/srm.png";
import money from "@/assets/images/money.png";
import caiwu from "@/assets/images/caiwu.png";
import technology from "@/assets/images/jishu.png";
import guifan from "@/assets/images/guifan.png";
import drive from "@/assets/images/drive.png";

type GridItem = {
  id: string;
  title: string;
  desc: string;
  bg: string;
};

const items: GridItem[] = [
  {
    id: "1",
    title: "经营驾驶舱",
    desc: "实时监控企业运营数据，提供全面的经营分析和决策支持",
    bg: drive,
  },
  {
    id: "2",
    title: "战略解码与执行",
    desc: "将战略目标分解为可执行的计划，确保战略落地实施",
    bg: img2,
  },
  {
    id: "3",
    title: "财务管理",
    desc: "收入、成本、应收账款等财务数据的全面管理与分析",
    bg: caiwu,
  },
  {
    id: "4",
    title: "技术研发管理",
    desc: "研发项目管理、进度跟踪、资源配置和成果管理",
    bg: technology,
  },
  {
    id: "5",
    title: "客户管理(CRM)",
    desc: "客户关系管理，提升客户满意度和业务转化率",
    bg: crm,
  },
  {
    id: "6",
    title: "人力资源(EHR)",
    desc: "员工信息管理、招聘、培训、绩效和薪酬管理",
    bg: ehr,
  },
  {
    id: "7",
    title: "供应链管理(SCM)",
    desc: "供应链全流程管理，优化库存和物流效率",
    bg: scm,
  },
  {
    id: "8",
    title: "组织资产管理",
    desc: "企业资产全生命周期管理，提升资产利用率",
    bg: money,
  },
  {
    id: "9",
    title: "风控、合规管理",
    desc: "风险识别、评估和控制，确保企业合规经营",
    bg: guifan,
  },
];
</script>

<style scoped></style>
