<script setup>
import SiteHeader from '~/components/site/SiteHeader.vue'
import SiteFooter from '~/components/site/SiteFooter.vue'
import { getInsightBySlug, insights } from '~/data/insights'

const route = useRoute()
const { openConsultation } = useConsultation()
const article = computed(() => getInsightBySlug(route.params.slug))

if (!article.value) {
  throw createError({ statusCode: 404, statusMessage: '洞察文章不存在' })
}

const articleIndex = computed(() => insights.findIndex((item) => item.slug === article.value.slug))
const previousArticle = computed(() => insights[articleIndex.value - 1] || null)
const nextArticle = computed(() => insights[articleIndex.value + 1] || null)
const relatedArticles = computed(() =>
  insights.filter((item) => item.slug !== article.value.slug).slice(0, 3)
)

useHead(() => ({
  title: `${article.value.title}｜云途全域增长洞察`,
  meta: [
    { name: 'description', content: article.value.excerpt },
    { property: 'og:title', content: article.value.title },
    { property: 'og:description', content: article.value.excerpt },
    { property: 'og:image', content: article.value.cover }
  ]
}))

function requestDiagnosis(source) {
  openConsultation({ title: '预约免费 GEO 增长诊断', source })
}

function requestWhitepaper(source) {
  openConsultation({ title: '获取 2026 AI 搜索与品牌增长观察', need: '行业白皮书', source })
}
</script>

<template>
  <div class="article-page">
    <a class="skip-link" href="#main-content">跳到文章正文</a>
    <SiteHeader />

    <main id="main-content">
      <article>
        <header class="article-hero">
          <div class="article-hero-art" aria-hidden="true"></div>
          <div class="page-width article-hero-inner">
            <nav class="breadcrumbs" aria-label="面包屑">
              <NuxtLink to="/">首页</NuxtLink><span>/</span
              ><NuxtLink to="/insights">增长洞察</NuxtLink><span>/</span
              ><b>{{ article.category }}</b>
            </nav>
            <div class="article-heading">
              <p>{{ article.category }}</p>
              <h1>{{ article.title }}</h1>
              <span>{{ article.excerpt }}</span>
              <div class="article-byline">
                <div><strong>云途全域编辑部</strong><small>YUNTU GEO INSIGHTS</small></div>
                <time :datetime="article.date">{{ article.date }}</time
                ><span>{{ article.readingTime }}</span
                ><span>{{ article.views }} 阅读</span>
              </div>
            </div>
          </div>
        </header>

        <div class="page-width article-layout">
          <aside class="article-aside">
            <NuxtLink to="/insights" class="back-link"
              ><AppIcon name="arrow-left" /> 返回洞察列表</NuxtLink
            >
            <div>
              <span>分享主题</span><strong>{{ article.category }}</strong>
            </div>
            <button type="button" @click="requestDiagnosis('洞察文章侧边栏')">
              诊断品牌可见性 <AppIcon name="arrow-right" />
            </button>
          </aside>

          <div class="article-content">
            <figure class="article-cover"><img :src="article.cover" :alt="article.title" /></figure>

            <template v-if="article.sections?.length">
              <p class="article-lead">{{ article.lead }}</p>
              <section v-for="(section, index) in article.sections" :key="section.title">
                <span class="section-number">0{{ index + 1 }}</span>
                <h2>{{ section.title }}</h2>
                <p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
                <div v-if="section.comparison" class="comparison-table">
                  <div class="comparison-head">
                    <span>比较维度</span><span>传统 SEO</span><span>GEO</span>
                  </div>
                  <div v-for="row in section.comparison" :key="row[0]" class="comparison-row">
                    <strong>{{ row[0] }}</strong
                    ><span>{{ row[1] }}</span
                    ><span>{{ row[2] }}</span>
                  </div>
                </div>
              </section>
              <blockquote>
                GEO
                的目标不是让品牌在每一个问题里出现，而是在真正影响用户决策的问题中，被准确理解并获得可信推荐。
              </blockquote>
            </template>

            <section v-else class="article-draft">
              <span class="section-number">01</span>
              <h2>核心观察</h2>
              <p>{{ article.excerpt }}</p>
              <div class="draft-note">
                <strong>完整内容正在编辑</strong>
                <p>
                  这篇文章的详细数据、方法与案例仍在复核。我们先保留摘要，避免发布未经确认的信息。
                </p>
              </div>
            </section>

            <div class="inline-cta">
              <div>
                <span>把方法放回你的业务</span>
                <h3>了解品牌当前在 AI 搜索中的真实表现</h3>
              </div>
              <button type="button" @click="requestDiagnosis(`洞察文章：${article.title}`)">
                预约免费诊断 <AppIcon name="arrow-right" />
              </button>
            </div>
          </div>
        </div>
      </article>

      <nav class="article-pagination page-width" aria-label="文章翻页">
        <NuxtLink v-if="previousArticle" :to="`/insights/${previousArticle.slug}`"
          ><span>上一篇</span><strong>{{ previousArticle.title }}</strong></NuxtLink
        >
        <div v-else></div>
        <NuxtLink v-if="nextArticle" :to="`/insights/${nextArticle.slug}`"
          ><span>下一篇</span><strong>{{ nextArticle.title }}</strong></NuxtLink
        >
      </nav>

      <section class="related-section">
        <div class="page-width">
          <header>
            <div>
              <p>继续阅读</p>
              <h2>相关增长洞察</h2>
            </div>
            <button type="button" @click="requestWhitepaper('文章详情白皮书入口')">
              获取行业白皮书 <AppIcon name="arrow-right" />
            </button>
          </header>
          <div class="related-grid">
            <article v-for="item in relatedArticles" :key="item.slug">
              <NuxtLink :to="`/insights/${item.slug}`"
                ><img :src="item.cover" :alt="item.title"
              /></NuxtLink>
              <span>{{ item.category }} · {{ item.date }}</span>
              <h3>
                <NuxtLink :to="`/insights/${item.slug}`">{{ item.title }}</NuxtLink>
              </h3>
            </article>
          </div>
        </div>
      </section>
    </main>
    <SiteFooter />
  </div>
