<template>
  <div class="brochure-page">
    <div class="brochure-bg"></div>
    <header class="brochure-header">
      <router-link to="/" class="logo-link">
        <img class="logo-link-img" src="/logo.png" alt="" width="36" height="36" decoding="async" />
        <span class="logo-link-text">YUHENG ONE</span>
      </router-link>
      <div class="header-actions">
        <router-link :to="{ path: '/', hash: '#videos' }" class="header-link">首页 · 产品视频</router-link>
        <router-link :to="{ path: '/', hash: '#contact' }" class="header-link">首页 · 联系我们</router-link>
        <router-link to="/" class="back-home">返回首页</router-link>
      </div>
    </header>

    <!-- 整站可跳转：与首页区块直接联动（Vue Router，非单页内锚点假跳转） -->
    <div class="site-shortcuts" aria-label="站内跳转">
      <router-link to="/">首页</router-link>
      <span class="dot">·</span>
      <router-link :to="{ path: '/', hash: '#features' }">功能特性</router-link>
      <span class="dot">·</span>
      <router-link :to="{ path: '/', hash: '#scenarios' }">应用场景</router-link>
      <span class="dot">·</span>
      <router-link :to="{ path: '/', hash: '#videos' }">产品视频</router-link>
      <span class="dot">·</span>
      <router-link :to="{ path: '/', hash: '#faq' }">常见问题</router-link>
      <span class="dot">·</span>
      <router-link :to="{ path: '/', hash: '#contact' }">联系与地址</router-link>
    </div>

    <div class="brochure-layout">
      <aside id="brochure-toc" class="brochure-toc">
        <h2>宣传册目录</h2>
        <p class="toc-note">点击章节即<strong>切换路由页面</strong>（可前进/后退）</p>
        <nav class="toc-nav">
          <router-link
            v-for="item in BROCHURE_NAV"
            :key="item.topic"
            :to="{ name: 'Brochure', params: { topic: item.topic } }"
            class="toc-item"
            active-class="active"
            exact-active-class="active"
          >{{ item.label }}</router-link>
        </nav>
        <router-link class="toc-back-home" :to="{ path: '/', hash: '#contact' }">需要帮助？去首页「联系我们」</router-link>
      </aside>

      <article class="brochure-article" v-if="block">
        <p class="breadcrumb">
          <router-link to="/">首页</router-link>
          <span class="sep">/</span>
          <span>宣传册</span>
          <span class="sep">/</span>
          <span>{{ neighbors.index }} / {{ neighbors.total }} {{ block.title }}</span>
        </p>

        <h1>{{ block.title }}</h1>
        <BrochureRichText
          v-if="block.subtitle"
          :text="block.subtitle"
          as="p"
          wrapper-class="lead"
        />

        <div v-if="extendLinks.length" class="extend-links" aria-label="延伸跳转">
          <span class="extend-label">相关跳转 · 继续浏览</span>
          <router-link
            v-for="l in extendLinks"
            :key="l.topic"
            class="extend-chip"
            :to="{ name: 'Brochure', params: { topic: l.topic } }"
          >{{ l.text }}</router-link>
        </div>

        <p class="kw-hint" role="note">
          <strong>关键词跳转：</strong>文中<strong class="kw-em">青蓝色下划线</strong>多为可点链接（宣传册章节或首页区块）。
          编辑文案可用显式标记
          <code class="kw-code">[[br:intro|宇恒一号介绍]]</code>、
          <code class="kw-code">[[home:videos|产品视频]]</code>、
          <code class="kw-code">[[out:https://…|外链文字]]</code>；
          自动词表见 <code class="kw-code">src/data/brochureKeywords.js</code>。
        </p>

        <template v-if="block.paragraphs">
          <BrochureRichText
            v-for="(p, i) in block.paragraphs"
            :key="'p' + i"
            :text="p"
            as="p"
            wrapper-class="para"
          />
          <ul v-if="block.highlights" class="hl-list">
            <li v-for="(h, i) in block.highlights" :key="'h' + i">
              <BrochureRichText :text="h" />
            </li>
          </ul>
        </template>

        <template v-if="block.lists">
          <section v-for="(sec, i) in block.lists" :key="'ls' + i" class="subsec">
            <h3>{{ sec.heading }}</h3>
            <ul>
              <li v-for="(it, j) in sec.items" :key="j">
                <BrochureRichText :text="it" />
              </li>
            </ul>
          </section>
          <BrochureRichText v-if="block.note" :text="block.note" as="p" wrapper-class="note" />
        </template>

        <ul v-if="block.bullets" class="bullet-list">
          <li v-for="(b, i) in block.bullets" :key="'b' + i">
            <BrochureRichText :text="b" />
          </li>
        </ul>

        <template v-if="block.cards">
          <div v-for="(c, i) in block.cards" :key="'c' + i" class="card">
            <h3>{{ c.h }}</h3>
            <BrochureRichText :text="c.t" as="p" wrapper-class="card-body-rich" />
          </div>
        </template>

        <template v-if="block.groups">
          <section v-for="(g, i) in block.groups" :key="'g' + i" class="subsec">
            <h3>{{ g.h }}</h3>
            <ul>
              <li v-for="(it, j) in g.items" :key="j">
                <BrochureRichText :text="it" />
              </li>
            </ul>
          </section>
        </template>

        <template v-if="block.sections">
          <section v-for="(s, i) in block.sections" :key="'s' + i" class="subsec">
            <h3>{{ s.h }}</h3>
            <BrochureRichText :text="s.p" as="p" wrapper-class="para" />
          </section>
        </template>

        <template v-if="block.blocks">
          <section v-for="(b, i) in block.blocks" :key="'bk' + i" class="subsec">
            <h3>{{ b.h }}</h3>
            <ul>
              <li v-for="(it, j) in b.items" :key="j">
                <BrochureRichText :text="it" />
              </li>
            </ul>
          </section>
        </template>

        <template v-if="block.items">
          <div v-for="(it, i) in block.items" :key="'it' + i" class="card">
            <h3>{{ it.h }}</h3>
            <BrochureRichText :text="it.p" as="p" wrapper-class="card-body-rich" />
          </div>
        </template>

        <template v-if="block.contacts">
          <div class="contacts">
            <div v-for="(c, i) in block.contacts" :key="i" class="contact-row">
              <span class="label">{{ c.label }}</span>
              <a v-if="c.href" :href="c.href" target="_blank" rel="noopener">{{ c.value }}</a>
              <span v-else>{{ c.value }}</span>
            </div>
          </div>
          <div class="tags">
            <span v-for="(t, i) in block.tags" :key="i" class="tag">{{ t }}</span>
          </div>
          <BrochureRichText :text="block.closing" as="p" wrapper-class="para closing" />
          <p class="para home-contact-hint">
            需要电话或地址？
            <router-link :to="{ path: '/', hash: '#contact' }">跳转首页「联系我们」区块 →</router-link>
          </p>
        </template>

        <p class="para page-cross-links">
          与首页联动：
          <router-link :to="{ path: '/', hash: '#videos' }">产品视频</router-link>
          <span class="dot">·</span>
          <router-link :to="{ path: '/', hash: '#contact' }">联系我们（地址/邮箱）</router-link>
          <span class="dot">·</span>
          <router-link :to="{ path: '/', hash: '#download' }">下载入口</router-link>
        </p>

        <!-- 章节顺序跳转：上一页 / 下一页 -->
        <nav class="chapter-nav" aria-label="章节跳转">
          <router-link
            v-if="neighbors.prev"
            class="chapter-btn prev"
            :to="{ name: 'Brochure', params: { topic: neighbors.prev.topic } }"
          >← {{ neighbors.prev.short }}</router-link>
          <span v-else class="chapter-btn prev disabled">← 已是第一章</span>

          <router-link to="/" class="chapter-btn mid">回首页</router-link>

          <router-link
            v-if="neighbors.next"
            class="chapter-btn next"
            :to="{ name: 'Brochure', params: { topic: neighbors.next.topic } }"
          >{{ neighbors.next.short }} →</router-link>
          <span v-else class="chapter-btn next disabled">已是最后一章 →</span>
        </nav>

        <div class="all-chapters" aria-label="全部宣传册章节">
          <span class="all-chapters-label">全部章节（点击跳转）</span>
          <div class="chapter-chips">
            <router-link
              v-for="item in BROCHURE_NAV"
              :key="'chip-' + item.topic"
              class="chapter-chip"
              :class="{ current: item.topic === topic }"
              :to="{ name: 'Brochure', params: { topic: item.topic } }"
            >{{ item.short }}</router-link>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  BROCHURE_NAV,
  BROCHURE_CONTENT,
  BROCH_EXTEND_LINKS,
  getBrochureTopic,
  getBrochureNeighbors
} from '../data/brochureContent'
import BrochureRichText from '../components/BrochureRichText.vue'

const route = useRoute()

const topic = computed(() => getBrochureTopic(route.params.topic))

const block = computed(() => BROCHURE_CONTENT[topic.value] || BROCHURE_CONTENT.company)

const neighbors = computed(() => getBrochureNeighbors(topic.value))

const extendLinks = computed(() => BROCH_EXTEND_LINKS[topic.value] || [])

watch(
  () => [topic.value, block.value?.title],
  () => {
    document.title = (block.value?.title || '宇恒一号') + ' - 宣传册'
  },
  { immediate: true }
)
</script>

<style scoped>
.brochure-page {
  min-height: 100vh;
  color: #fff;
  font-family: 'Noto Sans SC', sans-serif;
  position: relative;
}
.brochure-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a0a12;
  background-image: radial-gradient(ellipse at 20% 80%, rgba(74, 26, 107, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(30, 58, 95, 0.35) 0%, transparent 50%);
}
.brochure-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(10, 10, 18, 0.92);
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-link-img {
  height: 36px;
  width: auto;
  max-height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-link-text {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #00d4ff, #fff, #ff2d95);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.back-home {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 14px;
}
.back-home:hover {
  color: #00d4ff;
}
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.header-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 13px;
}
.header-link:hover {
  color: #00d4ff;
}
.site-shortcuts {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
  background: rgba(10, 10, 18, 0.65);
}
.site-shortcuts a {
  color: rgba(0, 212, 255, 0.95);
  text-decoration: none;
}
.site-shortcuts a:hover {
  text-decoration: underline;
}
.site-shortcuts .dot {
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
}
.breadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: #00d4ff;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb .sep {
  margin: 0 8px;
  opacity: 0.45;
}
.extend-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.2);
}
.extend-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-right: 6px;
}
.extend-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  background: rgba(30, 58, 95, 0.45);
  border: 1px solid rgba(0, 212, 255, 0.35);
  transition: background 0.2s, border-color 0.2s;
}
.extend-chip:hover {
  background: rgba(0, 212, 255, 0.15);
  border-color: #00d4ff;
}
.toc-back-home {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 212, 255, 0.15);
  font-size: 12px;
  color: #00d4ff;
  text-decoration: none;
}
.toc-back-home:hover {
  text-decoration: underline;
}
.page-cross-links {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.page-cross-links a {
  color: #00d4ff;
  text-decoration: none;
}
.page-cross-links a:hover {
  text-decoration: underline;
}
.page-cross-links .dot {
  margin: 0 6px;
  opacity: 0.4;
}
.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 32px 0 24px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(30, 58, 95, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.18);
}
.chapter-btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.12);
  transition: background 0.2s, border-color 0.2s;
}
.chapter-btn:hover:not(.disabled) {
  background: rgba(0, 212, 255, 0.22);
  border-color: #00d4ff;
}
.chapter-btn.mid {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.chapter-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.1);
}
.all-chapters {
  margin-bottom: 48px;
}
.all-chapters-label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}
.chapter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapter-chip {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  background: rgba(10, 10, 18, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.15);
}
.chapter-chip:hover {
  border-color: #00d4ff;
  color: #00d4ff;
}
.chapter-chip.current {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
}
.home-contact-hint a {
  color: #00d4ff;
}
.brochure-layout {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 80px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
}
@media (max-width: 900px) {
  .brochure-layout {
    grid-template-columns: 1fr;
  }
  .brochure-toc {
    position: relative;
    top: 0;
  }
}
.brochure-toc {
  position: sticky;
  top: 72px;
  align-self: start;
  padding: 20px;
  border-radius: 16px;
  background: rgba(30, 58, 95, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.15);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.brochure-toc h2 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #00d4ff;
  font-family: 'Exo 2', sans-serif;
}
.toc-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}
.toc-item {
  display: block;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.toc-item:hover {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
}
.toc-item.active {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
  border-left: 3px solid #00d4ff;
}
.brochure-article {
  padding: 8px 8px 40px;
}
.brochure-article h1 {
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 12px;
  font-family: 'Exo 2', sans-serif;
}
.lead {
  color: #00d4ff;
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.9;
}
.para {
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
  font-size: 15px;
}
.subsec {
  margin-bottom: 28px;
}
.subsec h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 12px;
  font-family: 'Exo 2', sans-serif;
}
.subsec ul,
.bullet-list,
.hl-list {
  padding-left: 1.2em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
}
.subsec li,
.bullet-list li {
  margin-bottom: 8px;
}
.note {
  margin-top: 16px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}
.card {
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(30, 58, 95, 0.25);
  border: 1px solid rgba(0, 212, 255, 0.12);
}
.card h3 {
  color: #00d4ff;
  margin-bottom: 10px;
  font-size: 17px;
}
.card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
}
.contacts {
  margin: 24px 0;
}
.contact-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.contact-row .label {
  color: rgba(255, 255, 255, 0.45);
  min-width: 80px;
}
.contact-row a {
  color: #00d4ff;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.tag {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.25);
}
.closing {
  margin-top: 24px;
}
.kw-hint {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 28px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px dashed rgba(0, 212, 255, 0.2);
}
.kw-hint .kw-em {
  color: #5ee4ff;
}
.kw-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: rgba(94, 228, 255, 0.9);
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
}
:deep(.card-body-rich) {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  margin: 0;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700;900&family=Noto+Sans+SC:wght@400;700&display=swap');
</style>
