<template>
  <section id="product-wrap">
    <div class="container">
      <h2 class="section-title">产品中心</h2>
      <p class="section-subtitle">深耕数据安全领域，构建全方位的数据安全防护体系</p>

      <ul class="product-categories">
        <li
          v-for="(category, index) in categories"
          :key="index"
          :class="['category-item', { active: activeCategory === index }]"
          @click="changeCategory(index)"
        >
          {{ category }}
        </li>
      </ul>

      <div class="product-grid">
        <div v-for="(product, index) in products[activeCategory]" :key="index" class="product-item">
          <div class="product-icon">
            <img src="@/assets/complete.png" :alt="product.title" />
          </div>
          <div class="product-info">
            <h3>{{ product.title }}</h3>
            <p>{{ product.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const products = [
  [
    {
      title: '多端覆盖',
      description:
        '全面支持微信小程序和PC端双平台，实现多设备无缝切换，让用户随时随地享受流畅的智能购物体验。',
    },
    {
      title: '智能推荐',
      description:
        '基于深度学习算法精准分析用户浏览行为和购买偏好，个性化推送最符合需求的商品，提升购物效率。',
    },
    {
      title: '极简操作',
      description:
        '采用直观流畅的界面设计，优化购物流程至三步完成，特别适配各年龄段用户，大幅降低使用门槛。',
    },
    {
      title: '无忧售后',
      description:
        '提供7×24小时专业客服支持，承诺48小时内快速处理退换货，建立先行赔付机制保障用户权益。',
    },
  ],
  [
    {
      title: '严格审核',
      description:
        '入驻商户需提供12项资质证明，经过三部门联合审查，确保100%合法合规经营，从源头保障商品质量。',
    },
    {
      title: '信誉评级',
      description:
        '建立包含商品质量、服务响应等20个维度的动态评分系统，月度更新并向用户公示，激励商家提升服务。',
    },
    {
      title: '透明交易',
      description:
        '强制商家提供权威质检报告，订单物流信息实时同步可追溯，杜绝虚假宣传，确保交易真实可信。',
    },
    {
      title: '诚信保障',
      description:
        '设立百万保证金制度，对售假刷单等违规行为零容忍，违规商户永久列入黑名单并公示处理结果。',
    },
  ],
  [
    {
      title: '加密存储',
      description:
        '采用AES-256金融级加密算法，对敏感数据分段存储和动态脱敏，确保即使泄露也无法被识别使用。',
    },
    {
      title: '隐私合规',
      description:
        '严格遵循38项数据安全法规，建立数据全生命周期管理机制，确保用户隐私权利得到充分保护。',
    },
    {
      title: '风控系统',
      description:
        '部署基于机器学习的智能监测系统，实时识别132种网络威胁，实现毫秒级响应，防范欺诈行为。',
    },
    {
      title: '权限管控',
      description:
        '实行RBAC权限管理体系，所有数据访问需多重身份验证，操作全程留痕可审计，杜绝内部滥用。',
    },
  ],
]

const categories = ['用户便利', '商户信用', '数据安全']
const activeCategory = ref(0)
// 切换分类
const changeCategory = (index: number) => {
  activeCategory.value = index
  // 这里可以根据分类过滤产品
}
</script>

<style lang="scss" scoped>
#product-wrap {
  padding: 60px 0;
  background-color: #fff;

  .product-categories {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    list-style: none;

    .category-item {
      padding: 5px 30px 15px;
      cursor: pointer;
      font-size: 14px;
      color: #333;
      border-bottom: 2px solid #eee;
      transition: all 0.3s;

      &.active {
        color: #f5a623;
        border-color: #f5a623;
      }

      &:hover {
        color: #f5a623;
      }
    }
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    .product-item {
      border: 1px solid #eee;
      padding: 0 20px 0 10px;
      display: flex;
      align-items: center;
      border-radius: 5px;
      transition: all 0.3s;
      height: 150px;

      &:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .product-icon {
        min-width: 60px;
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
        border-radius: 50%;
        background: #f5a623;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          max-width: 25px;
          max-height: 25px;
        }
      }
      .product-info {
        margin-left: 20px;
        h3 {
          font-size: 16px;
          margin-bottom: 10px;
        }

        p {
          font-size: 14px;
          color: #666;
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
