<script setup>
defineProps({
  service: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <section class="bg-white py-20">
    <div class="container-gm grid gap-12 lg:grid-cols-[0.85fr_1.15fr]">
      <div class="lg:sticky lg:top-28 lg:self-start" data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">{{ service.tier }}</p>
        <h1 class="mt-4 text-balance text-4xl font-semibold leading-tight text-[#262626] md:text-[56px]">
          {{ service.title }}
        </h1>
        <p class="mt-5 text-base leading-8 text-[#777]">{{ service.summary }}</p>
        <NuxtLink :to="service.cta.href" class="gm-btn gm-btn-primary mt-8 px-8">
          {{ service.cta.label }}
        </NuxtLink>
      </div>

      <div class="space-y-8">
        <div class="overflow-hidden rounded-[28px] border border-gm-border" data-reveal>
          <img
            :src="service.image"
            :alt="service.title"
            class="h-[340px] w-full object-cover"
            data-parallax="30"
          />
        </div>

        <div class="grid gap-6 md:grid-cols-3" data-stagger>
          <article
            v-for="metric in service.metrics"
            :key="metric.label"
            class="rounded-[24px] border border-gm-border bg-[#f7f8f7] p-6"
            data-stagger-item
          >
            <p class="text-3xl font-semibold text-gm-green">{{ metric.value }}</p>
            <p class="mt-2 text-sm text-[#777]">{{ metric.label }}</p>
          </article>
        </div>

        <div class="grid gap-6 md:grid-cols-2" data-stagger>
          <article class="rounded-[24px] border border-gm-border p-6" data-stagger-item>
            <h2 class="text-xl font-semibold text-[#262626]">适用场景</h2>
            <ul class="mt-5 space-y-3">
              <li
                v-for="pain in service.pains"
                :key="pain"
                class="flex gap-3 text-sm leading-7 text-[#666]"
              >
                <span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
                <span>{{ pain }}</span>
              </li>
            </ul>
          </article>

          <article class="rounded-[24px] border border-gm-border p-6" data-stagger-item>
            <h2 class="text-xl font-semibold text-[#262626]">核心交付物</h2>
            <ul class="mt-5 space-y-3">
              <li
                v-for="item in service.deliverables"
                :key="item"
                class="flex gap-3 text-sm leading-7 text-[#666]"
              >
                <span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
                <span>{{ item }}</span>
              </li>
            </ul>
          </article>
        </div>

        <div class="rounded-[24px] border border-gm-border bg-white p-6" data-reveal>
          <h2 class="text-xl font-semibold text-[#262626]">常见问题</h2>
          <div class="mt-5 divide-y divide-gm-border">
            <details
              v-for="faq in service.faqs"
              :key="faq.question"
              class="group py-4"
            >
              <summary class="cursor-pointer list-none text-base font-medium text-[#262626]">
                {{ faq.question }}
              </summary>
              <p class="mt-3 text-sm leading-7 text-[#777]">{{ faq.answer }}</p>
            </details>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
