<script setup lang="ts">
import type { SectionBlock } from '~/types/site';

const props = defineProps<{ section: SectionBlock }>();

const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);

const steps = computed(() => config.value.steps ?? []);
</script>

<template>
  <div class="section-container py-[var(--sec-py,96px)]">
    <!-- 标题区 -->
    <div class="text-center max-w-640px mx-auto mb-64px">
      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
        {{ overline }}
      </p>
      <h2 class="mt-12px font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
        {{ title }}
      </h2>
      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
        {{ subtitle }}
      </p>
    </div>

    <!-- 步骤叙事 -->
    <div class="flex flex-col gap-64px max-w-960px mx-auto">
      <div
        v-for="(step, idx) in steps"
        :key="idx"
        class="grid md:grid-cols-2 gap-32px items-center"
      >
        <!-- 文案 -->
        <div class="flex flex-col gap-12px" :class="idx % 2 === 1 ? 'md:order-2' : ''">
          <span class="text-4xl font-bold opacity-20" :class="isDark ? 'text-white' : 'text-gray-900'">
            {{ String(idx + 1).padStart(2, '0') }}
          </span>
          <h3 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
            {{ isEn ? step.title_en : step.title_zh }}
          </h3>
          <p class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
            {{ isEn ? step.desc_en : step.desc_zh }}
          </p>
        </div>

        <!-- 配图 -->
        <div v-if="step.image_url" :class="idx % 2 === 1 ? 'md:order-1' : ''">
          <img :src="step.image_url" :alt="isEn ? step.title_en : step.title_zh" class="w-full rounded-16px object-cover shadow-md" />
        </div>
      </div>
    </div>
  </div>
</template>
