<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]">Chat BI平台</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 img2 from "@/assets/images/2.jpg";
import Footer from "@components/home/Footer.vue";
import agent from "@/assets/images/agent.png";
import model from "@/assets/images/model.jpeg";
import data from "@/assets/images/data.png";

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

const items: GridItem[] = [
  {
    id: "1",
    title: "全局数据治理 (数据中台)",
    desc: "企业数据驱动的核心基础设施",
    bg: data,
  },
  {
    id: "2",
    title: "智能决策",
    desc: "利用数据驱动的方法来优化从油藏到输油管的整个生产价值链",
    bg: img2,
  },
  {
    id: "3",
    title: "行业AI大模型",
    desc: "针对油气勘探开发领域训练的垂直大模型，它将成为推动整个行业迈向智能化、自动化的核心引擎",
    bg: model,
  },
  {
    id: "4",
    title: "AI智能体 (智能交互)",
    desc: "在行业AI大模型基础上构建的、具备感知、决策、执行和交互能力的智能实体",
    bg: agent,
  },
];
</script>

<style scoped></style>