</template>

<style scoped>
.article-page {
  --article-blue: #237df0;
  overflow: hidden;
  color: #344359;
  background: #fff;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  background: #1f70df;
  transform: translateY(-150%);
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
}
.article-hero {
  position: relative;
  min-height: 545px;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: #f1f7ff;
}
.article-hero-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 80% 25%, rgba(71, 154, 251, 0.2), transparent 27%),
    linear-gradient(110deg, #f9fcff, #e8f2ff);
}
.article-hero-art::after {
  position: absolute;
  inset: 0;
  content: '';
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(90deg, transparent 18%, #000);
}
.article-hero-inner {
  padding: 48px 0 60px;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #8a9bb0;
  font-size: 10px;
}
.breadcrumbs a {
  color: #6c86a4;
  text-decoration: none;
}
.breadcrumbs b {
  color: #2a7ee6;
  font-weight: 600;
}
.article-heading {
  max-width: 980px;
  margin-top: 64px;
}
.article-heading > p {
  margin: 0;
  color: #247ce9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.article-heading h1 {
  margin: 18px 0 0;
  color: #34465b;
  font-size: clamp(42px, 4.4vw, 68px);
  letter-spacing: -0.055em;
  line-height: 1.18;
  text-wrap: balance;
}
.article-heading > span {
  max-width: 770px;
  display: block;
  margin-top: 23px;
  color: #6f8095;
  font-size: 15px;
  line-height: 1.8;
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
  color: #8595a8;
  font-size: 10px;
}
.article-byline > div {
  display: grid;
  padding-right: 24px;
  border-right: 1px solid #cbdbea;
}
.article-byline strong {
  color: #526b87;
  font-size: 11px;
}
.article-byline small {
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.article-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 800px);
  justify-content: center;
  gap: 70px;
  padding-top: 90px;
  padding-bottom: 120px;
}
.article-aside {
  position: sticky;
  top: 95px;
  align-self: start;
  display: grid;
  gap: 28px;
  padding-top: 8px;
}
.article-aside > a {
  color: #607a98;
  font-size: 11px;
  text-decoration: none;
}
.article-aside > div {
  display: grid;
  gap: 7px;
  padding-top: 22px;
  border-top: 1px solid #dce6f0;
}
.article-aside span {
  color: #93a2b3;
  font-size: 9px;
}
.article-aside strong {
  color: #3b5877;
  font-size: 12px;
}
.article-aside button {
  padding: 18px;
  border-radius: 5px 14px 5px 14px;
  color: #fff;
  background: #277fec;
  font-size: 11px;
  text-align: left;
  transition: 0.2s;
}
.article-aside button:hover {
  box-shadow: 0 12px 25px rgba(39, 127, 236, 0.22);
  transform: translateY(-2px);
}
.article-content {
  min-width: 0;
}
.article-cover {
  width: calc(100% + 120px);
  height: 420px;
  margin: 0 0 55px -60px;
  overflow: hidden;
  border-radius: 5px 22px 5px 22px;
  background: #edf5fd;
}
.article-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.article-lead {
  margin: 0 0 62px;
  padding: 30px 35px;
  border-left: 3px solid #2b82ee;
  color: #49637f;
  background: #f1f7fd;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.85;
}
.article-content section {
  position: relative;
  margin-top: 66px;
}
.article-content section:first-of-type {
  margin-top: 0;
}
.section-number {
  position: absolute;
  top: 4px;
  left: -54px;
  color: #8fb2d8;
  font-size: 10px;
  font-weight: 700;
}
.article-content h2 {
  margin: 0 0 25px;
  color: #34485f;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.4;
}
.article-content section > p {
  margin: 0 0 18px;
  color: #64778e;
  font-size: 15px;
  line-height: 2;
}
.article-content blockquote {
  margin: 68px 0 0;
  padding: 36px 42px;
  border-radius: 5px 18px 5px 18px;
  color: #fff;
  background: linear-gradient(135deg, #2778dc, #42aee2);
  box-shadow: 0 22px 45px rgba(38, 113, 205, 0.18);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.75;
}
.comparison-table {
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid #dce7f2;
  border-radius: 5px 14px 5px 14px;
}
.comparison-head,
.comparison-row {
  display: grid;
  grid-template-columns: 0.65fr 1fr 1fr;
}
.comparison-head {
  color: #fff;
  background: #317fdb;
  font-size: 11px;
  font-weight: 600;
}
.comparison-head span,
.comparison-row > * {
  padding: 15px 18px;
}
.comparison-row {
  border-top: 1px solid #e0e9f2;
  color: #667a91;
  background: #f8fbfe;
  font-size: 11px;
  line-height: 1.6;
}
.comparison-row strong {
  color: #3c5877;
  background: #edf5fc;
  font-weight: 600;
}
.draft-note {
  margin-top: 34px;
  padding: 28px 30px;
  border-radius: 5px 15px 5px 15px;
  background: #f0f6fc;
}
.draft-note strong {
  color: #3c5875;
  font-size: 14px;
}
.draft-note p {
  margin: 8px 0 0;
  color: #78899c;
  font-size: 12px;
  line-height: 1.75;
}
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  margin-top: 72px;
  padding: 34px 38px;
  border-radius: 5px 17px 5px 17px;
  background: #eaf4ff;
}
.inline-cta span {
  color: #2b7fe8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.inline-cta h3 {
  margin: 9px 0 0;
  color: #3b536d;
  font-size: 20px;
}
.inline-cta button {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 18px;
  border-radius: 5px;
  color: #fff;
  background: #287fec;
  font-size: 11px;
}
.article-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-top: 42px;
  padding-bottom: 42px;
  border-top: 1px solid #dfe8f1;
}
.article-pagination a {
  display: grid;
  gap: 8px;
  text-decoration: none;
}
.article-pagination a:last-child {
  text-align: right;
}
.article-pagination span {
  color: #8c9bab;
  font-size: 9px;
}
.article-pagination strong {
  color: #506983;
  font-size: 13px;
  line-height: 1.55;
  transition: color 0.2s;
}
.article-pagination a:hover strong {
  color: #237df0;
}
.related-section {
  padding: 96px 0 118px;
  background: #eef6fd;
}
.related-section header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.related-section header p {
  margin: 0;
  color: #247ce9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.related-section header h2 {
  margin: 12px 0 0;
  color: #354a62;
  font-size: 35px;
}
.related-section header button {
  padding: 0 0 5px;
  border-bottom: 1px solid #94bae3;
  color: #287bdc;
  background: transparent;
  font-size: 11px;
}
.related-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 22px;
  margin-top: 38px;
}
.related-grid article > a {
  height: 190px;
  display: block;
  overflow: hidden;
  border-radius: 4px 14px 4px 14px;
}
.related-grid article:first-child > a {
  height: 250px;
}
.related-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s;
}
.related-grid article:hover img {
  transform: scale(1.04);
}
.related-grid article > span {
  display: block;
  margin-top: 18px;
  color: #7890aa;
  font-size: 9px;
}
.related-grid h3 {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
}
.related-grid h3 a {
  color: #3c526a;
  text-decoration: none;
}
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .article-aside {
    position: static;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .article-aside > div {
    display: none;
  }
  .article-cover {
    width: 100%;
    margin-left: 0;
  }
  .section-number {
    position: static;
    display: block;
    margin-bottom: 10px;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
  .related-grid article:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .article-hero {
    min-height: auto;
  }
  .article-hero-inner {
    padding-top: 35px;
    padding-bottom: 52px;
  }
  .article-heading {
    margin-top: 42px;
  }
  .article-heading h1 {
    font-size: clamp(35px, 10vw, 47px);
  }
  .article-byline {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .article-byline > div {
    width: 100%;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid #d1dfed;
  }
  .article-layout {
    padding-top: 58px;
    padding-bottom: 80px;
  }
  .article-aside {
    grid-template-columns: 1fr;
  }
  .article-aside button {
    display: none;
  }
  .article-cover {
    height: 235px;
    margin-bottom: 38px;
  }
  .article-lead {
    padding: 24px 21px;
    font-size: 16px;
  }
  .article-content section {
    margin-top: 52px;
  }
  .article-content h2 {
    font-size: 25px;
  }
  .comparison-table {
    overflow-x: auto;
  }
  .comparison-head,
  .comparison-row {
    min-width: 600px;
  }
  .article-content blockquote {
    padding: 29px 23px;
    font-size: 18px;
  }
  .inline-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 23px;
  }
  .article-pagination {
    grid-template-columns: 1fr;
  }
  .article-pagination a:last-child {
    text-align: left;
  }
  .related-section {
    padding-top: 76px;
    padding-bottom: 86px;
  }
  .related-section header {
    align-items: flex-start;
    flex-direction: column;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .related-grid article:first-child {
    grid-column: auto;
  }
  .related-grid article:first-child > a {
    height: 210px;
  }
}
</style>
