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

<template>
  <section class="bg-white py-16 md:py-20">
    <div class="container-gm grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
      <aside class="lg:sticky lg:top-28 lg:self-start" data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ type }}</p>
        <h1 class="mt-4 text-balance text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
          {{ item.title }}
        </h1>
        <p class="mt-5 text-base leading-8 text-[#666]">{{ item.summary || item.excerpt }}</p>
        <p v-if="item.path" class="mt-5 font-mono text-xs text-[#999]">
          页面路径 {{ item.path }}
        </p>
        <NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">立即免费咨询</NuxtLink>
      </aside>

      <div class="space-y-6">
        <div v-if="item.image" class="overflow-hidden rounded-lg border border-gm-border" data-reveal>
          <img :src="item.image" :alt="item.title" class="h-[320px] w-full object-cover" data-parallax="24" />
        </div>

        <div v-if="item.metrics?.length" class="grid gap-4 md:grid-cols-2" data-stagger>
          <div v-for="metric in item.metrics" :key="metric" class="rounded-lg border border-gm-border bg-gm-light p-5" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">{{ metric }}</p>
          </div>
        </div>

        <div v-if="item.outcomes?.length" class="grid gap-4 md:grid-cols-2" data-stagger>
          <div v-for="outcome in item.outcomes" :key="outcome" class="rounded-lg border border-gm-border bg-gm-light p-5" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">{{ outcome }}</p>
          </div>
        </div>

        <div v-if="item.content?.length" class="rounded-lg border border-gm-border p-6" data-reveal>
          <p v-for="paragraph in item.content" :key="paragraph" class="mb-4 text-base leading-8 text-[#666] last:mb-0">
            {{ paragraph }}
          </p>
        </div>

        <div v-if="item.challenge || item.solution || item.result" class="grid gap-4" data-stagger>
          <article v-if="item.challenge" class="rounded-lg border border-gm-border p-6" data-stagger-item>
            <h2 class="text-[20px] font-semibold text-[#262626]">项目挑战</h2>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.challenge }}</p>
          </article>
          <article v-if="item.solution" class="rounded-lg border border-gm-border p-6" data-stagger-item>
            <h2 class="text-[20px] font-semibold text-[#262626]">解决方案</h2>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.solution }}</p>
          </article>
          <article v-if="item.result" class="rounded-lg border border-gm-border p-6" data-stagger-item>
            <h2 class="text-[20px] font-semibold text-[#262626]">落地结果</h2>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.result }}</p>
          </article>
        </div>
      </div>
    </div>
  </section>
</template>
