fmode-voc-projects/scripts/tools/liver-render.js

// ==============================================================================
// 江中肝纯片 · VOC 深度洞察报告 · 主渲染器（参考 houguyin-render.js 架构）
// ==============================================================================
// 设计哲学：正向差异化（DMY 原料真力）+ 反向验证（VOC 实证）× KANO×JTBD 决策
//
// 报告结构（8 章 × ~38 slides）：
//   01 · Cover
//   02 · Agenda
//   03-05 · Ch1 诘问起点（3 子章）：DMY 被误读 / 海王金樽警示 / 反向定位起点
//   06-09 · Ch2 藤茶/DMY 归因学（4 子章）：DMY 科学力 / 藤茶认知空白 / 水飞蓟对标 / 可迁移性
//   10-13 · Ch3 护肝市场全景（4 子章）：50亿保健地图 / 5 竞品心智 / 人群声量 / 未满足地图
//   14-18 · Ch4 KANO × JTBD（5 子章）：KANO 五类 / F / E / S / 决策映射
//   19-22 · Ch5 场景四元素地图（4 子章）：应酬解酒 / 脂肪肝 / 熬夜 / 送长辈
//   23-25 · Ch6 竞品三轴图谱（3 子章）：三轴地图 / 本品坐标 / 6 竞品精对标
//   26-28 · Ch7 新机会（3 子章）：DMY 电商教育 / 餐饮 B2B2C / 礼品孝心
//   29-30 · Ch8 4P 蓝图（2 子章）：4P 配称 + 10亿路径
//
// Batch 1：cover + agenda + 8 dividers + 28 ComingSoon = ~38 slides 骨架
// Batch 2-5 逐步填充 Ch1-Ch8 真实内容
// ==============================================================================

const STYLES = require('./voc-styles.js');
const SCRIPTS = require('./voc-scripts.js');
const LA = require('./liver-analyze.js');
const C = require('./liver-components.js');
const { BRAND, esc, fmtLikes } = C;

// ============================================================
// 8 章元信息（按认知深度递进）
// ============================================================
const CHAPTERS = [
    { id: 1, num: '1', key: 'challenge',  title: '诘问起点',           en: 'THE CHALLENGE',     tone: 'rose',   color: BRAND.CORAL,          icon: '🎯',
      summary: 'DMY 原料真力 vs 用户零认知 · 海王金樽警示 · VOC 反向验证起点' },
    { id: 2, num: '2', key: 'dmy',        title: '藤茶 / DMY 归因学',  en: 'DMY ATTRIBUTION',   tone: 'amber',  color: BRAND.LIVER_AMBER,    icon: '🌿',
      summary: 'DMY 总黄酮 98% 真科学力 · 藤茶千年食饮史 · 水飞蓟"吸收差"反面教材' },
    { id: 3, num: '3', key: 'market',     title: '护肝市场 VOC 全景',  en: 'LIVER MARKET VOC',  tone: 'blue',   color: BRAND.TECH_BLUE,      icon: '💊',
      summary: '50 亿保健护肝 + 100 亿 OTC 胃肝药 · Swisse/易善复/葵花/片仔癀/海王金樽 五大对标' },
    { id: 4, num: '4', key: 'kano',       title: 'KANO × JTBD 洞察',   en: 'USER INSIGHT',      tone: 'purple', color: BRAND.PURPLE,         icon: '🧠',
      summary: 'KANO 五类 × JTBD F/E/S · 副作用 = 反向需求 · 送长辈 = 兴奋需求' },
    { id: 5, num: '5', key: 'scene',      title: '场景四元素地图',     en: 'SCENE MAP',         tone: 'orange', color: BRAND.WARM_ORANGE,    icon: '🗺',
      summary: '应酬解酒 / 脂肪肝调理 / 熬夜前后 / 送长辈 · 四大独占场景证据链' },
    { id: 6, num: '6', key: 'competitor', title: '竞品三轴图谱',       en: 'COMPETITION AXES',  tone: 'rose',   color: BRAND.ROSE,           icon: '⚔',
      summary: '保健品 ↔ OTC 药 ↔ 食品三轴 · 肝纯片无人地带坐标 · 6 竞品精对标' },
    { id: 7, num: '7', key: 'opportunity',title: '新机会 × 新场景 × 新人群', en: 'OPPORTUNITY', tone: 'green',  color: BRAND.JIANG_GREEN,    icon: '💡',
      summary: '3 条长尾赛道：DMY 教育 / 餐饮 B2B2C / 礼品孝心 · 每条带 VOC 证据链' },
    { id: 8, num: '8', key: 'blueprint',  title: '4P 配称蓝图',        en: '4P BLUEPRINT',      tone: 'green',  color: BRAND.SAGE,           icon: '🚀',
      summary: '产品 / 渠道 / 推广 / 价格 · 10 亿路径 · 药线 3亿 + 礼品 2.5亿 + 餐饮 2.5亿 + 电商 2亿' },
];

