<template>
  <view class="index-page">
    <!-- Hero 首屏 -->
    <HeroBanner :stats="trustStats" />

    <!-- 4步流程 -->
    <StepsFlow :steps="stepList" />

    <!-- 全球POD货盘 -->
    <PodCatalog
      :countries="countryTabs"
      :products="podProducts"
      @moreTap="onGoProducts"
      @productTap="onGoDetail"
    />

    <!-- 平台功能 + 集成平台 -->
    <PlatformFeatures :features="featureList" />

    <!-- 为什么选择 -->
    <WhyChoose :reasons="reasonList" />

    <!-- 公司简介 + 底部CTA -->
    <CompanyIntro :abilities="companyFeatures" />
  </view>
</template>

<script>
import HeroBanner from './components/HeroBanner.vue'
import StepsFlow from './components/StepsFlow.vue'
import PodCatalog from './components/PodCatalog.vue'
import PlatformFeatures from './components/PlatformFeatures.vue'
import WhyChoose from './components/WhyChoose.vue'
import CompanyIntro from './components/CompanyIntro.vue'

import {
  trustStats,
  stepList,
  countryTabs,
  podProducts,
  featureList,
  reasonList,
  companyFeatures
} from './mock.js'

export default {
  components: {
    HeroBanner,
    StepsFlow,
    PodCatalog,
    PlatformFeatures,
    WhyChoose,
    CompanyIntro
  },
  data() {
    return {
      trustStats,
      stepList,
      countryTabs,
      podProducts,
      featureList,
      reasonList,
      companyFeatures
    }
  },
  methods: {
    onGoProducts() {
      uni.switchTab({
        url: '/pages/products/products'
      })
    },
    onGoDetail(item) {
      uni.navigateTo({
        url: '/pages/product-detail/product-detail?id=' + item.id
      })
    }
  }
}
</script>

<style>
.index-page {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}
</style>
