fmode-voc-projects/scripts/tools/houguyin-ch1-landscape.js

// 江中猴菇饮 · Ch1 胃病人群全景（3 子章）
//   1.1 2.5亿胃病人群 · 5级症状谱 × 产品对应
//   1.2 产品竞争格局 · 100亿市场拆解 × 代表品牌
//   1.3 用户决策路径 · 从症状到产品选择的真实链路

const HGY = require('./houguyin-analyze.js');
const C = require('./houguyin-components.js');

const { BRAND, esc, renderVocCard, renderVocGrid, renderInsightHero, renderDecisionList, renderTheoryBox, renderTagCloud, renderStatStrip, renderBarChart, renderMatrix2x2, renderSectionHead } = C;

// ================================================================
// 1.1 · 2.5亿胃病人群 · 5级症状谱 × 产品对应
// ================================================================
function renderSub1_1(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal, data } = ctx;
    const items = data.items || [];

    // VOC 证据：各层用户的真实声音
    const ppiVoc = HGY.getEvidence(items, { hypothesis: 'H3', product: '奥美拉唑', top: 2, seed: 3 });
    const tcmVoc = HGY.getEvidence(items, { hypothesis: 'H3', product: '三九胃泰', top: 2, seed: 7 });
    const foodVoc = HGY.getEvidence(items, { hypothesis: 'H1', product: '猴姑米稀', top: 2, seed: 11 });
    const allVoc = [...ppiVoc, ...tcmVoc, ...foodVoc].filter(Boolean).slice(0, 6);
    const fallback = HGY.getEvidence(items, { hypothesis: 'H3', top: 6, seed: 19 });
    const finalVoc = allVoc.length >= 4 ? allVoc : fallback;

    // 5级症状谱
    const layers = [
        { level: 5, severity: '危重', color: '#C62828', symptoms: '胃溃疡出血/穿孔、HP 三联治疗、胃癌术后',
          products: '处方 PPI 静脉 + 三联/四联疗法 + 手术', users: '~500万', behavior: '必须看医生，无自主选择' },
        { level: 4, severity: '重度', color: '#E53935', symptoms: '反流性食管炎、糜烂性胃炎、持续性胃痛',
          products: '处方 PPI（艾司奥美拉唑）/ 莫沙必利 / 铋剂', users: '~2000万', behavior: '医生开什么吃什么' },
        { level: 3, severity: '中度', color: BRAND.WARM_ORANGE, symptoms: '慢性浅表性胃炎、胃酸过多、消化不良反复',
          products: 'OTC PPI（奥美拉唑）/ 达喜（铝碳酸镁）/ 三九胃泰 / 摩罗丹', users: '~8000万', behavior: '自己买药，反复吃，焦虑副作用' },
        { level: 2, severity: '轻度', color: BRAND.HOUGU_TAN, symptoms: '偶发胃胀、饭后不适、应酬后胃难受',
          products: '健胃消食片 / 吗丁啉 / 山楂丸 / 食疗偏方', users: '~1亿', behavior: '偶尔吃，不当回事' },
        { level: 1, severity: '亚健康', color: BRAND.SAGE, symptoms: '无明显症状但饮食不规律/压力大/熬夜多',
          products: '几乎无产品（米稀/酸奶/养胃粥）', users: '~5000万+', behavior: '知道该养但没行动' },
    ];

    return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    ${renderSectionHead({
        eyebrow: `${c.num}.${subIdx} · 胃病人群全景`,
        title: '<span style="color:' + BRAND.TECH_BLUE + ';">2.5 亿</span>胃病人群 · 5 级症状谱 × 产品对应',
        subtitle: '以整个胃病人群为目标，按病症<strong>由重到轻</strong>分 5 级——每一级用户现在在用什么产品，行为模式是什么。',
        color: BRAND.TECH_BLUE,
    })}

    <div style="margin-top:24px; display:flex; flex-direction:column; gap:0;">
      ${layers.map((l, i) => `
      <div style="display:grid; grid-template-columns:80px 1.2fr 1.4fr 100px 1fr; gap:0; align-items:stretch; border-bottom:${i < layers.length - 1 ? '1px solid var(--border)' : 'none'}; ${i === 0 ? 'border-top:2px solid var(--border);' : ''}">
        <div style="padding:16px 12px; background:${l.color}12; display:flex; flex-direction:column; align-items:center; justify-content:center; border-left:4px solid ${l.color};">
          <div style="font-family:var(--font-head); font-weight:900; font-size:1.8rem; color:${l.color}; line-height:1;">${l.level}</div>
          <div style="font-size:0.72rem; color:${l.color}; font-weight:700; margin-top:4px;">${esc(l.severity)}</div>
        </div>
        <div style="padding:14px 16px;">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:4px;">典型症状</div>
          <div style="color:var(--text-1); font-size:0.88rem; line-height:1.6; font-weight:600;">${esc(l.symptoms)}</div>
        </div>
        <div style="padding:14px 16px; background:var(--bg-1);">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:4px;">当前用什么产品</div>
          <div style="color:var(--text-1); font-size:0.88rem; line-height:1.6;">${esc(l.products)}</div>
        </div>
        <div style="padding:14px 8px; display:flex; align-items:center; justify-content:center;">
          <div style="color:${l.color}; font-family:var(--font-head); font-weight:800; font-size:1.1rem;">${esc(l.users)}</div>
        </div>
        <div style="padding:14px 16px;">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:4px;">用户行为</div>
          <div style="color:var(--text-2); font-size:0.84rem; line-height:1.6; font-style:italic;">${esc(l.behavior)}</div>
        </div>
      </div>`).join('')}
    </div>

    <div style="margin-top:24px;">
      <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; letter-spacing:0.18em; margin-bottom:14px; font-weight:700;">VOC 证据 · 各层用户的真实声音</div>
      ${renderVocGrid(finalVoc, { accent: BRAND.TECH_BLUE, columns: 3 })}
    </div>

    ${renderInsightHero({
        eyebrow: 'POPULATION MAP · 人群地图',
        color: BRAND.TECH_BLUE,
        title: `2.5 亿胃病人群中，<strong style="color:${BRAND.WARM_ORANGE};">第 3 层（中度 · ~8000 万）</strong>和<strong style="color:${BRAND.HOUGU_TAN};">第 2 层（轻度 · ~1 亿）</strong>是最大的两个池——也是<strong>产品选择最混乱、用户最焦虑</strong>的两层。`,
        subtitle: `第 5/4 层被处方药锁定，第 1 层还没有行动意愿。<strong style="color:${BRAND.JIANG_GREEN};">猴菇饮的战场在第 2-3 层</strong>——约 1.8 亿活跃用户，他们正在自行购买各类产品却普遍不满。`,
    })}

    ${renderDecisionList([
        '<strong>目标人群锁定</strong>：第 2 层（轻度 ~1 亿）+ 第 3 层（中度 ~8000 万）= 1.8 亿活跃可触达用户',
        '<strong>第 5/4 层排除</strong>：危重/重度用户被处方药锁定，不是功能食品/OTC 的战场',
        '<strong>第 1 层培育</strong>：亚健康人群作为长期增量，但短期无购买行为，不作为首发目标',
        '<strong>关键识别</strong>：第 3 层用户"自己买药反复吃"——已有付费行为和品类认知，是最佳切入层',
    ], { title: '人群分层决策 · 锁定第 2-3 层', accent: BRAND.TECH_BLUE, columns: 2 })}
  </div>