// ============================================================
// 各章节 subsections 清单
// ============================================================
const CHAPTER_SUBSECTIONS = {
    challenge: [
        'DMY 原料真力·但用户零认知',
        '海王金樽警示·硬广洗脑型失败案例',
        'VOC 反向验证·方法论起点',
    ],
    dmy: [
        '藤茶千年食饮史·为什么是天选之子',
        'DMY 总黄酮 98%·科学力解构',
        '水飞蓟"吸收差"反面对标',
        '可迁移 vs 必避陷阱·DMY 心智锚点',
    ],
    market: [
        '50 亿保健护肝·品类地图',
        '五大竞品心智·Swisse/易善复/葵花/片仔癀/海王金樽',
        '人群声量·脂肪肝×熬夜×应酬',
        '未满足需求·四象限空白地带',
    ],
    kano: [
        'KANO 五类·必备/期望/兴奋/无差异/反向',
        'JTBD·Functional 功能价值',
        'JTBD·Emotional 情绪价值',
        'JTBD·Social 社会价值',
        '决策优先级·SKU/话术/包装映射',
    ],
    scene: [
        '场景#1·应酬解酒·液体应急',
        '场景#2·脂肪肝调理·日常养护',
        '场景#3·熬夜前后·便携快取',
        '场景#4·送长辈·孝心礼品',
    ],
    competitor: [
        '三轴定位图谱·保健品/OTC 药/食品',
        '无人地带坐标·肝纯片独占位',
        '6 竞品精对标·VOC 差异化 MOAT',
    ],
    opportunity: [
        '新机会·DMY 电商认知养成',
        '新场景·餐饮 B2B2C 锡纸分食',
        '新人群·送长辈孝心礼盒',
    ],
    blueprint: [
        '4P 配称·产品+渠道+推广+价格',
        '10 亿路径·4 渠道 3 阶段',
    ],
};

