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

defineProps({
  problem: {
    type: Object,
    default: () => serviceOverview.problem,
  },
});
</script>

<template>
  <section
    class="bg-top bg-no-repeat py-6 md:py-16"
    :style="{ backgroundImage: `url(${problem.backgroundImage})` }"
  >
    <div class="container-gm">
      <div class="mx-auto max-w-[760px] text-center" data-reveal>
        <h2 class="section-title text-balance">
          企业的营销数字化面临的
          <span class="text-gm-green">三个问题</span>
          ，增长超人将如何帮您解决？
        </h2>
        <div class="mx-auto mt-7 flex size-12 items-center justify-center rounded-full border border-[#b7f7c2] text-gm-green shadow-[0_0_0_8px_rgba(27,214,41,0.08)]">
          ↓
        </div>
      </div>

      <article class="mt-14 grid gap-10 rounded-[20px] bg-white px-6 py-8 shadow-soft lg:mt-[92px] lg:grid-cols-[1.05fr_0.95fr] lg:px-12 lg:py-10" data-stagger>
        <div data-stagger-item>
          <span class="rounded-full bg-gm-green px-4 py-1 text-xs font-medium text-white">
            {{ problem.problemLabel }}
          </span>
          <h3 class="mt-8 text-[24px] font-medium leading-[1.5] text-[#7f7f7f] md:text-[30px]">
            {{ problem.problem }}
          </h3>

          <p class="mt-9 text-sm text-[#999]">{{ problem.solutionTitle }}</p>
          <p class="mt-4 text-[24px] font-medium leading-[1.5] text-[#8f8f8f] md:text-[30px]">
            {{ problem.solution }}
          </p>

          <div class="mt-16 space-y-5">
            <p class="text-sm text-[#999]">网站开发服务</p>
            <NuxtLink :to="problem.solutionLink.href" class="inline-flex items-center gap-2 text-sm font-medium text-gm-green">
              {{ problem.solutionLink.label }}
              <span aria-hidden="true">→</span>
            </NuxtLink>
          </div>
        </div>

        <div data-stagger-item>
          <p class="mb-5 text-sm text-[#999]">相关案例</p>
          <div class="grid grid-cols-2 border-l border-t border-[#edf0ee] md:grid-cols-3">
            <div
              v-for="item in problem.cases"
              :key="item"
              class="flex min-h-[96px] items-center justify-center border-b border-r border-[#edf0ee] px-3 text-center text-xs leading-relaxed text-[#828282]"
            >
              {{ item }}
            </div>
          </div>

          <p class="mb-5 mt-10 text-sm text-[#999]">相关洞察</p>
          <ul class="space-y-3">
            <li
              v-for="(item, index) in problem.insights"
              :key="item"
              class="flex gap-2 text-sm leading-relaxed text-[#555]"
            >
              <span class="mt-2 size-1 shrink-0 rounded-full bg-gm-green" />
              <span>
                {{ item }}
                <span
                  v-if="index === 0"
                  class="ml-2 rounded-full bg-gm-green px-2 py-0.5 text-[10px] text-white"
                >
                  HOT
                </span>
              </span>
            </li>
          </ul>
        </div>
      </article>
    </div>
  </section>
</template>
