<script setup>
import { computed, ref, watch } from "vue";
import { insightCategories, insightOverview, insights } from "~/data/insights";

const heroRoutes = [
  { label: "页面路径", href: "/insights", path: "/insights" },
  { label: "白皮书详情", href: "/insights/geo-full-intent-whitepaper", path: "/insights/geo-full-intent-whitepaper" },
  { label: "联系页", href: "/contact", path: "/contact" },
];

const route = useRoute();
const activeCategory = ref("全部");

const whitepapers = computed(() => insights.filter((item) => item.category === "白皮书"));
const hotInsights = computed(() => insights.filter((item) => item.featured).slice(0, 2));
const featured = computed(() => insights.find((item) => item.featured));

const filteredInsights = computed(() =>
  activeCategory.value === "全部"
    ? insights
    : insights.filter((item) => item.category === activeCategory.value),
);

const listRoutes = [
  { label: "模块锚点", href: "#insight-library", path: "/insights#insight-library" },
  { label: "行业干货", href: "/insights?category=行业干货", path: "/insights?category=行业干货" },
  { label: "白皮书", href: "/insights?category=白皮书", path: "/insights?category=白皮书" },
];

const resourceRoutes = [
  { label: "白皮书路径", href: "/insights/geo-full-intent-whitepaper", path: "/insights/geo-full-intent-whitepaper" },
  { label: "咨询入口", href: "/#contact", path: "/#contact" },
];

watch(
  () => route.query.category,
  (category) => {
    activeCategory.value =
      typeof category === "string" && insightCategories.includes(category)
        ? category
        : "全部";
  },
  { immediate: true },
);

useHead({
  title: "全域营销增长洞察 - 大马棒·云途全域 GEO",
  meta: [
    {
      name: "description",
      content:
        "围绕 GEO、AI 搜索、全域营销和行业增长，持续沉淀文章与白皮书内容。",
    },
  ],
});
</script>

<template>
  <WebsiteShell>
    <section
      class="relative overflow-hidden bg-black bg-cover bg-center text-white"
      style="background-image: url('/images/blog-growth-strategy.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>INSIGHTS</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>
          围绕行业干货文章与行业白皮书，持续沉淀 AI 时代品牌 GEO 增长方法。
        </p>
        <div class="mt-8" data-hero-reveal>
          <SectionRouteLinks :routes="heroRoutes" light />
        </div>
      </div>
    </section>

    <section id="insight-overview" 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]">Insight Overview</p>
            <h2 class="section-title mt-4">{{ insightOverview.intro.title }}</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">{{ insightOverview.intro.description }}</p>
          </div>
          <SectionRouteLinks :routes="insightOverview.intro.routes" />
        </div>
      </div>
    </section>

    <section id="insight-library" class="bg-white py-20">
      <div class="container-gm">
        <div class="mb-8 flex flex-col gap-4 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]">Insights</p>
            <h2 class="section-title mt-4">文章列表、热门推荐与分类筛选</h2>
          </div>
          <SectionRouteLinks :routes="listRoutes" />
        </div>

        <article
          v-if="featured"
          class="grid overflow-hidden rounded-lg border border-gm-border bg-[#f7f8f7] lg:grid-cols-[1.05fr_0.95fr]"
          data-reveal
        >
          <div class="p-8 md:p-12">
            <p class="text-sm font-medium text-gm-green">精选观点</p>
            <h2 class="mt-4 text-balance text-3xl font-semibold leading-tight text-[#262626] md:text-[42px]">
              {{ featured.title }}
            </h2>
            <p class="mt-5 max-w-2xl text-base leading-8 text-[#777]">{{ featured.excerpt }}</p>
            <p class="mt-8 text-sm text-[#999]">{{ featured.date }} · {{ featured.category }}</p>
            <p class="mt-3 font-mono text-[11px] text-[#999]">内容路径 {{ featured.path }}</p>
          </div>
          <img
            :src="featured.image"
            :alt="featured.title"
            class="h-full min-h-[320px] w-full object-cover"
          />
        </article>

        <div class="mt-12 flex flex-wrap gap-3" data-reveal>
          <button
            v-for="category in insightCategories"
            :key="category"
            type="button"
            class="rounded-full border px-6 py-2 text-sm transition-all duration-300"
            :class="
              activeCategory === category
                ? 'border-gm-green bg-gm-green text-white'
                : 'border-gm-border bg-white text-[#666] hover:border-[#d5d5d5]'
            "
            @click="activeCategory = category"
          >
            {{ category }}
          </button>
        </div>

        <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
          <NuxtLink
            v-for="item in filteredInsights"
            :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-52 overflow-hidden bg-gm-light">
              <img :src="item.image" :alt="item.title" class="h-full w-full object-cover" loading="lazy" />
            </div>
            <div class="p-6">
              <p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
              <h3 class="mt-3 text-lg font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
              <p class="mt-3 text-sm leading-7 text-[#777]">{{ item.excerpt }}</p>
              <p class="mt-5 text-xs text-[#9b9b9b]">{{ item.date }}</p>
              <p class="mt-3 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
            </div>
          </NuxtLink>
        </div>
      </div>
    </section>

    <section id="whitepapers" 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]">Resources</p>
            <h2 class="section-title mt-4">{{ insightOverview.resourceTitle }}</h2>
          </div>
          <SectionRouteLinks :routes="resourceRoutes" />
        </div>

        <div class="mt-10 grid gap-5 lg:grid-cols-[0.85fr_1.15fr]">
          <div class="grid gap-5" data-stagger>
            <article
              v-for="item in whitepapers"
              :key="item.slug"
              class="rounded-lg border border-gm-border bg-white p-6"
              data-stagger-item
            >
              <p class="text-xs uppercase tracking-[0.28em] text-gm-green">{{ item.category }}</p>
              <h3 class="mt-4 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
              <p class="mt-4 text-sm leading-7 text-[#666]">{{ item.excerpt }}</p>
              <p class="mt-5 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
            </article>
          </div>

          <div class="grid gap-5 md:grid-cols-2" data-stagger>
            <NuxtLink
              v-for="item in hotInsights"
              :key="item.slug"
              :to="item.path"
              class="rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
              data-stagger-item
              data-hover-card
            >
              <p class="text-xs uppercase tracking-[0.28em] text-gm-green">Hot Insight</p>
              <h3 class="mt-4 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
              <p class="mt-4 text-sm leading-7 text-[#666]">{{ item.excerpt }}</p>
              <p class="mt-5 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>

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