// ============================================================
// 每章 hero line
// ============================================================
const CHAPTER_HERO_LINES = {
    challenge: `江中肝纯片握有 <strong style="color:${BRAND.TENGCHA_GREEN};">藤茶 DMY 总黄酮 98%</strong> 的原料真科学力，但用户既不认识"藤茶"、也不认识"二氢杨梅素"。与此同时，<strong style="color:${BRAND.CORAL};">海王金樽</strong>已经用硬广方式把"解酒"品类做成了<strong style="color:${BRAND.CORAL};">智商税叙事</strong>（VOC："老哒广告做得杠杠的[捂脸]"）——我们不能重蹈覆辙。本章直面困境：<strong style="color:${BRAND.LIVER_AMBER};">真差异化但零认知</strong>，必须先理解用户在想什么。`,

    dmy: `藤茶是<strong style="color:${BRAND.TENGCHA_GREEN};">中国西南地区被食饮了千年的草本</strong>（显齿蛇葡萄叶），其核心活性物 DMY（二氢杨梅素）总黄酮含量 <strong style="color:${BRAND.TENGCHA_GREEN};">高达 98%</strong>，远超水飞蓟宾（通常 30-80%）。对比水飞蓟在 XHS 和 Amazon 上 <strong style="color:${BRAND.CORAL};">"吸收差 / no effect / hidden additives"</strong> 的大量差评，DMY + 藤茶组合是<strong style="color:${BRAND.LIVER_AMBER};">护肝品类真正的"新大陆"</strong>——但必须用<strong style="color:${BRAND.JIANG_GREEN};">可迁移的心智锚点</strong>（<em>千年食饮史 → 安全 + 文化符号</em>）说服用户。`,

    market: `护肝保健赛道 <strong style="color:${BRAND.TECH_BLUE};">~50 亿</strong>（Swisse + 汤臣倍健 + 葵花 + 片仔癀 + 新锐国产） + OTC 胃肝药 <strong style="color:${BRAND.TECH_BLUE};">~100 亿</strong>（易善复 + 水飞蓟片 + 熊胆粉）。每一块都有明确的 VOC 痛点：Swisse 的<strong style="color:${BRAND.CORAL};">"价格贵+吸收差"</strong>、易善复的<strong style="color:${BRAND.CORAL};">"医嘱依赖+不能长期"</strong>、葵花/片仔癀的<strong style="color:${BRAND.CORAL};">"药味+保守形象"</strong>、海王金樽的<strong style="color:${BRAND.CORAL};">"广告+体感弱"</strong>。用户在 XHS/Amazon 的真实声音勾勒出四象限空白——那就是肝纯片的机会地图。`,

    kano: `不再用"4 渠道 × 5 模块"装饰理论。<strong style="color:${BRAND.PURPLE};">KANO 五类需求</strong>（必备 / 期望 / 兴奋 / 无差异 / 反向）逐个映射到 SKU / 包装 / 话术决策：<strong>必备</strong>=安全无副作用（避免易善复那种医嘱依赖感）、<strong>期望</strong>=真起效（避免 Swisse 吸收差差评）、<strong>兴奋</strong>=送得出手的礼盒心智、<strong>反向</strong>=药盒感 / 硬广感。<strong style="color:${BRAND.LIVER_AMBER};">JTBD 三维价值</strong>：F=肝功护养"不上头"、E=不焦虑转氨酶、S=饭局面子×孝心。`,

    scene: `<strong style="color:${BRAND.WARM_ORANGE};">时间 × 空间 × 触发事件</strong> 三元素交叉，肝纯片独占 <strong>应酬解酒 / 脂肪肝调理 / 熬夜前后 / 送长辈</strong> 四大场景——每个场景都在 XHS + 抖音有高赞 VOC 可做证据。其中 <strong style="color:${BRAND.WINE_RED};">应酬解酒场景</strong>最肥（抖音"醋真的解酒"2038 赞 = 土办法反向需求）；<strong style="color:${BRAND.GOLD};">送长辈场景</strong>最有溢价（空白品类 + 高客单价）。每个场景都有对应人群、话术、产品形态、定价方案。`,

    competitor: `<strong style="color:${BRAND.ROSE};">保健品 ↔ OTC 药 ↔ 食品</strong> 三轴定位图谱上，肝纯片的<strong style="color:${BRAND.LIVER_AMBER};">无人地带坐标</strong> = "<strong>保健品的温和</strong> × <strong>OTC 的信任</strong> × <strong>食品的便携</strong>"。直接对标 6 大竞品（Swisse / 易善复 / 葵花 / 片仔癀 / 海王金樽 / 熊胆粉）的 VOC 真差评，找出肝纯片的<strong style="color:${BRAND.JIANG_GREEN};">差异化 MOAT</strong>：真原料 + 千年食饮安全 + 不骂西药但走东方养生路径。`,

    opportunity: `基于 VOC 深挖，提炼 <strong style="color:${BRAND.JIANG_GREEN};">3 条可落地长尾赛道</strong>：<br/>① <strong>DMY / 藤茶电商认知养成</strong>（对标 Swisse 靠小红书起量的节奏）<br/>② <strong>餐饮 B2B2C 锡纸分食</strong>（白领酒局 + 餐厅分装，反向海王金樽硬广模型）<br/>③ <strong>送长辈孝心礼盒</strong>（对标东阿阿胶 / 黄芪精的"送胃 / 送气血"路径）。每条赛道配真实 VOC 证据 + 场景话术 + 规模预估。`,

    blueprint: `以 VOC 洞察反推 <strong style="color:${BRAND.SAGE};">4P 配称</strong>：<strong>产品</strong>（瓶装日常 / 板装便携 / 礼盒送长辈 12 SKU 矩阵）+ <strong>渠道</strong>（药线大参林 + 电商京东自营 + 餐饮B2B2C + 礼品节点）+ <strong>推广</strong>（KANO 兴奋需求 "送得出手" 钩子 + XHS 种草 + 抖音场景剧）+ <strong>价格</strong>（¥128-898 四带位）。3 阶段落地路径：<strong>Y1 药线 + 电商 5 亿验证 → Y2 礼品 + 餐饮 3 亿复制 → Y3 国际 + 品类升级 2 亿</strong>。合计 <strong style="color:${BRAND.JIANG_GREEN};">10 亿目标</strong>。`,
};

