<script setup>
import SectionHeaderBlock from './SectionHeaderBlock.vue'
import ImagePlaceholder from './ImagePlaceholder.vue'
import { businessProducts } from '../data/site'
</script>

<template>
  <section class="section section-business" id="business">
    <div class="container">
      <SectionHeaderBlock title-en="MAIN BUSINESS" title-cn="主营业务" />
    </div>

    <div
      v-for="item in businessProducts"
      :key="item.title"
      class="business-item"
      :class="{ 'business-item--merchant': item.reverse }"
    >
      <div
        class="container business-row"
        :class="{ 'business-row--reverse': item.reverse }"
      >
        <div class="business-visual">
          <img
            v-if="item.image"
            class="business-phone-image"
            :src="item.image"
            :alt="item.title"
          />
          <ImagePlaceholder
            v-else
            class="business-phone-placeholder"
            placeholder="手机界面"
          />
        </div>
        <div class="business-content" :class="{ 'business-content--raised': item.reverse }">
          <div class="business-brand">
            <img class="business-logo" :src="item.logo" :alt="item.title" />
            <h3 class="business-title">{{ item.title }}</h3>
            <span v-if="item.tag" class="business-tag">{{ item.tag }}</span>
          </div>
          <p class="business-subtitle">{{ item.subtitle }}</p>
          <p class="business-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>
