<script lang="ts" setup>
import TitleDescription from "~/components/TitleDescription.vue";

const cardItems = ref([
  {
    title: "可防伪的溯源标签码",
    description: "每件商品都将生成唯一的二维码作为“身份证”标识，一物一码、无法复制、有效防伪，提升品牌效应。",
    image: "/img/product/knowledge/yfbl.png"
  },
  {
    title: "全流程精准快捷追溯",
    description: "可随时通过扫码跳转至溯源页面，对产品从生产到流通全流程信息实现数字化记录和溯源查询，买的放心，吃的安心。",
    image: "/img/product/knowledge/yfbk.png"
  },
  {
    title: "蜂产品质量安全追溯平台",
    description: "为开展蜂产品质量安全管理提供有效的监管工具，集成高清环境监控设备，完成对蜂产品从养殖到采收、加工、销售全产业链信息数字化采集和追溯查询，强化产品质量安全保障。",
    image: "/img/product/knowledge/lzt.png"
  }, {
    title: "可防伪的溯源标签码",
    description: "每件商品都将生成唯一的二维码作为“身份证”标识，一物一码、无法复制、有效防伪，提升品牌效应。",
    image: "/img/product/knowledge/dyj.png"
  },
  {
    title: "全流程精准快捷追溯",
    description: "可随时通过扫码跳转至溯源页面，对产品从生产到流通全流程信息实现数字化记录和溯源查询，买的放心，吃的安心。",
    image: "/img/product/knowledge/fqry.png"
  },
  {
    title: "蜂产品质量安全追溯平台",
    description: "为开展蜂产品质量安全管理提供有效的监管工具，集成高清环境监控设备，完成对蜂产品从养殖到采收、加工、销售全产业链信息数字化采集和追溯查询，强化产品质量安全保障。",
    image: "/img/product/knowledge/zswd.png"
  },

])
</script>
<template>

  <img alt="" class="w-max" src="/img/product/knowledge/banner.png">


  <!-- 标题描述 - 从左侧滑入 -->
  <Motion
      :in-view-options="{ once: true }"
      :initial="{ opacity: 0, x: -50 }"
      :transition="{ duration: 0.6, delay: 0.2 }"
      :while-in-view="{ opacity: 1, x: 0 }"
  >
    <TitleDescription
        description="为消费者、蜂产品生产企业或质量监管部门提供的一种蜂产品质量追溯手段，实现对蜂产品从养殖到销售全流程信息追溯，提高全产业链
        透明度，极大提升产品品牌效应和宣传力度。已在北京、新疆、湖北、广东、浙江、四川等地推广应用。"
        subtitle="SERVICE INTRODUCTION"
        title="服务简介"
    />
  </Motion>

  <!-- 卡片网格 - 交错动画 -->
  <view class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-6 px-4 md:py-16">
    <Motion
        v-for="(item, index) in cardItems"
        :key="index"
        :in-view-options="{ once: true }"
        :initial="{ 
          opacity: 0, 
          y: 50, 
          scale: 0.8,
          rotateY: -15
        }"
        :transition="{ 
          duration: 0.6, 
          delay: 0.1 * index,
          ease: 'easeOut'
        }"
        :while-hover="{
          scale: 1.05,
          rotateY: 5,
          transition: { duration: 0.3 }
        }"
        :while-in-view="{
          opacity: 1,
          y: 0,
          scale: 1,
          rotateY: 0
        }"
        class="transform-gpu"
    >
      <UPageCTA
          :description="item.description"
          :title="item.title"
          :ui="{
                  title: 'font-semibold text-lg text-primary',
              }"
          class="shadow-lg hover:shadow-2xl transition-shadow duration-300 h-full"
          reverse
      >
        <Motion
            :initial="{ scale: 0.9, opacity: 0.7 }"
            :transition="{ duration: 0.4, delay: 0.2 + 0.1 * index }"
            :while-hover="{
              scale: 1.1,
              rotate: 2,
              transition: { duration: 0.3 }
            }"
            :while-in-view="{ scale: 1, opacity: 1 }"
        >
          <img
              :src="item.image"
              alt="Illustration"
              class="w-full shadow-2xl rounded-2xl"
          >
        </Motion>
      </UPageCTA>
    </Motion>
  </view>

  <!-- 底部图片 - 从下方滑入并带有弹性效果 -->
  <Motion
      :in-view-options="{ once: true }"
      :initial="{ opacity: 0, y: 100, scale: 0.8 }"
      :transition="{ 
        duration: 0.8, 
        delay: 0.3,
        type: 'spring',
        stiffness: 100,
        damping: 15
      }"
      :while-hover="{
        scale: 1.02,
        transition: { duration: 0.3 }
      }"
      :while-in-view="{ opacity: 1, y: 0, scale: 1 }"
      class="pt-6"
  >
    <img alt="" src="/img/product/knowledge/dingzhipng.png">
  </Motion>
</template>