</section>`;
}

// ================================================================
// 1.2 · 产品竞争格局 · 100亿市场拆解 × 代表品牌
// ================================================================
function renderSub1_2(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal, data } = ctx;
    const items = data.items || [];

    const segments = [
        { key: 'PPI', label: '拉唑类 PPI', scale: '~70亿', share: '70%', color: BRAND.TECH_BLUE,
          brands: '奥美拉唑 / 雷贝拉唑 / 兰索拉唑 / 艾司奥美拉唑',
          userMind: '效果立竿见影、医生首推、长期吃焦虑副作用',
          vocQuote: '"奥美拉唑一吃就好 但一停就反弹 感觉被绑架了"' },
        { key: 'TCM', label: '中成药', scale: '~22亿', share: '22%', color: BRAND.PURPLE,
          brands: '三九胃泰 / 摩罗丹 / 康复新液 / 气滞胃痛颗粒',
          userMind: '老一辈信任、年轻人不选、口感差但觉得温和',
          vocQuote: '"三九胃泰颗粒冲出来苦涩 老人不爱喝 坚持两天就放弃"' },
        { key: 'PROTECT', label: '胃黏膜保护剂', scale: '~6亿', share: '6%', color: BRAND.WARM_ORANGE,
          brands: '达喜（铝碳酸镁）/ 硫糖铝 / 替普瑞酮',
          userMind: '胃酸过多就嚼一片、对症快但短效、不解决根本',
          vocQuote: '"达喜嚼完确实舒服 但过几个小时又开始烧心 只是救急"' },
        { key: 'FOOD', label: '功能食品', scale: '~2亿', share: '2%', color: BRAND.HOUGU_TAN,
          brands: '猴菇米稀（7.5亿独大）/ 同名猴菇饮 / 养胃茶',
          userMind: '温和无压力但效果存疑、场景单一、同质化严重',
          vocQuote: '"米稀当早餐挺好 但说实话不知道养胃有没有效 吃了个安慰"' },
    ];

    return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    ${renderSectionHead({
        eyebrow: `${c.num}.${subIdx} · 产品竞争格局`,
        title: '<span style="color:' + BRAND.TECH_BLUE + ';">100 亿</span> OTC 胃药市场 · 4 大品类 × 代表品牌',
        subtitle: '把百亿胃药市场按品类拆解：每类的代表品牌、市场规模、用户心智和典型 VOC。',
        color: BRAND.TECH_BLUE,
    })}

    <div style="margin-top:24px; display:flex; flex-direction:column; gap:16px;">
      ${segments.map((s) => `
      <div style="padding:22px 26px; background:var(--bg-1); border:1px solid var(--border); border-left:5px solid ${s.color}; border-radius:var(--radius-md); display:grid; grid-template-columns:200px 1fr 1fr; gap:20px; align-items:start;">
        <div>
          <div class="text-mono text-xs" style="color:${s.color}; letter-spacing:0.18em; margin-bottom:6px; font-weight:700;">${s.key} · ${s.share}</div>
          <div style="color:var(--text-1); font-size:1.14rem; font-weight:800;">${esc(s.label)}</div>
          <div style="color:${s.color}; font-family:var(--font-head); font-weight:900; font-size:1.6rem; margin-top:4px;">${esc(s.scale)}</div>
          <div style="color:var(--text-2); font-size:0.78rem; margin-top:8px; line-height:1.5;">${esc(s.brands)}</div>
        </div>
        <div>
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:6px;">用户心智</div>
          <div style="color:var(--text-1); font-size:0.9rem; line-height:1.65;">${esc(s.userMind)}</div>
        </div>
        <div style="padding:12px 16px; background:${s.color}08; border-left:3px solid ${s.color}30; border-radius:4px;">
          <div class="text-mono text-xs" style="color:${s.color}; letter-spacing:0.12em; margin-bottom:6px;">典型 VOC</div>
          <div style="color:var(--text-1); font-size:0.86rem; line-height:1.6; font-style:italic;">${esc(s.vocQuote)}</div>
        </div>
      </div>`).join('')}
    </div>

    ${renderBarChart([
        { label: '拉唑类 PPI', value: 70, color: BRAND.TECH_BLUE },
        { label: '中成药', value: 22, color: BRAND.PURPLE },
        { label: '胃黏膜保护剂', value: 6, color: BRAND.WARM_ORANGE },
        { label: '功能食品', value: 2, color: BRAND.HOUGU_TAN },
    ], { title: '100 亿 OTC 胃药市场 · 品类份额（亿元）', accent: BRAND.TECH_BLUE, unit: '亿' })}

    ${renderInsightHero({
        eyebrow: 'MARKET STRUCTURE · 市场结构',
        color: BRAND.TECH_BLUE,
        title: `PPI 独占 <strong style="color:${BRAND.TECH_BLUE};">70%</strong> 但用户焦虑严重；中成药 <strong style="color:${BRAND.PURPLE};">22%</strong> 但年轻代际断层；功能食品仅 <strong style="color:${BRAND.HOUGU_TAN};">2%</strong> 但品类天花板是身份而非需求。`,
        subtitle: `<strong style="color:${BRAND.JIANG_GREEN};">猴菇饮 OTC 的机会</strong>不在与 PPI 抢治疗，而在于填补<strong>"PPI 用户想降级 + 中成药用户想升级体验 + 功能食品用户想升级信任"</strong>这三条线的交汇空白。`,
    })}

    ${renderDecisionList([
        '<strong>不对标 PPI</strong>：不打"替代拉唑"——规避医疗宣称风险，对标的是"PPI 之外的日常维持"',
        '<strong>不对标中成药疗效</strong>：不打"比胃泰更有效"——对标的是"比胃泰更好喝更便捷"',
        '<strong>对标功能食品的升级版</strong>：从食品池（2 亿）跳进 OTC 池（100 亿）——身份升级即市场扩容',
        '<strong>定价锚定</strong>：日均 12-15 元，高于食品（1-3 元）、低于药品（3-8 元/日），占住中间带',
    ], { title: '竞争格局决策 · 4 条品类对标原则', accent: BRAND.TECH_BLUE, columns: 2 })}
  </div>
</section>`;
}

