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

    <section
      class="relative w-full h-[30vh] md:h-[25vh] overflow-hidden mt-15 md:pb-5 pb-30"
    >
      <video
        class="absolute inset-0 w-full h-full object-cover"
        :src="bgVideo"
        autoplay
        muted
        loop
        playsinline
      ></video>
      <div class="absolute inset-0 bg-black/40"></div>
      <div
        class="relative z-10 w-full mx-auto h-full px-20 flex items-center mt-5"
      >
        <div class="text-white max-w-4xl">
          <h1 class="text-2xl md:text-4xl font-bold leading-tight">
            山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
          </h1>
          <p
            class="mt-3 md:mt-4 text-sm md:text-base text-white/90 leading-relaxed"
          >
            连接经营管理、生产指挥与数据智能，打造石油能源行业的一体化数字化平台，
            为企业提供高效协同、智能决策与可靠的数字化服务。
          </p>
          <div class="mt-4 md:mt-6 flex gap-3">
            <a
              class="bg-[#0644a1] hover:bg-[#0a53c1] text-white px-4 py-2 cursor-pointer"
              >了解平台</a
            >
            <a
              class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 cursor-pointer"
              >联系我们</a
            >
          </div>
        </div>
      </div>
    </section>

    <section
      class="max-w-[1200px] mx-auto px-2 mb-8 mt-6 flex justify-center items-center gap-3"
    >
      <p class="text-2xl">提供多维度、更可靠的数智化服务</p>
    </section>

    <section class="w-full mx-auto px-4 md:px-20 mb-8 mt-5">
      <div class="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
        <CardItem
          v-for="card in cards"
          :title="card.title"
          :id="card.id"
          :desc="card.desc"
          :items="card.items"
          :bg="card.bg"
          :bg2="cardBgs"
        />
      </div>
    </section>

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

<script setup lang="ts">
import Header from "@components/home/header.vue";
import CardItem from "@components/home/CardItem.vue";
import Footer from "@components/home/Footer.vue";
import img1 from "@/assets/images/1.jpg";
import img2 from "@/assets/images/2.jpg";
import img3 from "@/assets/images/3.jpg";
import bgVideo from "@/assets/bg.mp4";
import bg2 from "@/assets/images/e4.png";
import g1 from "@/assets/images/g1.png";

type Card = {
  name: string;
  title: string;
  desc: string;
  bg: string;
  items: Array<{ label: string; tag?: "新" | "热" }>;
  id: string;
};
const cardBgs = [bg2, g1, bg2];
const cards: Card[] = [
  {
    name: "device",
    title: "数字运营平台",
    desc: "集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支持",
    id: "management",
    bg: img1,
    items: [
      { label: "办公系统(OA)" },
      { label: "客户管理(CRM)" },
      { label: "人力资源(EHR)" },
      { label: "供应链管理(SCM)" },
      { label: "财务管理(FM)" },
      { label: "经营驾驶舱(OC)", tag: "新" },
      { label: "战略解码与执行(SDM)" },

      { label: "技术研发管理(RD)" },

      { label: "组织资产管理(AM)" },
      { label: "风控、合规管理(ECM)" },
    ],
  },
  {
    name: "scene",
    title: "智慧指挥平台",
    desc: "深入工业场景，为中小企业数字化升级赋能",
    id: "command",
    bg: img2,
    items: [
      { label: "设备管理系统 (PMS)" },
      { label: "中航北斗(ZH)" },
      { label: "智能连油系统(ICOTS)" },
      { label: "安全应急(QHSE)" },
      { label: "智能钻井系统(IDS)", tag: "热" },
      { label: "智能压裂系统(IFS)" },
      { label: "智能注气系统(IGIS)" },

      { label: "项目管理 (PM)" },
    ],
  },
  {
    name: "factory",
    title: "Chat BI平台",
    desc: "工厂上云，高效协同，生产效率和产品质量提升",
    id: "chatbi",
    bg: img3,
    items: [
      { label: "全局数据治理(DG)", tag: "热" },
      { label: "智能决策(DI)" },
      { label: "行业AI大模型(LM)", tag: "新" },
      { label: "AI智能体(Agent)", tag: "新" },
    ],
  },
];
</script>

<style scoped></style>