// ============================================================
// utils
// ============================================================
function sn(n) { return String(n).padStart(2, '0'); }

// ============================================================
// 共用组件（导航 / 键盘提示）
// ============================================================
function renderNav() {
    const dots = [
        { tip: '封面', href: '#s0' },
        { tip: '目录', href: '#agenda' },
        ...CHAPTERS.map((c) => ({ tip: `${c.num} ${c.title}`, href: `#${c.key}` })),
    ];
    return `<nav class="nav-rail" aria-label="章节导航">
    ${dots.map((d, i) => `<a class="nav-dot${i === 0 ? ' active' : ''}" href="${d.href}" data-tip="${esc(d.tip)}" data-idx="${i}"></a>`).join('')}
  </nav>
  <div class="top-bar">
    <div class="brand-logo">江中<span class="dot">·</span>产品开发部 / 肝纯片 VOC 深度洞察 v1.0</div>
    <div class="text-mono text-xs" style="color:var(--text-3);">DMY × 藤茶 / 10 亿目标 / 4 渠道 × 8 假设</div>
  </div>`;
}

function renderKbdHint() {
    return `<div class="kbd-hint" id="kbdHint">
    <span>键盘切换</span>
    <kbd>↑</kbd><kbd>↓</kbd>
    <span>或</span>
    <kbd>PgUp</kbd><kbd>PgDn</kbd>
  </div>`;
}