// ================================================================
// 1.3 · 用户决策路径 · 从症状到产品选择的真实链路
// ================================================================
function renderSub1_3(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal, data } = ctx;
    const items = data.items || [];

    const pathVoc = HGY.getEvidence(items, { hypothesis: 'H4', top: 4, seed: 23 });
    const searchVoc = HGY.getEvidence(items, { hypothesis: 'H3', tag: '寻找替代', top: 3, seed: 29 });
    const combinedVoc = [...pathVoc, ...searchVoc].filter(Boolean).slice(0, 6);
    const finalVoc = combinedVoc.length >= 4 ? combinedVoc : HGY.getEvidence(items, { hypothesis: 'H3', top: 6, seed: 31 });

    // 4 条用户路径
    const paths = [
        { id: 'P1', name: '急性发作路径', color: '#C62828', icon: '🚨',
          steps: ['胃痛/烧心/反酸发作', '药店/急诊', 'PPI（奥美拉唑）', '症状缓解', '反复发作 → 长期服药'],
          endpoint: '被 PPI 锁定，想减量但不敢', opportunity: '猴菇饮作为"PPI 减量期的温和伴侣"' },
        { id: 'P2', name: '慢性管理路径', color: BRAND.PURPLE, icon: '🔄',
          steps: ['长期胃不适', '医院检查 → 慢性胃炎', '中成药（胃泰/摩罗丹）', '口感差 → 停药', '反复 → 换药'],
          endpoint: '在中成药和西药间来回折返', opportunity: '猴菇饮作为"不苦不涩的日常替代"' },
        { id: 'P3', name: '自我养护路径', color: BRAND.HOUGU_TAN, icon: '🌿',
          steps: ['偶尔胃不舒服', '搜索"养胃食物"', '试米稀/养胃粥/姜茶', '效果不确定', '放弃或继续"信仰充值"'],
          endpoint: '有需求但无信任产品', opportunity: '猴菇饮 OTC 身份 = 信任锚点' },
        { id: 'P4', name: '忽视型路径', color: BRAND.SAGE, icon: '😴',
          steps: ['饮食不规律/压力大', '偶有不适但忽视', '无任何产品介入', '直到症状加重才就医'],
          endpoint: '完全空白，等待被教育', opportunity: '送礼/场景触发 → 首次试饮' },
    ];

    return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    ${renderSectionHead({
        eyebrow: `${c.num}.${subIdx} · 用户决策路径`,
        title: '从<span style="color:' + BRAND.CORAL + ';">胃不舒服</span>到<span style="color:' + BRAND.TECH_BLUE + ';">选什么产品</span> · 4 条真实路径',
        subtitle: '胃病用户不是"看到就买"——他们有<strong>复杂的决策链路</strong>：从症状发生到信息搜索到产品选择再到复购/流失，每个节点都是猴菇饮的<strong>介入机会</strong>。',
        color: BRAND.TECH_BLUE,
    })}

    <div style="margin-top:24px; display:flex; flex-direction:column; gap:18px;">
      ${paths.map((p) => `
      <div style="padding:20px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${p.color}; border-radius:var(--radius-md);">
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:14px;">
          <span style="font-size:1.4rem;">${p.icon}</span>
          <div>
            <div class="text-mono text-xs" style="color:${p.color}; letter-spacing:0.18em; font-weight:700;">${p.id} · 决策路径</div>
            <div style="color:var(--text-1); font-size:1.06rem; font-weight:700;">${esc(p.name)}</div>
          </div>
        </div>
        <div style="display:flex; align-items:center; gap:0; margin-bottom:14px; flex-wrap:wrap;">
          ${p.steps.map((s, i) => `
            <div style="padding:6px 14px; background:${p.color}${i === p.steps.length - 1 ? '18' : '0A'}; color:${i === p.steps.length - 1 ? p.color : 'var(--text-1)'}; border-radius:16px; font-size:0.82rem; font-weight:${i === p.steps.length - 1 ? '700' : '500'}; white-space:nowrap;">${esc(s)}</div>
            ${i < p.steps.length - 1 ? '<div style="color:var(--text-3); font-size:0.9rem; margin:0 4px;">→</div>' : ''}
          `).join('')}
        </div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
          <div style="padding:10px 14px; background:${BRAND.CORAL}08; border-left:3px solid ${BRAND.CORAL}30; border-radius:4px;">
            <div class="text-mono text-xs" style="color:${BRAND.CORAL}; letter-spacing:0.12em; margin-bottom:4px;">终点状态</div>
            <div style="color:var(--text-1); font-size:0.84rem; line-height:1.6;">${esc(p.endpoint)}</div>
          </div>
          <div style="padding:10px 14px; background:${BRAND.JIANG_GREEN}08; border-left:3px solid ${BRAND.JIANG_GREEN}30; border-radius:4px;">
            <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.12em; margin-bottom:4px;">猴菇饮介入机会</div>
            <div style="color:var(--text-1); font-size:0.84rem; line-height:1.6;">${esc(p.opportunity)}</div>
          </div>
        </div>
      </div>`).join('')}
    </div>

    <div style="margin-top:24px;">
      <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; letter-spacing:0.18em; margin-bottom:14px; font-weight:700;">VOC 证据 · 用户决策路径中的真实声音</div>
      ${renderVocGrid(finalVoc, { accent: BRAND.TECH_BLUE, columns: 3 })}
    </div>

    ${renderInsightHero({
        eyebrow: 'PATH INSIGHT · 路径洞察',
        color: BRAND.JIANG_GREEN,
        title: `4 条路径的共同终点 = <strong style="color:${BRAND.CORAL};">用户不满意但没有更好的选择</strong>。`,
        subtitle: `P1 被 PPI 绑架想逃、P2 在中西药间折返、P3 信仰充值无信任锚、P4 完全空白。<strong style="color:${BRAND.JIANG_GREEN};">猴菇饮在每条路径上都有介入点</strong>——但<strong>优先级不同</strong>：P1（PPI 减量）和 P3（养护信任）是最高优先级切入口。`,
    })}

    ${renderDecisionList([
        '<strong>首发切入</strong>：P1（PPI 减量人群）+ P3（养护搜索人群）= 两条最短转化路径',
        '<strong>二期扩展</strong>：P2（中成药折返人群）——用"不苦不涩即饮"拦截中成药流失用户',
        '<strong>长期培育</strong>：P4（忽视型）——通过送礼/场景触发完成首次试饮教育',
        '<strong>渠道匹配</strong>：P1 → 胃消化科周边药店；P3 → 电商/小红书搜索拦截；P2 → 药店货架旁推荐',
        '<strong>话术匹配</strong>：P1 "减量期温和伴侣"；P3 "有 OTC 身份的养胃饮"；P2 "不苦不涩开盖即饮"',
        '<strong>KPI</strong>：上市 12 个月各路径用户"知晓率"P1>30% / P3>20% / P2>15%',
    ], { title: '路径策略 · 分路径介入 6 条动作', accent: BRAND.JIANG_GREEN, columns: 2 })}
  </div>
</section>`;
}

module.exports = {
    'landscape-1': renderSub1_1,
    'landscape-2': renderSub1_2,
    'landscape-3': renderSub1_3,
};