<template>
  <article v-if="block" class="home-bro-preview">
    <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>
      <button
        v-for="l in extendLinks"
        :key="l.topic"
        type="button"
        class="extend-chip"
        @click="emitTopic(l.topic)"
      >{{ l.text }}</button>
    </div>

    <p class="kw-hint kw-hint--short" role="note">
      文中青蓝色下划线可跳转完整宣传册页或首页锚点；本区域点击右侧列表即可切换章节预览。
    </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">
        需要电话或地址？
        <a href="#" @click.prevent="scrollToHash('contact')">跳转首页「联系我们」→</a>
      </p>
    </template>

    <p class="para page-cross-links">
      与首页联动：
      <a href="#" @click.prevent="scrollToHash('videos')">产品视频</a>
      <span class="dot">·</span>
      <a href="#" @click.prevent="scrollToHash('contact')">联系我们</a>
      <span class="dot">·</span>
      <a href="#" @click.prevent="scrollToHash('download')">下载入口</a>
    </p>

    <nav class="chapter-nav" aria-label="章节切换（本页预览）">
      <button
        v-if="neighbors.prev"
        type="button"
        class="chapter-btn prev"
        @click="emitTopic(neighbors.prev.topic)"
      >← {{ neighbors.prev.short }}</button>
      <span v-else class="chapter-btn prev disabled">← 已是第一章</span>

      <router-link :to="{ name: 'Brochure', params: { topic: currentTopic } }" class="chapter-btn mid">完整页面</router-link>

      <button
        v-if="neighbors.next"
        type="button"
        class="chapter-btn next"
        @click="emitTopic(neighbors.next.topic)"
      >{{ neighbors.next.short }} →</button>
      <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">
        <button
          v-for="item in BROCHURE_NAV"
          :key="'chip-' + item.topic"
          type="button"
          class="chapter-chip"
          :class="{ current: item.topic === currentTopic }"
          @click="emitTopic(item.topic)"
        >{{ item.short }}</button>
      </div>
    </div>
  </article>
</template>

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

const props = defineProps({
  topic: { type: String, default: 'company' }
})

const emit = defineEmits(['update:topic'])

const currentTopic = computed(() => getBrochureTopic(props.topic))

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

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

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

function emitTopic(t) {
  emit('update:topic', getBrochureTopic(t))
}

function scrollToHash(hash) {
  const el = document.getElementById(hash)
  el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
</script>

<style scoped>
.home-bro-preview {
  padding: 4px 4px 12px;
  text-align: left;
}
.breadcrumb {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}
.breadcrumb a {
  color: #00d4ff;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb .sep {
  margin: 0 6px;
  opacity: 0.45;
}
.home-bro-preview h1 {
  font-size: clamp(20px, 3.2vw, 28px);
  margin-bottom: 8px;
  font-family: 'Exo 2', sans-serif;
}
.lead {
  color: #00d4ff;
  font-size: 15px;
  margin-bottom: 16px;
  opacity: 0.9;
}
.para {
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 12px;
  font-size: 14px;
}
.subsec {
  margin-bottom: 20px;
}
.subsec h3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 8px;
  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.65;
  font-size: 14px;
}
.subsec li,
.bullet-list li {
  margin-bottom: 6px;
}
.note {
  margin-top: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
.card {
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(30, 58, 95, 0.22);
  border: 1px solid rgba(0, 212, 255, 0.1);
}
.card h3 {
  color: #00d4ff;
  margin-bottom: 8px;
  font-size: 15px;
}
.contacts {
  margin: 16px 0;
}
.contact-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.contact-row .label {
  color: rgba(255, 255, 255, 0.45);
  min-width: 72px;
}
.contact-row a {
  color: #00d4ff;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.tag {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.25);
}
.closing {
  margin-top: 16px;
}
.extend-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
}
.extend-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-right: 4px;
}
.extend-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(30, 58, 95, 0.45);
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
}
.extend-chip:hover {
  background: rgba(0, 212, 255, 0.15);
  border-color: #00d4ff;
}
.kw-hint {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px dashed rgba(0, 212, 255, 0.18);
}
.page-cross-links {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.page-cross-links a {
  color: #00d4ff;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}
.page-cross-links a:hover {
  text-decoration: underline;
}
.page-cross-links .dot {
  margin: 0 5px;
  opacity: 0.4;
}
.home-contact-hint a {
  color: #00d4ff;
  text-decoration: none;
}
.home-contact-hint a:hover {
  text-decoration: underline;
}
.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 16px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(30, 58, 95, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.15);
}
.chapter-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.12);
  cursor: pointer;
  font-family: inherit;
  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: 8px;
}
.all-chapters-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 8px;
}
.chapter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chapter-chip {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  border: 1px solid rgba(0, 212, 255, 0.15);
  background: rgba(10, 10, 18, 0.65);
  font-family: inherit;
  transition: border-color 0.2s, color 0.2s;
}
.chapter-chip:hover {
  border-color: #00d4ff;
  color: #00d4ff;
}
.chapter-chip.current {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
}
:deep(.card-body-rich) {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0;
  font-size: 14px;
}
</style>
