<script setup>
defineProps({
  mapping: {
    type: Object,
    required: true,
  },
  routes: {
    type: Array,
    default: () => [],
  },
  sectionId: {
    type: String,
    default: "solution-mapping",
  },
});
</script>

<template>
  <section :id="sectionId" class="bg-white py-16 md:py-20">
    <div class="container-gm">
      <div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
        <div class="max-w-3xl">
          <p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ mapping.eyebrow }}</p>
          <h2 class="section-title mt-4">{{ mapping.title }}</h2>
          <p class="mt-4 text-base leading-8 text-[#666]">{{ mapping.description }}</p>
        </div>
        <SectionRouteLinks :routes="routes" />
      </div>

      <div class="mt-10 grid gap-5 md:grid-cols-2" data-stagger>
        <article
          v-for="item in mapping.items"
          :key="item.industry"
          class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6"
          data-stagger-item
        >
          <div class="flex items-start justify-between gap-4">
            <div>
              <p class="text-xs uppercase tracking-[0.28em] text-gm-green">Industry</p>
              <h3 class="mt-3 text-[22px] font-semibold text-[#262626]">{{ item.industry }}</h3>
            </div>
            <div class="flex flex-wrap justify-end gap-2">
              <span
                v-for="tag in item.tags"
                :key="tag"
                class="rounded-full border border-gm-border bg-white px-3 py-1 text-xs text-[#666]"
              >
                {{ tag }}
              </span>
            </div>
          </div>

          <div class="mt-6 space-y-4 text-sm leading-7">
            <div>
              <p class="font-medium text-[#262626]">行业痛点</p>
              <p class="mt-1 text-[#666]">{{ item.pain }}</p>
            </div>
            <div>
              <p class="font-medium text-[#262626]">对应方案</p>
              <p class="mt-1 text-[#666]">{{ item.plan }}</p>
            </div>
          </div>

          <div class="mt-6 flex flex-wrap gap-3">
            <NuxtLink
              :to="item.solutionHref"
              class="inline-flex items-center gap-2 rounded-full border border-gm-green px-4 py-2 text-sm font-medium text-gm-green transition hover:bg-gm-green hover:text-white"
            >
              查看行业方案
              <span aria-hidden="true">→</span>
            </NuxtLink>
            <NuxtLink
              :to="item.caseHref"
              class="inline-flex items-center gap-2 rounded-full border border-gm-border bg-white px-4 py-2 text-sm text-[#555] transition hover:border-gm-green hover:text-gm-green"
            >
              查看对应案例
              <span aria-hidden="true">→</span>
            </NuxtLink>
          </div>

          <div class="mt-5 space-y-2 font-mono text-[11px] text-[#999]">
            <p>方案路径 {{ item.solutionPath }}</p>
            <p>案例路径 {{ item.casePath }}</p>
          </div>
        </article>
      </div>
    </div>
  </section>
</template>
