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

defineProps({
  hero: {
    type: Object,
    default: () => serviceOverview.hero,
  },
  services: {
    type: Array,
    default: () => [],
  },
});
</script>

<template>
  <section class="bg-white py-20">
    <div class="container-gm grid items-start gap-12 lg:grid-cols-[1fr_508px]">
      <div class="max-w-[720px]">
        <p class="text-[18px] uppercase leading-none text-[#b8b8b8]" data-reveal>
          {{ hero.eyebrow }}
        </p>
        <h1 class="mt-4 text-balance text-[42px] font-medium leading-[1.18] text-[#262626] md:text-[52px]" data-reveal>
          {{ hero.title }}
        </h1>
        <p class="mt-5 max-w-2xl text-base leading-8 text-[#777]" data-reveal>
          {{ hero.description }}
        </p>

        <div class="mt-12 space-y-8" data-stagger>
          <NuxtLink
            v-for="service in services"
            :key="service.href"
            :to="service.href"
            class="block"
            data-stagger-item
            data-hover-card
          >
            <p class="mb-4 text-[18px] font-medium text-[#12d12c]">
              {{ service.tier }}
            </p>
            <h2 class="text-[28px] font-medium leading-tight text-[#262626] md:text-[34px]">
              {{ service.title }}
            </h2>
            <p class="mt-4 max-w-[680px] text-base leading-8 text-[#999]">
              {{ service.summary }}
            </p>
          </NuxtLink>
        </div>
      </div>

      <div class="relative hidden justify-center lg:flex" data-reveal>
        <img
          :src="hero.image"
          alt="增长超人服务能力展示"
          class="h-auto w-[508px] select-none"
        />
      </div>
    </div>
  </section>
</template>
