<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>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from "@components/home/header.vue";
import zuanjing from "@/assets/images/zuanjing.png";
import yalie from "@/assets/images/yalie.png";
import pm from "@/assets/images/pm.png";
import pms from "@/assets/images/pms.webp";
import qhse from "@/assets/images/qhse.jpg";
import lianyou from "@/assets/images/lianyou.png";
import zhuqi from "@/assets/images/zhuqi.png";
import Footer from "@components/home/Footer.vue";

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

const items: GridItem[] = [
  {
    id: "6",
    title: "设备管理系统 (PMS)",
    desc: "将信息化了设备技术信息与现代化管理相结合，是实现研究级管理信息化的先导",
    bg: pms,
  },
  {
    id: "1",
    title: "智能钻井系统",
    desc: "基于传感器测量与计算机控制实现的无人化钻井系统",
    bg: zuanjing,
  },
  {
    id: "2",
    title: "智能压裂系统",
    desc: "通过智能化、高效化和绿色化升级，实现了压裂作业的重大突破",
    bg: yalie,
  },
  {
    id: "3",
    title: "智能注气系统",
    desc: "集成了物联网、大数据、人工智能和自动控制技术的综合性解决方案",
    bg: zhuqi,
  },
  {
    id: "4",
    title: "智能连油系统",
    desc: "集成了先进传感器、实时数据传输、井下控制工具和智能决策软件的综合性技术平台",
    bg: lianyou,
  },
  {
    id: "5",
    title: "QHSE (安全监控、应急指挥)",
    desc: "现代智能系统则构建了一个 “感、传、知、用” 的智能体",
    bg: qhse,
  },

  {
    id: "7",
    title: "项目管理 (PM)",
    desc: "供应链全流程管理，优化库存和物流效率",
    bg: pm,
  },
];
</script>

<style scoped></style>
