<script setup>
import { footerData } from "~/data/navigation";

const heroRoutes = [
  { label: "页面路径", href: "/contact", path: "/contact" },
  { label: "首页 CTA", href: "/#consult", path: "/#consult" },
  { label: "服务总览", href: "/services", path: "/services" },
];

const contactRoutes = [
  { label: "首页 CTA", href: "/#consult", path: "/#consult" },
  { label: "服务总览", href: "/services", path: "/services" },
  { label: "方案总览", href: "/solutions", path: "/solutions" },
];

useHead({
  title: "联系我们 - 大马棒·云途全域 GEO",
  meta: [
    {
      name: "description",
      content:
        "联系大马棒·云途全域 GEO，获取 1 对 1 增长诊断方案与行业专属 GEO 服务建议。",
    },
  ],
});
</script>

<template>
  <WebsiteShell>
    <section
      class="relative overflow-hidden bg-black bg-cover bg-center text-white"
      style="background-image: url('/images/banner-bg.jpg')"
    >
      <div class="absolute inset-0 bg-black/55" />
      <div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
      <div class="container-gm relative z-10 py-24 md:py-32">
        <p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>CONTACT</p>
        <h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
          联系我们
        </h1>
        <p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
          获取 1 对 1 GEO 增长诊断方案，快速判断品牌在曝光、内容、咨询与转化链路上的优化空间。
        </p>
        <div class="mt-8" data-hero-reveal>
          <SectionRouteLinks :routes="heroRoutes" light />
        </div>
      </div>
    </section>

    <section id="contact-routes" 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]">Contact Routes</p>
            <h2 class="section-title mt-4">咨询方式与相关路径</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              可以从电话、邮箱、二维码预留位或服务入口进入咨询，也可以从服务页、方案页、案例页继续回到联系页完成转化。
            </p>
          </div>
          <SectionRouteLinks :routes="contactRoutes" />
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
          <article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">电话咨询</p>
            <p class="mt-3 text-base text-[#666]">{{ footerData.contact.phone }}</p>
            <p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
          </article>
          <article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">邮件沟通</p>
            <p class="mt-3 text-base text-[#666]">{{ footerData.contact.email }}</p>
            <p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
          </article>
          <article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">线下地址</p>
            <p class="mt-3 text-base text-[#666]">{{ footerData.contact.address }}</p>
            <p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
          </article>
        </div>
      </div>
    </section>

    <CtaSection />
  </WebsiteShell>
</template>
