<template>
  <!-- Hero 首屏 - 设计稿风格 -->
  <view class="hero">
    <!-- 顶部 Logo -->
    <view class="hero-logo">
      <text class="logo-en">inkreach</text>
      <text class="logo-cn">印美达全球</text>
    </view>

    <!-- 大标题 -->
    <view class="hero-title">
      <text class="title-main">全球POD供应链平台</text>
    </view>

    <!-- 副标题 -->
    <text class="hero-subtitle">
      连接设计、生产、订单与全球物流，助力跨境卖家快速上新、稳定履约
    </text>

    <!-- 4个指标 -->
    <view class="hero-stats">
      <view class="stat-item" v-for="(item, index) in stats" :key="index">
        <text class="stat-value">{{ item.value }}</text>
        <text class="stat-label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 地球背景图 -->
    <view class="hero-earth">
      <image
        class="earth-img"
        src="/static/images/home/Rectangle_178_1426_1248.png"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

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

<style scoped>
.hero {
  position: relative;
  width: 100%;
  padding-top: 30rpx;
  padding-bottom: 0;
  background: #ffffff;
  overflow: hidden;
}

/* Logo */
.hero-logo {
  display: flex;
  align-items: baseline;
  padding: 0 32rpx;
  margin-bottom: 40rpx;
}
.logo-en {
  font-size: 36rpx;
  font-weight: 700;
  color: #ff6800;
  letter-spacing: 1rpx;
}
.logo-cn {
  margin-left: 12rpx;
  font-size: 22rpx;
  color: #ff6800;
}

/* 标题 - 设计稿 28px/400/黑色 */
.hero-title {
  padding: 0 32rpx;
  margin-bottom: 16rpx;
}
.title-main {
  font-size: 54rpx;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

/* 副标题 - 设计稿 10px/400/#000000 */
.hero-subtitle {
  display: block;
  padding: 0 32rpx;
  font-size: 20rpx;
  color: #999999;
  line-height: 1.6;
  margin-bottom: 36rpx;
}

/* 4个指标 - 设计稿 16px/400/#ff6800 */
.hero-stats {
  display: flex;
  padding: 0 32rpx;
  gap: 24rpx;
  margin-bottom: 40rpx;
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stat-value {
  font-size: 32rpx;
  font-weight: 700;
  color: #ff6800;
  line-height: 1.2;
}
.stat-label {
  margin-top: 8rpx;
  font-size: 20rpx;
  color: #999999;
}

/* 地球图 - 全宽 */
.hero-earth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.earth-img {
  width: 100%;
  display: block;
}
</style>