// ============================================================
// Slide 01 · Cover
// ============================================================
function renderCover({ product, collectedAt, slideNum, slideTotal, meta }) {
    const totalComments = meta?.comments || 0;
    const platformCount = Object.values(meta?.platforms || {}).filter((n) => n > 0).length;
    const productsCount = meta?.productsCount || 0;
    const notes = meta?.notes || 0;
    const stage = meta?.stage || 'skeleton';
    const tier = meta?.sourceTier || 'unknown';
    const isScaffold = stage === 'skeleton';
    const isReal = tier === 'real-collected';

    const sourceBadge = isReal
        ? { label: '真实采集 · 多平台评论颗粒度', color: BRAND.JIANG_GREEN, icon: '✓' }
        : { label: '骨架版 · 待 VOC 数据加载', color: BRAND.CORAL, icon: '○' };

    const commentsDisplay = isScaffold ? '待采集' : totalComments.toLocaleString();

    return `<section class="report-section" id="s0" data-tone="amber" data-slide-num="${slideNum}/${slideTotal}" style="min-height:100vh;padding:0;">
  <div class="cover-hero">
    <div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
    <div class="cover-grid-bg"></div>
    <div class="cover-content">
      <div class="cover-meta rise-in" style="display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;">
        <span>江中 / 产品开发部 / 2026 · ${esc(product)} · VOC 深度洞察</span>
        <span style="display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:${sourceBadge.color}15; color:${sourceBadge.color}; border:1px solid ${sourceBadge.color}55; border-radius:16px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; font-weight:600;">
          <span style="font-size:0.9rem;">${sourceBadge.icon}</span>${esc(sourceBadge.label)}
        </span>
      </div>
      <div class="cover-title-stack">
        <p class="text-mono text-amber rise-in" style="font-size:0.9rem;letter-spacing:0.2em;margin-bottom:18px;">DMY × KANO × JTBD × SCENE · 四维 VOC 验证</p>
        <h1 class="cover-title rise-in">${esc(product)}<br/><span style="color:${BRAND.LIVER_AMBER}; -webkit-text-fill-color:${BRAND.LIVER_AMBER}; background:none; font-size:0.66em;">VOC 深度洞察报告</span></h1>
        <p class="text-poster rise-in" style="margin-top:20px;color:var(--text-2); font-size:1.42rem;">
          藤茶 DMY 真原料差异化 · 如何让用户 <strong style="color:${BRAND.LIVER_AMBER};">从零认知到主动买单</strong>
        </p>
      </div>
      <p class="cover-sub fade-up">
        基于 <strong class="text-amber">0.基础调研.md + 1.VOC方向定位.md 会议确认</strong> 的"10 亿 × 4 渠道 × 5 模块"落地框架，
        以 <strong style="color:${BRAND.TENGCHA_GREEN};">藤茶 DMY 总黄酮 98%</strong> 的原料真力为起点，
        通过 <strong class="text-amber">KANO × JTBD × 场景四元素</strong> 理论模型 × <strong class="text-amber">${commentsDisplay}</strong> 条真实多平台<strong class="text-amber">评论颗粒度</strong> VOC 交叉验证，
        对标 <strong style="color:${BRAND.TECH_BLUE};">50 亿护肝保健 + 100 亿 OTC 胃肝药</strong> 的痛点地图，
        在 <strong style="color:${BRAND.ROSE};">保健品 ↔ OTC ↔ 食品三轴</strong> 找到肝纯片的<strong style="color:${BRAND.JIANG_GREEN};">无人地带</strong>，
        提炼 <strong style="color:${BRAND.LIVER_AMBER};">3 条长尾赛道</strong>，输出 <strong style="color:${BRAND.SAGE};">4P 配称蓝图</strong>，闭环 <strong style="color:${BRAND.JIANG_GREEN};">10 亿 · 4 渠道</strong> 路径。
      </p>
      <div class="cover-stats fade-up" style="grid-template-columns:repeat(6, 1fr); max-width:1100px;">
        <div class="cover-stat"><div class="num">10亿</div><div class="lbl">4 渠道目标</div></div>
        <div class="cover-stat"><div class="num">${commentsDisplay}</div><div class="lbl">真实 VOC</div></div>
        <div class="cover-stat"><div class="num">${isScaffold ? '3+' : platformCount}</div><div class="lbl">采集平台</div></div>
        <div class="cover-stat"><div class="num">8</div><div class="lbl">核心假设</div></div>
        <div class="cover-stat"><div class="num">${isScaffold ? '32+' : (productsCount || 32)}</div><div class="lbl">关键词维度</div></div>
        <div class="cover-stat"><div class="num">${slideTotal}</div><div class="lbl">slides</div></div>
      </div>
      <div class="fade-up" style="margin-top:32px; padding:14px 20px; background:${BRAND.LIVER_AMBER}08; border-left:3px solid ${BRAND.LIVER_AMBER}; border-radius:4px; max-width:920px; margin-left:auto; margin-right:auto; text-align:left;">
        <div class="text-mono text-xs" style="color:${BRAND.LIVER_AMBER}; letter-spacing:0.14em; margin-bottom:6px; font-weight:700;">DATA FOUNDATION · 数据底座</div>
        <p style="color:var(--text-2); font-size:0.82rem; line-height:1.6; margin:0;">
          本报告基于 <strong style="color:${BRAND.LIVER_AMBER};">docs/jiangzhong/raw/_merged.json</strong> 真实多平台采集：
          XHS <strong>${notes || '80'}</strong> 笔记 / <strong>${isScaffold ? '1515' : (meta?.platforms?.xhs || 0)}</strong> 评论 +
          抖音 <strong>${meta?.videos || '16'}</strong> 视频 / <strong>${isScaffold ? '627' : (meta?.platforms?.douyin || 0)}</strong> 评论 +
          Amazon <strong>${meta?.products_count || '30'}</strong> 产品 / <strong>${isScaffold ? '2577' : (meta?.platforms?.amazon || 0)}</strong> Reviews。
          每条 VOC 带 <code style="background:${BRAND.JIANG_GREEN}15; padding:1px 5px; border-radius:3px; color:${BRAND.JIANG_GREEN};">source=real-collected</code> 明确标识。
        </p>
      </div>
      <p class="text-mono text-xs fade-up" style="margin-top:40px; color:var(--text-3);">SCROLL DOWN · ${isScaffold ? 'Batch 1 · 骨架版 · 待逐章填充' : `采集截止 ${esc(collectedAt || '')} · ${commentsDisplay} 条真实 VOC`}</p>
    </div>
  </div>
</section>`;
}

