<template>
  <section class="scene-section">
    <h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
    <div class="scene-list">
      <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
        <div class="scene-inner">
          <img :src="item.icon" alt="场景图标" class="scene-icon" />
          <p class="scene-name">{{ item.name }}</p>
          <p class="scene-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const sceneList = [
  {
    name: '地区政府/社区健康服务',
    desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: '医院体检中心/健康管理机构',
    desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: '企业员工健康管理',
    desc: '降低企业医疗成本，提升员工健康与生产力。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: '健康产业链供应商',
    desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: '健康管理专业培训',
    desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  }
]
</script>

<style scoped lang="less">
@import '@/styles/global.less';

.scene-section {
  text-align: center;
  background-color: @bg-color;

  .scene-title {
    font-size: @font-size-xxl;
    font-weight: @font-weight-bold;
    color: @text-color;
    .pb(60px);
    .pt(100px);
  }

  .scene-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: @space-lg;
  }

  .scene-item {
    width: 284px;
    height: 336px;
    perspective: 1000px; // 3D透视效果
    cursor: pointer;

    .scene-inner {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;
      background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
      border-radius: @border-radius-md;
      transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡

      // 初始状态
      .scene-icon {
        width: 150px;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .scene-name {
        font-size: @font-size-md;
        font-weight: @font-weight-medium;
        color: @text-color;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .scene-desc {
        font-size: @font-size-sm;
        color: @text-color-light;
        line-height: 1.4;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        margin-top: -10px; // 初始位置向上偏移
      }
    }

    // 悬停状态
    &:hover .scene-inner {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
    }

    &:hover .scene-icon {
      transform: scale(1.1);
      margin-bottom: 8px;
    }

    &:hover .scene-name {
      color: @primary-color;
      transform: translateY(5px);
    }

    &:hover .scene-desc {
      max-height: 100px;
      opacity: 1;
      transform: translateY(10px);
    }
  }
}

@media (max-width: @tablet-breakpoint) {
  .scene-item {
    width: 100%;
    max-width: 280px;
  }
}
</style>
