<script setup>
import { computed } from "vue";
import { advantages } from "~/data/advantages";
import { cases } from "~/data/cases";
import {
  clientLogos,
  clientStats,
  geoLoopModel,
  homeSolutionHighlights,
  processSteps,
  testimonials,
} from "~/data/home";
import { ctaSection } from "~/data/navigation";

const clientRoutes = [
  { label: "模块锚点", href: "#clients", path: "/#clients" },
  { label: "客户案例", href: "/cases", path: "/cases" },
  { label: "核心优势", href: "/advantages", path: "/advantages" },
];

const modelRoutes = [
  { label: "模块锚点", href: "#model", path: "/#model" },
  { label: "服务总览", href: "/services", path: "/services" },
  { label: "咨询入口", href: "#contact", path: "/#contact" },
];

const advantageRoutes = [
  { label: "模块锚点", href: "#advantages", path: "/#advantages" },
  { label: "核心优势页", href: "/advantages", path: "/advantages" },
  { label: "服务总览", href: "/services", path: "/services" },
];

const caseRoutes = [
  { label: "模块锚点", href: "#cases", path: "/#cases" },
  { label: "案例总览", href: "/cases", path: "/cases" },
];

const solutionRoutes = [
  { label: "模块锚点", href: "#solutions", path: "/#solutions" },
  { label: "方案总览", href: "/solutions", path: "/solutions" },
];

const processRoutes = [
  { label: "模块锚点", href: "#process", path: "/#process" },
  { label: "服务总览", href: "/services", path: "/services" },
  { label: "咨询入口", href: "#contact", path: "/#contact" },
];

const testimonialRoutes = [
  { label: "模块锚点", href: "#testimonials", path: "/#testimonials" },
  { label: "客户案例", href: "/cases", path: "/cases" },
  { label: "咨询入口", href: "#contact", path: "/#contact" },
];

const featuredCases = computed(() => cases.filter((item) => item.featured).slice(0, 4));

useHead({
  title: "大马棒·云途全域 GEO | AI 时代品牌全域增长服务",
  meta: [
    {
      name: "description",
      content:
        "大马棒·云途全域 GEO，帮助品牌在 AI 时代建立曝光、信任、线索与转化闭环，打造长期可复用的增长资产。",
    },
  ],
});
</script>