// ============================================================
// Slide 02 · Agenda
// ============================================================
function renderAgenda({ slideNum, slideTotal }) {
    return `<section class="report-section" id="agenda" data-tone="amber" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow">CONTENTS · 8 章认知递进</div>
      <h2 class="text-h1"><span class="headline-anim">从诘问到蓝图 · DMY 真原料 × VOC 实证</span></h2>
      <p class="section-sub">按<strong class="text-amber">认知深度递进</strong>：① 诘问 → ② DMY 归因 → ③ 市场全景 → ④ KANO×JTBD → ⑤ 场景地图 → ⑥ 竞品三轴 → ⑦ 新机会 → ⑧ 4P 蓝图</p>
    </div>

    <div class="grid" style="grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:20px;">
      ${CHAPTERS.map((c, i) => `
      <a href="#${c.key}" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${c.color}; border-radius:var(--radius-md); padding:24px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='${c.color}'; this.style.boxShadow='0 20px 60px -20px ${c.color}55'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
        <div style="position:absolute; top:-18px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:8rem; line-height:1; color:${c.color}; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">${c.num}</div>
        <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:14px;">
          <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.18em; font-weight:700;">CH ${c.num} · ${c.en}</div>
          <div style="font-size:1.6rem; filter:grayscale(20%);">${c.icon}</div>
        </div>
        <h3 class="text-h2" style="margin:0 0 10px; color:var(--text-1); font-size:1.38rem;">${esc(c.title)}</h3>
        <p style="color:var(--text-2); font-size:0.88rem; line-height:1.6; margin-bottom:12px;">${esc(c.summary)}</p>
        <div style="display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px;">
          ${(CHAPTER_SUBSECTIONS[c.key] || []).slice(0, 5).map((sub, j) => `<span style="padding:3px 8px; background:${c.color}15; color:${c.color}; border-radius:3px; font-size:0.66rem; font-weight:600;">${c.num}.${j + 1} ${esc(sub.split('·')[0])}</span>`).join('')}
        </div>
        <div style="padding-top:12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
          <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
          <span class="text-mono text-xs" style="color:${c.color};">${i + 1} / ${CHAPTERS.length}</span>
        </div>
      </a>`).join('')}
    </div>

    <div class="fade-up" style="margin-top:44px; padding:22px 26px; background:linear-gradient(135deg, ${BRAND.LIVER_AMBER}10, ${BRAND.JIANG_GREEN}06); border:1px solid ${BRAND.LIVER_AMBER}22; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${BRAND.LIVER_AMBER}; letter-spacing:0.15em; margin-bottom:10px;">METHODOLOGY · 方法论自律</div>
      <div style="color:var(--text-1); font-size:0.98rem; line-height:1.72;">
        本报告严格遵循 《<strong style="color:${BRAND.LIVER_AMBER};">docs/jiangzhong/1.VOC方向定位.md</strong>》10 亿 × 4 渠道 × 5 模块 方法论：<br/>
        <strong style="color:${BRAND.CORAL};">❌ 不做</strong>：改配方主成分（DMY 为核心）、宣称治疗、装饰性理论图表、脱离 VOC 的拍脑袋推断；<br/>
        <strong style="color:${BRAND.JIANG_GREEN};">✅ 做</strong>：8 条核心假设 H1-H8 × 多平台 VOC 实证 × KANO × JTBD × 场景四元素 理论作决策工具 × 4 渠道 × 5 模块落地映射；<br/>
        每一个结论都附 <strong style="color:${BRAND.LIVER_AMBER};">真实用户原声</strong>（昵称 + IP + 点赞）+ <strong style="color:${BRAND.TECH_BLUE};">理论模型映射</strong> + <strong style="color:${BRAND.SAGE};">可落地决策项</strong> 三重验证。
      </div>
    </div>
  </div>
</section>`;
}

