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

<template>
  <section class="bg-[#f7f8f7] py-20">
    <div class="container-gm">
      <div class="text-center" data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Capability</p>
        <h2 class="section-title mt-4">从项目交付到增长资产</h2>
      </div>

      <div class="mt-12 overflow-x-auto rounded-[28px] border border-gm-border bg-white" data-reveal>
        <div class="min-w-[720px]">
          <div class="grid grid-cols-[0.8fr_1fr_1fr] border-b border-gm-border bg-gm-dark text-sm font-medium text-white">
            <div class="p-5">能力维度</div>
            <div class="p-5">基础交付</div>
            <div class="p-5">增长超人升级</div>
          </div>
          <div
            v-for="item in capabilities"
            :key="item.label"
            class="grid grid-cols-[0.8fr_1fr_1fr] border-b border-gm-border last:border-b-0"
          >
            <div class="p-5 font-medium text-[#262626]">{{ item.label }}</div>
            <div class="p-5 text-sm leading-7 text-[#777]">{{ item.basic }}</div>
            <div class="p-5 text-sm font-medium leading-7 text-gm-green">{{ item.advanced }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
