<script setup lang="ts">
const activeStep = ref(0);

const steps = [
  { num: '1', title: '选择产品', desc: '海量精选产品，满足多元定制需求', image: '/01步骤-选择产品.png' },
  { num: '2', title: '上传设计', desc: '可视化编辑器，轻松实现创意落地', image: '/02步骤-上传设计.png' },
  { num: '3', title: '在线销售', desc: '一键开通店铺，多渠道触达目标客群', image: '/03步骤-在线销售.png' },
  { num: '4', title: '生产配送', desc: '智能化柔性生产，快速响应全球配送', image: '/04步骤-生产配送.png' },
];

const selectStep = (idx: number) => {
  activeStep.value = idx;
};

let timer: ReturnType<typeof setInterval> | null = null;

const startAutoPlay = () => {
  stopAutoPlay();
  timer = setInterval(() => {
    activeStep.value = (activeStep.value + 1) % steps.length;
  }, 3000);
};

const stopAutoPlay = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

const pauseAutoPlay = () => {
  stopAutoPlay();
};

const resumeAutoPlay = () => {
  startAutoPlay();
};

onMounted(startAutoPlay);
onUnmounted(stopAutoPlay);
</script>

<template>
  <section class="w-full flex flex-col gap-8 lg:gap-10 items-center p-6 lg:p-10">
    <div class="text-2xl md:text-4xl lg:text-6xl text-center">4 步开始你的按需定制生意</div>

    <div class="flex flex-col lg:flex-row gap-5 w-full max-w-7xl items-stretch">
      <div class="flex flex-row lg:flex-col gap-3 lg:gap-10 lg:p-5 lg:w-5/12 overflow-x-auto lg:overflow-visible justify-center"
        @mouseenter="pauseAutoPlay"
        @mouseleave="resumeAutoPlay"
      >
        <div
          v-for="(step, idx) in steps"
          :key="idx"
          class="flex-shrink-0 flex flex-col gap-2 lg:gap-5 cursor-pointer group min-w-[140px] lg:min-w-0"
          @click="selectStep(idx)"
          @mouseenter="activeStep = idx"
        >
          <p class="text-xl lg:text-3xl font-bold">{{ step.num }} {{ step.title }}</p>
          <p class="hidden lg:block indent-10 text-gray-500 text-xl">{{ step.desc }}</p>
          <div class="h-0.5 w-full rounded-full bg-gray-200 overflow-hidden">
            <div
              class="h-full rounded-full transition-all duration-500"
              :class="activeStep === idx ? 'w-1/2 bg-primary' : 'w-0 bg-primary'"
            ></div>
          </div>
        </div>
        <div class="hidden lg:flex items-center pt-6">
          <button class="text-xl lg:text-2xl text-white bg-primary rounded-lg px-10 lg:px-14 py-3 lg:py-4 hover:opacity-90 transition-opacity">
            立即开始
          </button>
        </div>
      </div>

      <div class="flex-1 overflow-hidden rounded-xl relative">
        <img
          v-for="(step, idx) in steps"
          :key="'img-' + idx"
          :src="step.image"
          :alt="step.title"
          class="w-full h-full object-contain transition-opacity duration-500 absolute inset-0"
          :class="activeStep === idx ? 'opacity-100' : 'opacity-0 pointer-events-none'"
        />
      </div>
    </div>

    <div class="flex lg:hidden">
      <button class="text-xl text-white bg-primary rounded-lg px-10 py-3 hover:opacity-90 transition-opacity">
        立即开始
      </button>
    </div>
  </section>
</template>