// ============================================================
// 章节 Divider（8 个）
// ============================================================
function renderChapterDivider({ chapter, slideNum, slideTotal }) {
    const c = chapter;
    const heroLine = CHAPTER_HERO_LINES[c.key] || c.summary;
    const subs = CHAPTER_SUBSECTIONS[c.key] || [];

    return `<section class="report-section" id="${c.key}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}" style="justify-content:center;">
  <div class="section-inner">
    <div class="rise-in" style="text-align:center; margin-bottom:40px;">
      <div style="font-family:var(--font-head); font-weight:900; font-size:clamp(5rem, 14vw, 11rem); line-height:0.9; color:${c.color}; opacity:0.12; letter-spacing:-0.06em;">0${c.num}</div>
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.3em; margin-top:-2rem; font-weight:700;">CHAPTER ${c.num} · ${c.en}</div>
    </div>
    <div class="rise-in" style="text-align:center; margin-bottom:36px;">
      <div style="font-size:3.2rem; margin-bottom:14px;">${c.icon}</div>
      <h2 class="text-poster" style="font-size:clamp(2.4rem, 5.2vw, 4.2rem); color:var(--text-1); letter-spacing:-0.025em;">${esc(c.title)}</h2>
      <p style="color:${c.color}; font-family:var(--font-mono); font-size:0.92rem; letter-spacing:0.18em; margin-top:12px; font-weight:600;">${c.en}</p>
    </div>
    <div class="fade-up" style="max-width:960px; margin:0 auto; text-align:center; padding:28px 32px; background:linear-gradient(135deg, ${c.color}0C, transparent); border-left:3px solid ${c.color}; border-radius:var(--radius-md);">
      <p style="color:var(--text-1); font-size:1.08rem; line-height:1.82;">${heroLine}</p>
    </div>
    <div class="fade-up" style="margin-top:40px; display:grid; grid-template-columns:repeat(${Math.min(subs.length, 5)}, 1fr); gap:14px; max-width:1100px; margin-left:auto; margin-right:auto;">
      ${subs.map((sub, i) => `
      <div style="padding:16px 14px; background:var(--bg-1); border:1px solid ${c.color}22; border-radius:var(--radius-sm); text-align:center;">
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:6px; font-weight:700;">${c.num}.${i + 1}</div>
        <div style="color:var(--text-1); font-size:0.86rem; line-height:1.5;">${esc(sub)}</div>
      </div>`).join('')}
    </div>
    <div class="fade-up" style="margin-top:48px; text-align:center;">
      <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.3em;">SCROLL DOWN · ${subs.length} 个子章 · VOC 实证 × 理论 × 决策</div>
    </div>
  </div>
</section>`;
}

