<script setup>
defineProps({
  eyebrow: {
    type: String,
    default: "Three Directions",
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: "",
  },
  services: {
    type: Array,
    required: true,
  },
  routes: {
    type: Array,
    default: () => [],
  },
  sectionId: {
    type: String,
    default: "service-directions",
  },
});
</script>

<template>
  <section :id="sectionId" class="bg-[#f4f4f4] py-16 md:py-20">
    <div class="container-gm">
      <div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
        <div class="max-w-3xl">
          <p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ eyebrow }}</p>
          <h2 class="section-title mt-4">{{ title }}</h2>
          <p v-if="description" class="mt-4 text-base leading-8 text-[#666]">{{ description }}</p>
        </div>
        <SectionRouteLinks :routes="routes" />
      </div>

      <div class="mt-10 grid gap-5 lg:grid-cols-3" data-stagger>
        <NuxtLink
          v-for="service in services"
          :key="service.slug"
          :to="service.href"
          class="group rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
          data-stagger-item
          data-hover-card
        >
          <div class="flex items-start justify-between gap-4">
            <div>
              <p class="text-xs uppercase tracking-[0.28em] text-gm-green">{{ service.tags.join(" / ") }}</p>
              <h3 class="mt-4 text-[22px] font-semibold text-[#262626]">{{ service.title }}</h3>
            </div>
            <span class="rounded-full bg-gm-light px-3 py-1 text-xs text-[#666]">{{ service.metrics[0].value }}</span>
          </div>

          <p class="mt-4 text-sm leading-7 text-[#666]">{{ service.summary }}</p>

          <div class="mt-5 flex flex-wrap gap-2">
            <span
              v-for="client in service.fitClients"
              :key="client"
              class="rounded-full border border-gm-border px-3 py-1 text-xs text-[#666]"
            >
              {{ client }}
            </span>
          </div>

          <div class="mt-6 grid gap-3">
            <div
              v-for="item in service.deliverables.slice(0, 3)"
              :key="item"
              class="flex gap-3 text-sm text-[#555]"
            >
              <span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
              <span>{{ item }}</span>
            </div>
          </div>

          <p class="mt-6 font-mono text-[11px] text-[#999]">
            服务路径 {{ service.path }}
          </p>
          <span class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
            查看服务详情 <span aria-hidden="true">→</span>
          </span>
        </NuxtLink>
      </div>
    </div>
  </section>
</template>