<template>
  <WebsiteShell>
    <DambangHeroSection section-id="hero" />

    <section id="clients" 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]">Proof</p>
            <h2 class="section-title mt-4">已服务 300+ 全类型经营主体，覆盖 12+ 主流行业</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              用规模化服务经验、可量化数据结果和多行业覆盖，先建立品牌可信度。
            </p>
          </div>
          <SectionRouteLinks :routes="clientRoutes" />
        </div>

        <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
          <AnimatedStat
            v-for="metric in clientStats"
            :key="metric.label"
            :label="metric.label"
            :value="metric.value"
            :suffix="metric.suffix"
            data-stagger-item
          />
        </div>

        <div class="mt-10">
          <p class="mb-4 text-xs uppercase tracking-[0.28em] text-[#999]">Covered Industries</p>
          <div class="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6" data-stagger>
            <div
              v-for="logo in clientLogos"
              :key="logo"
              class="flex h-12 items-center justify-center rounded border border-gm-border bg-gm-light text-sm text-[#666]"
              data-stagger-item
            >
              {{ logo }}
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="model" class="bg-[#f4f4f4] py-16 md:py-20">
      <div class="container-gm">
        <div class="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
          <div data-reveal>
            <p class="text-sm uppercase tracking-[0.3em] text-[#999]">GEO Model</p>
            <h2 class="section-title mt-4">{{ geoLoopModel.title }}</h2>
            <p class="mt-5 text-base leading-8 text-[#666]">{{ geoLoopModel.description }}</p>
            <div class="mt-6">
              <SectionRouteLinks :routes="modelRoutes" />
            </div>
            <NuxtLink :to="geoLoopModel.cta.href" class="gm-btn gm-btn-primary mt-8">
              {{ geoLoopModel.cta.label }}
            </NuxtLink>
          </div>

          <div class="grid gap-5 md:grid-cols-2" data-stagger data-geo-loop>
            <article
              v-for="loop in geoLoopModel.loops"
              :key="loop.title"
              class="rounded-lg border border-gm-border bg-white p-6 shadow-soft"
              data-stagger-item
              data-hover-card
            >
              <p class="text-sm font-medium text-gm-green">{{ loop.title }}</p>
              <p class="mt-3 text-[32px] font-semibold leading-none text-[#262626]">{{ loop.value }}</p>
              <p class="mt-4 text-sm leading-7 text-[#666]">{{ loop.description }}</p>
              <div class="mt-6 space-y-3">
                <div
                  v-for="node in loop.nodes"
                  :key="node"
                  class="flex items-center gap-3 rounded border border-gm-border bg-white px-4 py-3 text-sm text-[#555]"
                  data-geo-node
                >
                  <span class="size-2 shrink-0 rounded-full bg-gm-green" />
                  <span>{{ node }}</span>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section id="advantages" 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]">Advantages</p>
            <h2 class="section-title mt-4">四大核心优势</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              从真人内容生产、媒体矩阵到增长闭环与行业定制能力，帮助用户快速理解大马棒的差异化竞争力。
            </p>
          </div>
          <div class="flex flex-col items-start gap-3 md:items-end">
            <SectionRouteLinks :routes="advantageRoutes" />
            <NuxtLink to="/advantages" class="text-sm font-medium text-gm-green">
              查看核心优势 →
            </NuxtLink>
          </div>
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
          <article
            v-for="item in advantages"
            :key="item.slug"
            class="rounded-lg border border-gm-border bg-white p-6 shadow-sm"
            data-stagger-item
            data-hover-card
          >
            <p class="text-[28px] font-semibold leading-none text-gm-green">{{ item.metric }}</p>
            <h3 class="mt-5 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
            <p class="mt-3 text-sm font-medium leading-7 text-[#333]">{{ item.point }}</p>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.value }}</p>
          </article>
        </div>
      </div>
    </section>

    <section id="cases" class="bg-[#f7f8f7] py-20">
      <div class="container-gm">
        <div class="flex flex-col gap-6 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-[#9a9a9a]">Cases</p>
            <h2 class="section-title mt-4">真实落地成果，见证增长实效</h2>
          </div>
          <div class="flex flex-col items-start gap-3 md:items-end">
            <SectionRouteLinks :routes="caseRoutes" />
            <NuxtLink
              to="/cases"
              class="inline-flex items-center gap-2 text-sm font-medium text-gm-green"
            >
              查看全部案例 <span aria-hidden="true">→</span>
            </NuxtLink>
          </div>
        </div>

        <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
          <NuxtLink
            v-for="item in featuredCases"
            :key="item.title"
            :to="item.path"
            class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
            data-stagger-item
            data-hover-card
          >
            <div class="h-56 overflow-hidden bg-gm-light">
              <img
                :src="item.image"
                :alt="item.title"
                class="h-full w-full object-cover transition duration-500 hover:scale-105"
                loading="lazy"
              />
            </div>
            <div class="p-6">
              <p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
              <h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">
                {{ item.title }}
              </h3>
              <p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
              <div class="mt-5 flex flex-wrap gap-2">
                <span
                  v-for="tag in item.tags"
                  :key="tag"
                  class="rounded-full bg-gm-light px-3 py-1 text-xs text-[#666]"
                >
                  {{ tag }}
                </span>
              </div>
              <div class="mt-6 grid gap-2">
                <p
                  v-for="metric in item.metrics"
                  :key="metric"
                  class="text-sm font-medium text-[#262626]"
                >
                  {{ metric }}
                </p>
              </div>
              <p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
            </div>
          </NuxtLink>
        </div>
      </div>
    </section>

    <section id="solutions" class="bg-[#f4f4f4] 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]">Solutions</p>
            <h2 class="section-title mt-4">深入 12+ 行业，定制专属 GEO 增长方案</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              让不同行业客户快速找到与自身相关的增长方案，提升业务匹配度感知。
            </p>
          </div>
          <div class="flex flex-col items-start gap-3 md:items-end">
            <SectionRouteLinks :routes="solutionRoutes" />
            <NuxtLink to="/solutions" class="text-sm font-medium text-gm-green">
              获取我的行业专属方案 →
            </NuxtLink>
          </div>
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3" data-stagger>
          <NuxtLink
            v-for="item in homeSolutionHighlights"
            :key="item.slug"
            :to="item.href"
            class="group overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm"
            data-stagger-item
            data-hover-card
          >
            <div class="h-44 overflow-hidden bg-gm-light">
              <img
                :src="item.image"
                :alt="item.title"
                class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
                loading="lazy"
              />
            </div>
            <div class="p-6">
              <h3 class="text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
              <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.summary }}</p>
              <div class="mt-5 flex flex-wrap gap-2">
                <span
                  v-for="tag in item.tags"
                  :key="tag"
                  class="rounded bg-gm-light px-3 py-1 text-xs text-[#666]"
                >
                  {{ tag }}
                </span>
              </div>
              <p class="mt-5 font-mono text-[11px] text-[#999]">方案路径 {{ item.path }}</p>
            </div>
          </NuxtLink>
        </div>
      </div>
    </section>

    <section id="process" 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]">Process</p>
            <h2 class="section-title mt-4">5 步标准化交付流程，透明可控、效果可追踪</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              标准化流程加透明化交付，让服务可控、结果清晰可见。
            </p>
          </div>
          <SectionRouteLinks :routes="processRoutes" />
        </div>

        <div class="relative mt-10 grid gap-4 md:grid-cols-5" data-stagger data-process-line>
          <div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
          <div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
          <article
            v-for="step in processSteps"
            :key="step.step"
            class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
            data-stagger-item
          >
            <p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
            <h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
          </article>
        </div>
      </div>
    </section>

    <section id="testimonials" class="bg-white 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-[#a1a1a1]">Voice</p>
            <h2 class="section-title mt-4">客户真实评价，见证服务品质</h2>
            <p class="mt-3 text-[#777]">
              从真实客户视角补充信任背书，进一步强化团队专业度和落地能力。
            </p>
          </div>
          <SectionRouteLinks :routes="testimonialRoutes" />
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
          <article
            v-for="item in testimonials"
            :key="item.id"
            class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6 shadow-sm"
            data-stagger-item
            data-hover-card
          >
            <div class="flex size-14 items-center justify-center rounded-lg bg-white text-lg font-semibold text-gm-green">
              {{ item.name.slice(0, 1) }}
            </div>
            <blockquote class="mt-5 text-base leading-8 text-[#555]">
              “{{ item.quote }}”
            </blockquote>
            <p class="mt-6 text-base font-semibold text-[#262626]">{{ item.name }}</p>
            <p class="text-sm text-[#9b9b9b]">{{ item.title }}</p>
          </article>
        </div>
      </div>
    </section>

    <CtaSection :cta="ctaSection" section-id="consult" />
  </WebsiteShell>
</template>