// ============================================================
// 占位子章（Coming Soon 提示）· 展示本章涵盖的假设覆盖度
// ============================================================
function renderComingSoon({ chapter, subIdx, sub, slideNum, slideTotal, targetBatch, meta }) {
    const c = chapter;
    const hs = LA.CHAPTER_HYPOTHESIS_MAP[c.key] || [];
    const hsCount = hs.reduce((s, h) => s + (meta?.hypotheses?.[h] || 0), 0);

    return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.${subIdx} · ${esc((sub || '').split('·')[0].toUpperCase())}</div>
      <h2 class="text-h1"><span class="headline-anim">${esc(sub)}</span></h2>
      <p class="section-sub">此子章将在 <strong style="color:${c.color};">Batch ${targetBatch}</strong> 填充 VOC 证据卡 + 理论映射 + 决策项</p>
    </div>
    <div class="fade-up" style="margin-top:40px; padding:40px; background:${c.color}08; border:1px dashed ${c.color}55; border-radius:var(--radius-lg); text-align:center;">
      <div style="font-size:3.4rem; margin-bottom:18px;">🚧</div>
      <div class="text-h2" style="color:${c.color}; margin-bottom:12px;">Coming in Batch ${targetBatch}</div>
      ${hsCount ? `
      <div style="display:inline-flex; align-items:center; gap:10px; padding:8px 16px; background:${BRAND.JIANG_GREEN}12; color:${BRAND.JIANG_GREEN}; border:1px solid ${BRAND.JIANG_GREEN}44; border-radius:20px; margin-bottom:20px; font-family:var(--font-mono); font-size:0.82rem; font-weight:600;">
        <span>✓</span> 数据就绪 · ${hsCount} 条 ${hs.join('/')} 相关真实 VOC
      </div><br/>
      <p style="color:var(--text-2); font-size:0.92rem; max-width:680px; margin:0 auto; line-height:1.7;">
        docs/jiangzhong/raw/_merged.json 已就绪 <strong style="color:${BRAND.LIVER_AMBER};">${meta?.comments || 4719} 条真实 VOC</strong>（覆盖 H1-H8 × 3 平台 × 32 关键词），<br/>
        Batch ${targetBatch} 将基于本假设的 <strong style="color:${c.color};">${hsCount} 条</strong> 证据 + 理论工具，输出 <strong>证据卡 × 理论映射 × 决策项</strong>。
      </p>` : `
      <p style="color:var(--text-2); font-size:0.95rem; max-width:600px; margin:0 auto; line-height:1.7;">
        Batch ${targetBatch} 将基于已采集 VOC 数据填充本子章内容。
      </p>`}
    </div>
  </div>
</section>`;
}

// ============================================================
// 子章 → Batch 映射
// ============================================================
const SUB_TO_BATCH = {
    'challenge': 2, 'dmy': 2, 'market': 2,
    'kano': 3, 'scene': 3,
    'competitor': 4, 'opportunity': 4,
    'blueprint': 5,
};

// ============================================================
// 子章渲染器注册表（Batch 2+ 逐步注入）
// ============================================================
let SLIDE_RENDERERS = {};

// 可选的章节模块——文件存在才加载，不存在不阻塞骨架
function tryRequire(modPath) {
    try { return require(modPath); } catch (e) { return null; }
}

const CH1 = tryRequire('./liver-ch1-challenge.js');
const CH2 = tryRequire('./liver-ch2-dmy.js');
const CH3 = tryRequire('./liver-ch3-market.js');
const CH4 = tryRequire('./liver-ch4-kano.js');
const CH5 = tryRequire('./liver-ch5-scene.js');
const CH6 = tryRequire('./liver-ch6-competitor.js');
const CH7 = tryRequire('./liver-ch7-opportunity.js');
const CH8 = tryRequire('./liver-ch8-blueprint.js');

SLIDE_RENDERERS = {
    ...(CH1 || {}),
    ...(CH2 || {}),
    ...(CH3 || {}),
    ...(CH4 || {}),
    ...(CH5 || {}),
    ...(CH6 || {}),
    ...(CH7 || {}),
    ...(CH8 || {}),
};

// ============================================================
// buildHTML · 主装配
// ============================================================
function buildHTML({ product, collectedAt } = {}) {
    product = product || '江中肝纯片';
    collectedAt = collectedAt || new Date().toISOString().slice(0, 10);

    const data = LA.loadMerged();
    const meta = LA.getMeta(data);

    // slide 总数：2 (cover+agenda) + 每章 (1 divider + N 子章)
    let slideTotal = 2;
    for (const c of CHAPTERS) {
        slideTotal += 1 + (CHAPTER_SUBSECTIONS[c.key] || []).length;
    }

    const slides = [];
    let num = 1;

    slides.push(renderCover({ product, collectedAt, slideNum: sn(num), slideTotal: sn(slideTotal), meta }));
    num++;
    slides.push(renderAgenda({ slideNum: sn(num), slideTotal: sn(slideTotal) }));
    num++;

    for (const c of CHAPTERS) {
        slides.push(renderChapterDivider({ chapter: c, slideNum: sn(num), slideTotal: sn(slideTotal) }));
        num++;

        const subs = CHAPTER_SUBSECTIONS[c.key] || [];
        for (let i = 0; i < subs.length; i++) {
            const subIdx = i + 1;
            const subKey = `${c.key}-${subIdx}`;
            const renderer = SLIDE_RENDERERS[subKey];
            const slideCtx = {
                chapter: c,
                subIdx,
                sub: subs[i],
                slideNum: sn(num),
                slideTotal: sn(slideTotal),
                data,
                meta,
            };
            if (renderer) {
                slides.push(renderer(slideCtx));
            } else {
                slides.push(renderComingSoon({ ...slideCtx, targetBatch: SUB_TO_BATCH[c.key] || 2, meta }));
            }
            num++;
        }
    }

    return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>${esc(product)} · VOC 深度洞察报告 · DMY × 4 渠道</title>
${STYLES}
</head>
<body>
  ${renderNav()}
  ${renderKbdHint()}
  <div class="progress-line" id="progressLine"></div>
  <main class="deck">
${slides.join('\n')}
  </main>
  <script>${SCRIPTS}</script>
</body>
</html>`;
}

module.exports = {
    buildHTML,
    BRAND,
    CHAPTERS,
    CHAPTER_SUBSECTIONS,
    CHAPTER_HERO_LINES,
    SUB_TO_BATCH,
    renderCover,
    renderAgenda,
    renderChapterDivider,
    renderComingSoon,
};