<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';

const activeStep = ref(0);
const STEP_INTERVAL_MS = 2000;

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;
  startStepTimer();
};

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

function goToLogin(): void {
  window.location.href = 'https://inkpod.vip/user/login';
}

function startStepTimer(): void {
  if (stepTimer) clearInterval(stepTimer);
  stepTimer = setInterval(() => {
    activeStep.value = (activeStep.value + 1) % steps.length;
  }, STEP_INTERVAL_MS);
}

onMounted(startStepTimer);

onBeforeUnmount(() => {
  if (stepTimer) clearInterval(stepTimer);
});
</script>

<template>
  <section class="step-section w-full flex flex-col gap-8 lg:gap-10 items-center p-6 lg:p-10">
    <div class="text-[48px] font-extrabold 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-8 lg:p-5 lg:w-5/12 overflow-x-auto lg:overflow-visible justify-center">
        <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="selectStep(idx)"
        >
          <p class="step-title text-xl lg:text-4xl">{{ 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 v-if="activeStep === idx" class="step-progress h-full rounded-full bg-primary"></div>
          </div>
        </div>
        <div class="hidden lg:flex items-center pt-6">
          <button type="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" @click="goToLogin">
            立即开始
          </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"
          :data-testid="`step-image-${idx}`"
          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 type="button" class="text-xl text-white bg-primary rounded-lg px-10 py-3 hover:opacity-90 transition-opacity" @click="goToLogin">
        立即开始
      </button>
    </div>
  </section>
</template>

<style scoped>
.step-progress { width: 0; animation: fill-step-progress 2s linear forwards; }

@keyframes fill-step-progress {
  to { width: 100%; }
}

@media (min-width: 1024px) {
  .step-section { height: 935px; padding-top: 54px; }
  .step-section > div:first-child { font-size: 48px; }
  .step-section > div:nth-child(2) { height: 708px; }
}
</style>
