<script setup>
defineProps({
  steps: {
    type: Array,
    required: true,
  },
  title: {
    type: String,
    default: "交付流程",
  },
  description: {
    type: String,
    default: "从诊断到上线，再到持续复盘，把增长动作落到可执行的节奏里。",
  },
});
</script>

<template>
  <section class="bg-white py-20">
    <div class="container-gm">
      <div class="max-w-2xl" data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Process</p>
        <h2 class="section-title mt-4">{{ title }}</h2>
        <p class="mt-4 text-base leading-8 text-[#777]">{{ description }}</p>
      </div>

      <div class="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
        <article
          v-for="step in steps"
          :key="step.step || step"
          class="rounded-[24px] border border-gm-border bg-white p-6 shadow-sm"
          data-stagger-item
          data-hover-card
        >
          <p class="text-[42px] font-semibold leading-none text-gm-green">
            {{ step.step || String(steps.indexOf(step) + 1).padStart(2, "0") }}
          </p>
          <h3 class="mt-5 text-xl font-semibold text-[#262626]">
            {{ step.title || step }}
          </h3>
          <p v-if="step.text" class="mt-3 text-sm leading-7 text-[#777]">
            {{ step.text }}
          </p>
        </article>
      </div>
    </div>
  </section>
</template>
