<script setup>
import { serviceItems } from "~/data/services";

defineProps({
  services: {
    type: Array,
    default: () => serviceItems,
  },
  eyebrow: {
    type: String,
    default: "Method",
  },
  title: {
    type: String,
    default: "基于高楼营销法则",
  },
  description: {
    type: String,
    default: "提供全链路增长服务",
  },
});
</script>

<template>
  <section class="bg-white py-20" id="services">
    <div class="container-gm grid gap-10 lg:grid-cols-[0.95fr_1.05fr]">
      <div class="lg:sticky lg:top-28 lg:self-start" data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">{{ eyebrow }}</p>
        <h2 class="mt-4 text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
          {{ title }}
        </h2>
        <p class="mt-4 text-lg text-[#666]">{{ description }}</p>
      </div>

      <div class="space-y-8" data-stagger>
        <NuxtLink
          v-for="(service, index) in services"
          :key="service.slug"
          :to="service.href"
          class="block border-b border-gm-border pb-8 last:border-b-0"
          data-stagger-item
          data-hover-card
        >
          <p class="text-[44px] font-semibold leading-none text-gm-green">
            {{ String(index + 1).padStart(2, "0") }}
          </p>
          <h3 class="mt-4 text-[28px] font-semibold text-[#262626]">
            {{ service.title }}
          </h3>
          <p class="mt-2 text-base text-[#666]">{{ service.tier }}</p>
          <p class="mt-4 max-w-2xl text-sm leading-7 text-[#777]">
            {{ service.summary }}
          </p>
          <span class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
            查看服务详情 <span aria-hidden="true">→</span>
          </span>
        </NuxtLink>
      </div>
    </div>
  </section>
</template>
