<template>
  <section class="section section--warm">
    <div class="container">
      <CommonSectionTitle title="产品进化" subtitle="从V1到V9，每一次更新都是客户反馈驱动" />
      <div class="evo-stats">
        <div class="evo-stat">
          <span class="evo-stat-num">{{ stats.iterations }}</span>
          <span class="evo-stat-label">次迭代</span>
        </div>
        <div class="evo-stat">
          <span class="evo-stat-num">{{ stats.years }}</span>
          <span class="evo-stat-label">年打磨</span>
        </div>
        <div class="evo-stat">
          <span class="evo-stat-num">{{ stats.guests }}</span>
          <span class="evo-stat-label">人次体验</span>
        </div>
      </div>
      <p class="evo-intro">2023年3月，呼籁做了一个"反常识"的决定——只做一条路线。不铺量、不贪多，把所有精力集中在打磨一个产品上。三年9次迭代，每一次版本更新背后，都有真实的客户反馈和一线体验数据。</p>
    </div>
  </section>
</template>

<script setup>
defineProps({
  stats: { type: Object, required: true }
})
</script>

<style lang="less" scoped>
.evo-stats {
  display: flex;
  justify-content: center;
  gap: @space-2xl;
  margin-bottom: @space-xl;
}

.evo-stat {
  text-align: center;
}

.evo-stat-num {
  display: inline-block;
  font-size: @font-size-3xl;
  font-weight: @font-weight-bold;
  color: @color-primary;
  line-height: @line-height-tight;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: @color-primary-lighter;
    border-radius: 2px;
  }
}

.evo-stat-label {
  display: block;
  margin-top: @space-sm;
  font-size: @font-size-sm;
  color: @color-text-muted;
  letter-spacing: 1px;
}

.evo-intro {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  font-size: @font-size-base;
  color: @color-text-secondary;
  line-height: @line-height-loose;
}
</style>
