<template>
  <!-- 为什么选择 Inkreach - Figma 1458:1492 -->
  <view class="why-section">
    <!-- 区块标题 - 20px Heavy #1A1A1A 居中 -->
    <text class="section-title">为什么选择Inkrecah？</text>

    <!-- 2x2 网格 - 180x80 卡片 -->
    <view class="why-grid">
      <view class="why-card" v-for="(item, index) in reasons" :key="index">
        <image class="why-icon" :src="item.icon" mode="aspectFit"></image>
        <text class="why-title">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WhyChoose',
  props: {
    reasons: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
/* 区块 - 灰色背景 #F8F8F8 */
.why-section {
  width: 100%;
  padding: 96rpx 0 80rpx 0;
  background: #f8f8f8;
  box-sizing: border-box;
}

/* 区块标题 - 20px Heavy #1A1A1A 居中 */
.section-title {
  display: block;
  text-align: center;
  font-size: 40rpx;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.45;
  margin-bottom: 64rpx;
}

/* 2x2 网格 - 固定2列(345rpx×2 + 间距20rpx + 容器内边距40rpx = 750rpx)
   注意：不要用 flex-basis + calc(50%)，部分手机浏览器解析失败会导致单列 */
.why-grid {
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.why-card {
  width: 345rpx;
  min-width: 0;
  height: 160rpx;
  background: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
/* 图标 26x26 */
.why-icon {
  width: 52rpx;
  height: 52rpx;
  flex-shrink: 0;
}
/* 标题 - 16px Bold #000000 */
.why-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
}
</style>
