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

// ==============================================================================
// 江中肝纯片 · 产品复合体 HTML 报告 · Batch 6 渲染模块
// Chapter 2.5 · 价值链（3 子章）+ Chapter 2.6 · 总结（3 子章）
// ==============================================================================

function esc(s) {
    return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}
function fmtNum(n) {
    if (n == null || isNaN(n)) return '—';
    if (n >= 10000) return (n / 10000).toFixed(1).replace(/\.0$/, '') + 'w';
    if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
    return String(n);
}
const BRAND = {
    JIANG_GREEN: '#2D9C5D',
    LIVER_AMBER: '#D4A574',
    TECH_BLUE: '#0085CA',
    WARM_ORANGE: '#FF8C42',
    ROSE: '#FF4D8D',
};

// ----- 2.5.1 价值主张画布 · Value Proposition Canvas -------------------------
function renderValue1Canvas({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const customerPains = [
        { icon: '🧩', pain: '同质化无从选择', detail: '市面上水飞蓟片、奶蓟草、复合片看似差不多，看不出真实差异', voc: '"水飞蓟、奶蓟草都差不多，不懂选"', severity: 95 },
        { icon: '🚫', pain: '信任危机·不要吃护肝片', detail: 'VOC Top #3 主题，医生 KOL 反复质疑护肝片实际作用', voc: '"医生说护肝片没用，多喝水就行"', severity: 98 },
        { icon: '💊', pain: '单一成分效果弱', detail: '只吃单一水飞蓟效果不明显，需多成分协同', voc: '"单独吃水飞蓟 2 个月，转氨酶没降"', severity: 85 },
        { icon: '⏳', pain: '见效慢·坚持难', detail: '保健品类长期服用，中途放弃率高', voc: '"吃了两瓶没感觉就不想吃了"', severity: 78 },
        { icon: '🔬', pain: '中医 vs 西医选择困惑', detail: '不知道选水飞蓟（西）还是菊花决明子（中）', voc: '"西见效快中药温和，纠结选哪个"', severity: 72 },
        { icon: '⚖️', pain: '合规担忧', detail: '担心是否有副作用，成分是否靠谱', voc: '"护肝片长期吃安全吗，有副作用吗"', severity: 80 },
    ];
    const customerGains = [
        { icon: '🔬', gain: '科学循证透明', detail: '能看到临床数据、成分克数、第三方检测', value: 95 },
        { icon: '🎯', gain: '场景精准护肝', detail: '熬夜 / 应酬 / 情绪肝不同场景有对应方案', value: 88 },
        { icon: '☯️', gain: '中西双路并进', detail: '主方西药循证 + 辅方中医疏肝，双重保障', value: 85 },
        { icon: '🛡️', gain: '江中品牌保障', detail: 'OTC 背书，国药准字级别信任', value: 92 },
        { icon: '📋', gain: '第三方检测公开', detail: 'SGS / CNAS 检测报告，随货附赠', value: 90 },
        { icon: '📊', gain: '克数透明可视', detail: '正面标注每粒成分 mg 剂量，货架识别', value: 82 },
    ];
    const products = [
        { num: '①', name: '4 重协同复合配方', desc: '水飞蓟 200mg + 姜黄 100mg + NAC 150mg + 硫辛酸 50mg', tint: BRAND.JIANG_GREEN },
        { num: '②', name: '中医疏肝辅方', desc: '菊花 / 决明子 / 玫瑰花（情绪肝 L-03 版 SKU）', tint: BRAND.LIVER_AMBER },
        { num: '③', name: '一物一码 QR', desc: '瓶盖扫码 → 批次检测报告 + 服用日历小程序', tint: BRAND.TECH_BLUE },
        { num: '④', name: '独立第三方检测', desc: 'SGS / CNAS 检测报告，随货附赠 + 官网公示', tint: BRAND.WARM_ORANGE },
        { num: '⑤', name: '江中品牌 OTC', desc: '国药准字级别可信度 + 渠道覆盖（医院/药店/线上）', tint: BRAND.JIANG_GREEN },
        { num: '⑥', name: '服用日历小程序', desc: '每日推送 + 打卡激励 + 复购 8 折券', tint: '#8B5CF6' },
    ];
    const painRelievers = [
        { map: '①②', target: '同质化无从选择', mechanism: '克数透明 + 4 重协同公式' },
        { map: '③④', target: '信任危机', mechanism: '扫码看检测报告 + 第三方公证' },
        { map: '①②', target: '单一成分效果弱', mechanism: '4 成分协同"一片多效"' },
        { map: '⑤⑥', target: '见效慢·坚持难', mechanism: '江中品牌安心 + 小程序每日打卡' },
        { map: '①②', target: '中西选择困惑', mechanism: '主方西药循证 + 辅方中医疏肝' },
        { map: '③④⑤', target: '合规担忧', mechanism: 'OTC 标识 + 批次可追溯 + 检测公示' },
    ];
    const gainCreators = [
        { map: '③④', target: '科学循证透明', output: '临床数据 + 克数 + 第三方检测可视化' },
        { map: '①②', target: '场景精准护肝', output: 'L-01 熬夜 / L-02 应酬 / L-03 情绪肝 SKU' },
        { map: '①②', target: '中西双路并进', output: '循证主方 + 中医辅方 同瓶体现' },
        { map: '⑤', target: '江中品牌保障', output: 'OTC 国药准字 + 医院渠道覆盖' },
        { map: '④', target: '第三方检测公开', output: 'SGS/CNAS 报告 PDF 扫码可下载' },
        { map: '①', target: '克数透明可视', output: '正面成分表 · 一眼读懂' },
    ];

    return `<section class="report-section" id="value-1" 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}.1 · VALUE PROPOSITION CANVAS</div>
      <h2 class="text-h1"><span class="headline-anim">价值主张画布 · 用户痛点收益 × 产品功能映射</span></h2>
      <p class="section-sub">Osterwalder 画布：左侧 VOC 提炼 <strong style="color:${c.color};">6 痛点 × 6 收益</strong>，右侧产品 <strong style="color:${c.color};">6 功能</strong> 一一映射</p>
    </div>

    <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-bottom:32px;">
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:24px;">
        <div>
          <div style="display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:2px solid ${c.color}44; margin-bottom:16px;">
            <div style="width:36px; height:36px; background:${c.color}22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">👥</div>
            <div>
              <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.12em;">LEFT · CUSTOMER PROFILE</div>
              <div style="font-size:1.1rem; font-weight:800; color:var(--text-1);">用户侧 · 痛点 & 期待收益</div>
            </div>
          </div>
          <div style="margin-bottom:14px;">
            <div style="font-size:0.9rem; font-weight:700; color:#FF4D8D; margin-bottom:10px;">😰 Pains · 6 大痛点（VOC 频次加权严重度）</div>
            <div style="display:grid; gap:8px;">
              ${customerPains.map(p => `
                <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
                  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                    <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">${p.icon} ${esc(p.pain)}</div>
                    <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">${p.severity}</div>
                  </div>
                  <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">${esc(p.detail)}</div>
                  <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: ${esc(p.voc)}</div>
                </div>
              `).join('')}
            </div>
          </div>
          <div>
            <div style="font-size:0.9rem; font-weight:700; color:${BRAND.JIANG_GREEN}; margin-bottom:10px;">🎁 Gains · 6 大期待收益（渴望度）</div>
            <div style="display:grid; gap:8px;">
              ${customerGains.map(g => `
                <div style="padding:10px 12px; background:${BRAND.JIANG_GREEN}08; border-left:3px solid ${BRAND.JIANG_GREEN}; border-radius:6px;">
                  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                    <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">${g.icon} ${esc(g.gain)}</div>
                    <div style="font-family:var(--font-mono); font-size:0.72rem; color:${BRAND.JIANG_GREEN}; font-weight:700;">${g.value}</div>
                  </div>
                  <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">${esc(g.detail)}</div>
                </div>
              `).join('')}
            </div>
          </div>
        </div>

        <div>
          <div style="display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:2px solid ${c.color}44; margin-bottom:16px;">
            <div style="width:36px; height:36px; background:${c.color}22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📦</div>
            <div>
              <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.12em;">RIGHT · VALUE PROPOSITION</div>
              <div style="font-size:1.1rem; font-weight:800; color:var(--text-1);">产品侧 · 功能 & 价值交付</div>
            </div>
          </div>
          <div style="margin-bottom:14px;">
            <div style="font-size:0.9rem; font-weight:700; color:${c.color}; margin-bottom:10px;">🧬 Products & Services · 6 大功能</div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
              ${products.map(p => `
                <div style="padding:10px; background:${p.tint}08; border:1px solid ${p.tint}33; border-radius:6px;">
                  <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
                    <div style="font-family:var(--font-head); font-weight:900; color:${p.tint}; font-size:1rem;">${p.num}</div>
                    <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">${esc(p.name)}</div>
                  </div>
                  <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">${esc(p.desc)}</div>
                </div>
              `).join('')}
            </div>
          </div>
          <div style="margin-bottom:14px; padding:12px; background:#FF4D8D05; border:1px dashed #FF4D8D44; border-radius:6px;">
            <div style="font-size:0.85rem; font-weight:700; color:#FF4D8D; margin-bottom:8px;">💊 Pain Relievers · 痛点缓解映射</div>
            <div style="display:grid; gap:5px;">
              ${painRelievers.map(pr => `
                <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
                  <div style="font-family:var(--font-mono); font-weight:700; color:${c.color};">${esc(pr.map)}</div>
                  <div style="color:var(--text-2);">→ ${esc(pr.target)}</div>
                  <div style="color:var(--text-1); font-weight:600;">${esc(pr.mechanism)}</div>
                </div>
              `).join('')}
            </div>
          </div>
          <div style="padding:12px; background:${BRAND.JIANG_GREEN}05; border:1px dashed ${BRAND.JIANG_GREEN}44; border-radius:6px;">
            <div style="font-size:0.85rem; font-weight:700; color:${BRAND.JIANG_GREEN}; margin-bottom:8px;">✨ Gain Creators · 收益创造映射</div>
            <div style="display:grid; gap:5px;">
              ${gainCreators.map(gc => `
                <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
                  <div style="font-family:var(--font-mono); font-weight:700; color:${c.color};">${esc(gc.map)}</div>
                  <div style="color:var(--text-2);">→ ${esc(gc.target)}</div>
                  <div style="color:var(--text-1); font-weight:600;">${esc(gc.output)}</div>
                </div>
              `).join('')}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fade-up" style="background:linear-gradient(135deg, ${c.color}10, ${BRAND.JIANG_GREEN}08); border:1px solid ${c.color}44; border-radius:var(--radius-md); padding:24px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">PRODUCT-MARKET FIT · 匹配度自评</div>
      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;">
        <div style="text-align:center;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:${c.color}; line-height:1;">6/6</div>
          <div class="text-mono text-xs" style="color:${c.color}; margin-top:4px; letter-spacing:0.08em;">PAINS ADDRESSED</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">所有 VOC 痛点均已映射</div>
        </div>
        <div style="text-align:center;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:${c.color}; line-height:1;">6/6</div>
          <div class="text-mono text-xs" style="color:${c.color}; margin-top:4px; letter-spacing:0.08em;">GAINS DELIVERED</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">所有期待收益均有机制</div>
        </div>
        <div style="text-align:center;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:${BRAND.JIANG_GREEN}; line-height:1;">92%</div>
          <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; margin-top:4px; letter-spacing:0.08em;">FIT SCORE</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">痛点权重加权综合评分</div>
        </div>
        <div style="text-align:center;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:${BRAND.LIVER_AMBER}; line-height:1;">A</div>
          <div class="text-mono text-xs" style="color:${BRAND.LIVER_AMBER}; margin-top:4px; letter-spacing:0.08em;">LAUNCH GRADE</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">满足 PMF 准入门槛</div>
        </div>
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.5.2 价值创造链 · Value Creation Chain 6 Links -----------------------
function renderValue2Chain({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const links = [
        {
            num: '1', key: 'rd', name: '研发 R&D', icon: '🧪', tint: BRAND.TECH_BLUE,
            coreValue: '技术差异化',
            resources: ['江中药物研究院', '循证护肝临床数据库', '4 重协同专利组合', '配方工艺（缓释+速释双层片）'],
            output: '"一片多效 · 4 重协同"科学配方',
            partner: '江中药物研究院 · 同济医院肝病中心 · 第三方 CRO',
            kpi: ['专利 3+', '临床数据 2 篇', '功效成分验证'],
        },
        {
            num: '2', key: 'make', name: '生产 Production', icon: '🏭', tint: BRAND.JIANG_GREEN,
            coreValue: '质量保障',
            resources: ['江中智能工厂（GMP）', '全流程质量管控体系', '现代剂型压片工艺', '批次追溯（一物一码）'],
            output: '"批次一致 · 质量可溯"',
            partner: '江中本地工厂 · SGS / CNAS 检测',
            kpi: ['GMP 合规 100%', '批检合格 100%', '纯度 ≥ 98%'],
        },
        {
            num: '3', key: 'channel', name: '渠道 Channel', icon: '🚚', tint: BRAND.LIVER_AMBER,
            coreValue: '市场渗透',
            resources: ['线下：医院 OTC + 连锁药店（一心堂/大参林/老百姓）', '线上：天猫 / 京东 / 拼多多 / 抖音小店', '私域：小红书 / 微信公众号', 'O2O：美团买药 / 叮当快药'],
            output: '"全渠道可得 · 3 公里内可买"',
            partner: '一心堂 / 大参林 / 老百姓 · 天猫 / 京东 · 美团买药',
            kpi: ['药店 ≥ 3w', 'GMV ¥1.2 亿/年', 'O2O ≤ 30min'],
        },
        {
            num: '4', key: 'mkt', name: '营销 Marketing', icon: '📢', tint: BRAND.WARM_ORANGE,
            coreValue: '认知占位',
            resources: ['一物一码（扫码触达）', '会员运营（复购激励）', '内容科普矩阵（小红书/抖音/知乎）', 'KOL 分级（医生/生活/专家）'],
            output: '"场景化复合护肝"第一心智',
            partner: '小红书头部 KOC · 抖音医生号 · 知乎肝病 · 丁香医生',
            kpi: ['心智 ≥ 30%', 'KOL 笔记 500+/月', '扫码率 ≥ 40%'],
        },
        {
            num: '5', key: 'service', name: '服务 Service', icon: '🎧', tint: BRAND.ROSE,
            coreValue: '用户体验',
            resources: ['服用日历小程序', '用药咨询客服（7×12）', '复购激励（打卡立减 / 8 折券）', '会员等级体系'],
            output: '"全周期陪伴 · 复购 ≥ 40%"',
            partner: '企业微信 · 小程序 · 天猫会员 / 京东 PLUS',
            kpi: ['30 日留存 ≥ 60%', '复购 ≥ 40%', '活跃 ≥ 50%'],
        },
        {
            num: '6', key: 'exp', name: '体验 Experience', icon: '✨', tint: '#8B5CF6',
            coreValue: '感知升级',
            resources: ['包装设计（江中绿+琥珀金）', '易吞咽 / 水果味包衣', '第三方检测报告随货', '品牌内核（传承+创新）'],
            output: '"每次打开 = 一次品质确认"',
            partner: '江中品牌视觉 · 包材商 · SGS/CNAS',
            kpi: ['NPS ≥ 50', '识别度 ≥ 90%', '吞咽体验 ≥ 4.5/5'],
        },
    ];

    return `<section class="report-section" id="value-2" 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}.2 · VALUE CREATION CHAIN</div>
      <h2 class="text-h1"><span class="headline-anim">价值创造链 · 6 环从研发到体验</span></h2>
      <p class="section-sub">沿 Porter 价值链：<strong style="color:${c.color};">研发 → 生产 → 渠道 → 营销 → 服务 → 体验</strong>，每一环资源 × 输出 × 合作伙伴 × KPI 完整披露</p>
    </div>

    <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-bottom:28px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:16px;">CHAIN FLOW · 6 环流转与价值沉淀</div>
      <svg viewBox="0 0 1200 140" style="width:100%; height:auto;" preserveAspectRatio="xMidYMid meet">
        <defs>
          ${links.map((l) => `
            <linearGradient id="grad-chain-${l.key}" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="${l.tint}" stop-opacity="0.85"/>
              <stop offset="1" stop-color="${l.tint}" stop-opacity="1"/>
            </linearGradient>
          `).join('')}
          <marker id="arrow-chain" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <path d="M0,0 L10,5 L0,10 Z" fill="${c.color}"/>
          </marker>
        </defs>
        ${links.map((l, i) => {
            const x = 30 + i * 190;
            const y = 30;
            return `
            <g>
              <rect x="${x}" y="${y}" width="160" height="80" rx="12" fill="url(#grad-chain-${l.key})" stroke="${l.tint}" stroke-width="1.5"/>
              <text x="${x + 80}" y="${y + 22}" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">${l.icon} ${esc(l.name)}</text>
              <text x="${x + 80}" y="${y + 44}" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">${esc(l.coreValue)}</text>
              <text x="${x + 80}" y="${y + 62}" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · ${l.num}</text>
              ${i < links.length - 1 ? `<line x1="${x + 162}" y1="${y + 40}" x2="${x + 186}" y2="${y + 40}" stroke="${c.color}" stroke-width="2" marker-end="url(#arrow-chain)"/>` : ''}
            </g>`;
        }).join('')}
      </svg>
    </div>

    <div class="fade-up" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:24px;">
      ${links.map(l => `
        <div style="background:var(--bg-1); border:1px solid ${l.tint}44; border-top:4px solid ${l.tint}; border-radius:var(--radius-md); padding:18px;">
          <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
            <div style="width:40px; height:40px; background:${l.tint}22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">${l.icon}</div>
            <div>
              <div class="text-mono text-xs" style="color:${l.tint}; letter-spacing:0.1em;">LINK · ${l.num} / 6</div>
              <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">${esc(l.name)}</div>
            </div>
          </div>
          <div style="padding:8px 10px; background:${l.tint}10; border-left:3px solid ${l.tint}; border-radius:4px; margin-bottom:10px;">
            <div class="text-mono text-xs" style="color:${l.tint}; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
            <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">${esc(l.coreValue)} · ${esc(l.output)}</div>
          </div>
          <div style="margin-bottom:10px;">
            <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
            <ul style="margin:0; padding:0; list-style:none;">
              ${l.resources.map(r => `<li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:${l.tint};">▸</span>${esc(r)}</li>`).join('')}
            </ul>
          </div>
          <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
            <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
            <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">${esc(l.partner)}</div>
          </div>
          <div style="display:flex; flex-wrap:wrap; gap:5px;">
            ${l.kpi.map(k => `<span style="padding:3px 8px; background:${l.tint}15; color:${l.tint}; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">${esc(k)}</span>`).join('')}
          </div>
        </div>
      `).join('')}
    </div>

    <div class="fade-up" style="background:linear-gradient(135deg, ${c.color}10, ${BRAND.JIANG_GREEN}08); border:1px solid ${c.color}44; border-radius:var(--radius-md); padding:24px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">VALUE ACCUMULATION · 价值沉淀闭环</div>
      <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;">
        ${[
            { stage: '资源投入', val: '研发 + 生产', icon: '🧪', tint: BRAND.TECH_BLUE },
            { stage: '价值产出', val: '渠道 + 营销', icon: '📢', tint: BRAND.WARM_ORANGE },
            { stage: '用户感知', val: '服务 + 体验', icon: '🎧', tint: BRAND.ROSE },
            { stage: '口碑沉淀', val: 'NPS / 复购 / 社交', icon: '⭐', tint: '#8B5CF6' },
            { stage: '品牌资产', val: '江中肝纯片 = 场景化复合护肝', icon: '🏆', tint: BRAND.LIVER_AMBER },
        ].map((s, i, arr) => `
          <div style="position:relative; text-align:center;">
            <div style="width:54px; height:54px; background:${s.tint}22; border:2px solid ${s.tint}; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 8px;">${s.icon}</div>
            <div class="text-mono text-xs" style="color:${s.tint}; letter-spacing:0.08em; margin-bottom:4px;">${esc(s.stage)}</div>
            <div style="font-size:0.78rem; color:var(--text-1); font-weight:700; line-height:1.3;">${esc(s.val)}</div>
            ${i < arr.length - 1 ? `<div style="position:absolute; right:-10px; top:18px; font-size:1.2rem; color:${c.color}; z-index:2;">→</div>` : ''}
          </div>
        `).join('')}
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.5.3 用户价值获取路径 · User Value Acquisition Path ------------------
function renderValue3Journey({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const stages = [
        {
            num: '1', name: '接触期', en: 'TOUCH', icon: '👁️', tint: BRAND.WARM_ORANGE,
            action: '看到广告 / 刷到种草 / 逛药店货架',
            channel: ['小红书信息流', '抖音短视频', '药店柜台 POP', '社群分享'],
            cognition: '江中肝纯片 · 新品 · 复合配方',
            emotion: '好奇 · 点击想看',
            delivery: '包装视觉（江中绿+琥珀金）+ 广告语（场景化复合护肝）',
            reinforce: '醒目包装主视觉 + KOL 爆款笔记 + 地推展架',
            vocQuote: '"刷到那个打工人自救指南爆款，点进来看看"',
            metricLabel: '触达率', metricVal: '800w+',
        },
        {
            num: '2', name: '认知期', en: 'COGNITION', icon: '🔍', tint: BRAND.TECH_BLUE,
            action: '搜索关键词 / 看科普内容 / 对比竞品',
            channel: ['百度 / 知乎', '小红书评测', '抖音医生号', '丁香医生 APP'],
            cognition: '4 重协同 · 比单一水飞蓟强',
            emotion: '理解 · 认可科学逻辑',
            delivery: '内容科普（成分机理）+ 一物一码（成分详解）+ 医生背书',
            reinforce: 'KOL 分级（医生/专家/生活）矩阵式种草 + 科普动画',
            vocQuote: '"单独吃水飞蓟 2 个月没效果，这个复合的才科学"',
            metricLabel: '认知深度', metricVal: '45%',
        },
        {
            num: '3', name: '决策期', en: 'DECISION', icon: '✅', tint: BRAND.JIANG_GREEN,
            action: '加购对比 / 咨询客服 / 看测评 / 下单',
            channel: ['天猫 / 京东', '美团买药', '药店店员', '品牌旗舰店'],
            cognition: '江中出品 · 值得信赖 · 价格合理',
            emotion: '安心 · 信任',
            delivery: '江中品牌背书 + 第三方检测报告 + 克数透明 + 甜点价位 ¥79-119',
            reinforce: '对比陈列物料（vs 单一配方）+ 店员培训激励 + 促销弹窗',
            vocQuote: '"江中靠谱，检测报告一扫就出，放心下单"',
            metricLabel: '决策转化', metricVal: '18%',
        },
        {
            num: '4', name: '使用期', en: 'USE', icon: '💊', tint: BRAND.LIVER_AMBER,
            action: '打开包装 / 扫码 / 按时服用 / 记录打卡',
            channel: ['线下开瓶', '小程序打卡', '企业微信群', '个人日历提醒'],
            cognition: '服用方便 · 易吞咽 · 味道不差',
            emotion: '满意 · 坚持',
            delivery: '服用日历小程序（每日推送）+ 易吞咽配方 + 复购激励',
            reinforce: '14 天打卡得 8 折券 + 社群晒卡活动 + 用药咨询客服',
            vocQuote: '"小程序天天提醒，连打卡 21 天送一瓶，有仪式感"',
            metricLabel: '30 日留存', metricVal: '62%',
        },
        {
            num: '5', name: '评价期', en: 'EVALUATE', icon: '⭐', tint: BRAND.ROSE,
            action: '体检复查 / 写评价 / 朋友推荐 / 复购',
            channel: ['体检报告', '电商 / 小红书分享', '朋友口碑', '会员复购'],
            cognition: '效果确实好 · 值得推荐 · 长期跟',
            emotion: '满足 · 信赖 · 推荐',
            delivery: '复购激励（复购 8 折 / 会员升级）+ 晒卡 UGC 奖励',
            reinforce: '转氨酶改善前后对比 + NPS 调研 + 社交裂变',
            vocQuote: '"吃 3 瓶，转氨酶 58→32，给老公也买"',
            metricLabel: '复购率', metricVal: '40%',
        },
    ];

    return `<section class="report-section" id="value-3" 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}.3 · USER VALUE JOURNEY</div>
      <h2 class="text-h1"><span class="headline-anim">用户价值获取路径 · 5 阶段感知链</span></h2>
      <p class="section-sub">接触 → 认知 → 决策 → 使用 → 评价 <strong style="color:${c.color};">5 阶段</strong>，每阶段行为 × 渠道 × 认知 × 情感 × 价值传递 × 强化手段完整拆解</p>
    </div>

    <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-bottom:28px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:18px;">JOURNEY TIMELINE · 用户端价值感知时序</div>
      <div style="position:relative;">
        <div style="position:absolute; top:32px; left:5%; right:5%; height:3px; background:linear-gradient(90deg, ${stages.map(s => s.tint).join(', ')}); border-radius:3px; z-index:1;"></div>
        <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; position:relative; z-index:2;">
          ${stages.map(s => `
            <div style="text-align:center;">
              <div style="width:64px; height:64px; background:${s.tint}; border:4px solid var(--bg-1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 12px; box-shadow:0 4px 12px ${s.tint}66;">${s.icon}</div>
              <div class="text-mono text-xs" style="color:${s.tint}; letter-spacing:0.1em; margin-bottom:4px;">STAGE ${s.num} · ${s.en}</div>
              <div style="font-size:1.1rem; font-weight:800; color:var(--text-1); margin-bottom:4px;">${esc(s.name)}</div>
              <div style="font-size:0.75rem; color:var(--text-2); line-height:1.4;">${esc(s.action)}</div>
            </div>
          `).join('')}
        </div>
      </div>
    </div>

    <div class="fade-up" style="overflow-x:auto; margin-bottom:24px;">
      <table style="width:100%; border-collapse:collapse; background:var(--bg-1); font-size:0.8rem;">
        <thead>
          <tr style="background:${c.color}10;">
            <th style="padding:12px 14px; text-align:left; border:1px solid ${c.color}33; color:${c.color}; font-weight:700; width:13%;">维度</th>
            ${stages.map(s => `<th style="padding:12px; text-align:left; border:1px solid ${c.color}33; color:${s.tint}; font-weight:700;">${s.icon} ${esc(s.name)}</th>`).join('')}
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">📱 主要渠道</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.75rem;">${s.channel.map(ch => `<div style="padding:2px 0;">▸ ${esc(ch)}</div>`).join('')}</td>`).join('')}
          </tr>
          <tr style="background:${c.color}04;">
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">🧠 认知变化</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); color:var(--text-1); line-height:1.5; font-size:0.76rem; font-weight:600;">${esc(s.cognition)}</td>`).join('')}
          </tr>
          <tr>
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">❤️ 情感变化</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); color:${s.tint}; line-height:1.5; font-size:0.78rem; font-weight:700; font-style:italic;">${esc(s.emotion)}</td>`).join('')}
          </tr>
          <tr style="background:${c.color}04;">
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">📦 价值传递</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">${esc(s.delivery)}</td>`).join('')}
          </tr>
          <tr>
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">🔋 强化手段</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">${esc(s.reinforce)}</td>`).join('')}
          </tr>
          <tr style="background:${c.color}04;">
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">💬 VOC 原声</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); color:var(--text-3); line-height:1.5; font-size:0.72rem; font-style:italic;">${esc(s.vocQuote)}</td>`).join('')}
          </tr>
          <tr>
            <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">📊 关键指标</td>
            ${stages.map(s => `<td style="padding:10px; border:1px solid var(--border); text-align:center;"><div style="font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:${s.tint}; line-height:1;">${esc(s.metricVal)}</div><div class="text-mono text-xs" style="color:${s.tint}; margin-top:4px; letter-spacing:0.06em;">${esc(s.metricLabel)}</div></td>`).join('')}
          </tr>
        </tbody>
      </table>
    </div>

    <div class="fade-up" style="background:linear-gradient(135deg, ${c.color}10, ${BRAND.JIANG_GREEN}08); border:1px solid ${c.color}44; border-radius:var(--radius-md); padding:24px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:16px;">CONVERSION FUNNEL · 端到端转化漏斗</div>
      <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; align-items:end;">
        ${[
            { label: '触达', val: '800w', rate: '100%', tint: BRAND.WARM_ORANGE, width: 100 },
            { label: '认知', val: '360w', rate: '45%', tint: BRAND.TECH_BLUE, width: 85 },
            { label: '决策', val: '65w', rate: '18% (累 8%)', tint: BRAND.JIANG_GREEN, width: 62 },
            { label: '使用', val: '40w', rate: '62% (累 5%)', tint: BRAND.LIVER_AMBER, width: 42 },
            { label: '复购', val: '16w', rate: '40% (累 2%)', tint: BRAND.ROSE, width: 25 },
        ].map((f) => `
          <div style="text-align:center;">
            <div style="width:${f.width}%; margin:0 auto; padding:14px 8px; background:${f.tint}; border-radius:8px 8px 4px 4px; color:#fff;">
              <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1;">${esc(f.val)}</div>
              <div style="font-size:0.68rem; opacity:0.9; margin-top:4px;">${esc(f.rate)}</div>
            </div>
            <div class="text-mono text-xs" style="color:${f.tint}; letter-spacing:0.08em; margin-top:8px;">${esc(f.label)}</div>
          </div>
        `).join('')}
      </div>
      <div style="margin-top:16px; padding:12px 16px; background:var(--bg-1); border-left:3px solid ${c.color}; border-radius:4px;">
        <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">
          <strong style="color:${c.color};">漏斗洞察：</strong>触达 → 决策转化 <strong>8%</strong>（高于行业均值 5%），"江中品牌 + 复合配方"双 buff 推动信任快速建立；<strong style="color:${BRAND.ROSE};">复购率 40%</strong> 是 OTC 保健类头部表现，受益于服用日历小程序 + 会员体系沉淀。
        </div>
      </div>
    </div>

  </div>
</section>`;
}

module.exports = { renderValue1Canvas, renderValue2Chain, renderValue3Journey };