fmode-voc-projects/scripts/tools/houguyin-v2-ch1-funnel.js

// 江中猴菇饮 v2 · Ch1 全景漏斗（3 子章）
//   1.1 TAM · 2.5亿胃病人群 × 100亿市场全景
//   1.2 SAM · 可服务市场 × 6级病程分层
//   1.3 SOM · 猴菇饮的目标区间 × 5000万→5亿路径

const HGY = require('./houguyin-analyze.js');
const C = require('./houguyin-components.js');
const { BRAND, esc, renderSectionHead, renderStatStrip, renderBarChart } = C;

// ================================================================
// 1.1 · TAM · 2.5亿胃病人群 × 100亿市场全景
// ================================================================
function renderSub1(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal } = ctx;

    const tamData = [
        { label: '慢性胃炎', value: 1.2, unit: '亿人', color: '#E53935' },
        { label: '功能性消化不良', value: 0.5, unit: '亿人', color: BRAND.WARM_ORANGE },
        { label: '胃食管反流', value: 0.35, unit: '亿人', color: BRAND.CORAL },
        { label: '消化性溃疡', value: 0.15, unit: '亿人', color: '#C62828' },
        { label: '其他胃部问题', value: 0.3, unit: '亿人', color: BRAND.HOUGU_TAN },
    ];

    const marketData = [
        { category: 'PPI 类（处方+OTC）', size: '~450亿', share: '45%', color: '#C62828' },
        { category: '中成药胃药', size: '~200亿', share: '20%', color: BRAND.WARM_ORANGE },
        { category: '胃黏膜保护剂', size: '~120亿', share: '12%', color: BRAND.TECH_BLUE },
        { category: '消化酶/促动力', size: '~100亿', share: '10%', color: BRAND.PURPLE },
        { category: '功能食品/保健品', size: '~80亿', share: '8%', color: BRAND.HOUGU_TAN },
        { category: '养胃饮品/食疗', size: '~50亿', share: '5%', color: BRAND.SAGE },
    ];

    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: 'TAM · <span style="color:' + BRAND.TECH_BLUE + ';">2.5 亿</span>胃病人群 × <span style="color:' + BRAND.WARM_ORANGE + ';">1000 亿</span>市场',
        subtitle: '全中国有多少人有胃病？发病率是多少？会吃药的人有多少亿？——总经理最关心的数字。',
        color: BRAND.TECH_BLUE,
    })}

    <!-- TAM 人群分布 -->
    <div style="margin-top:24px; padding:20px 24px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; letter-spacing:0.15em; margin-bottom:16px; font-weight:700;">TAM · 总可触达市场（人群维度）</div>
      <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;">
        ${tamData.map(d => `
        <div style="text-align:center; padding:16px 8px; background:${d.color}08; border-radius:var(--radius-sm); border:1px solid ${d.color}30;">
          <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:${d.color};">${d.value}</div>
          <div style="font-size:0.72rem; color:${d.color}; margin-top:2px;">${d.unit}</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; font-weight:600;">${esc(d.label)}</div>
        </div>`).join('')}
      </div>
      <div style="text-align:center; margin-top:12px; padding:10px; background:${BRAND.TECH_BLUE}08; border-radius:var(--radius-sm);">
        <span style="font-family:var(--font-head); font-size:1.8rem; font-weight:900; color:${BRAND.TECH_BLUE};">2.5 亿+</span>
        <span style="font-size:0.88rem; color:var(--text-2); margin-left:8px;">中国胃病相关人群总量</span>
      </div>
    </div>

    <!-- 市场规模 -->
    <div style="margin-top:20px; padding:20px 24px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${BRAND.WARM_ORANGE}; letter-spacing:0.15em; margin-bottom:16px; font-weight:700;">TAM · 总可触达市场（金额维度）</div>
      <div style="display:flex; flex-direction:column; gap:8px;">
        ${marketData.map(d => `
        <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
          <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">${esc(d.category)}</div>
          <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
            <div style="height:100%; width:${parseInt(d.share)}%; background:${d.color}; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
              <span style="font-size:0.72rem; color:white; font-weight:700;">${d.size}</span>
            </div>
          </div>
          <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">${d.share}</div>
        </div>`).join('')}
      </div>
      <div style="text-align:center; margin-top:12px; font-size:0.82rem; color:var(--text-2);">
        胃病相关产品全市场 ≈ <strong style="color:${BRAND.WARM_ORANGE};">1000 亿+</strong>（含处方药 + OTC + 食品）
      </div>
    </div>
  </div>
</section>`;
}

// ================================================================
// 1.2 · SAM · 可服务市场 × 6级病程分层
// ================================================================
function renderSub2(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal } = ctx;

    const stages = [
        { level: '治疗级', severity: '危重/重度', population: '~2500万', market: '~300亿', color: '#C62828',
          desc: '必须就医，处方为主，无自主购买', canServe: false, reason: '处方壁垒，非OTC可进入' },
        { level: '化药级', severity: '中度', population: '~8000万', market: '~250亿', color: '#E53935',
          desc: 'OTC PPI + 胃黏膜保护，自己买药', canServe: '边缘', reason: '用户有减药意愿，伴侣场景有空间' },
        { level: '中成药', severity: '轻-中度', population: '~6000万', market: '~200亿', color: BRAND.WARM_ORANGE,
          desc: '三九胃泰/摩罗丹/康复新液', canServe: true, reason: '代际断层严重，年轻人不买账' },
        { level: '保健食品', severity: '轻度', population: '~4000万', market: '~80亿', color: BRAND.HOUGU_TAN,
          desc: '养胃茶/猴头菇保健品', canServe: true, reason: '效果存疑+同质化，有OTC信任升级需求' },
        { level: '功能食品', severity: '亚健康', population: '~5000万', market: '~50亿', color: BRAND.SAGE,
          desc: '米稀/养胃粥/姜茶/酸奶', canServe: true, reason: '场景单一（早餐），饮品场景空白' },
        { level: '未病/预防', severity: '无症状', population: '~5000万+', market: '~20亿', color: '#9E9E9E',
          desc: '几乎无产品', canServe: '潜力', reason: '完全空白，教育成本高但天花板高' },
    ];

    const samTotal = stages.filter(s => s.canServe === true || s.canServe === '边缘').reduce((acc, s) => acc + parseInt(s.population.replace(/[^0-9]/g, '')), 0);

    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: 'SAM · 可服务市场 × <span style="color:' + BRAND.JIANG_GREEN + ';">6 级病程</span>分层',
        subtitle: '2.5 亿人不是都能服务到。按病程分 6 层，标注哪些层猴菇饮 OTC 有机会进入。',
        color: BRAND.JIANG_GREEN,
    })}

    <div style="margin-top:24px;">
      <!-- 漏斗可视化 -->
      <div style="display:flex; flex-direction:column; gap:2px;">
        ${stages.map((s, i) => {
            const widthPct = 100 - i * 12;
            const canServeColor = s.canServe === true ? BRAND.JIANG_GREEN : (s.canServe === '边缘' ? BRAND.WARM_ORANGE : (s.canServe === '潜力' ? '#9E9E9E' : BRAND.CORAL));
            const canServeLabel = s.canServe === true ? '✅ 核心机会' : (s.canServe === '边缘' ? '⚠️ 边缘机会' : (s.canServe === '潜力' ? '💡 长期潜力' : '❌ 不可进入'));
            return `
        <div style="width:${widthPct}%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:${s.color}08; border-left:4px solid ${s.color}; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
          <div>
            <div style="font-weight:800; font-size:0.88rem; color:${s.color};">${esc(s.level)}</div>
            <div style="font-size:0.7rem; color:var(--text-3);">${esc(s.severity)}</div>
          </div>
          <div style="font-size:0.8rem; color:var(--text-2);">${esc(s.desc)}</div>
          <div style="text-align:center;">
            <div style="font-weight:800; font-size:0.92rem; color:${s.color};">${s.population}</div>
            <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
          </div>
          <div style="text-align:center;">
            <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">${s.market}</div>
            <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
          </div>
          <div style="text-align:center;">
            <div style="font-size:0.78rem; font-weight:700; color:${canServeColor};">${canServeLabel}</div>
            <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">${esc(s.reason).slice(0, 12)}</div>
          </div>
        </div>`;
        }).join('')}
      </div>

      <!-- SAM 汇总 -->
      <div style="margin-top:20px; padding:16px 24px; background:${BRAND.JIANG_GREEN}08; border:2px solid ${BRAND.JIANG_GREEN}40; border-radius:var(--radius-md); text-align:center;">
        <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.15em; margin-bottom:8px;">SAM · 猴菇饮可服务市场</div>
        <div style="font-family:var(--font-head); font-size:2rem; font-weight:900; color:${BRAND.JIANG_GREEN};">~2.3 亿人 × ~330 亿市场</div>
        <div style="font-size:0.82rem; color:var(--text-2); margin-top:8px;">中成药养护 + 保健食品 + 功能食品 + 化药级边缘 = 猴菇饮的可触达空间</div>
      </div>
    </div>
  </div>
</section>`;
}

// ================================================================
// 1.3 · SOM · 猴菇饮的目标区间 × 5000万→5亿路径
// ================================================================
function renderSub3(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal } = ctx;

    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: 'SOM · 猴菇饮的<span style="color:' + BRAND.JIANG_GREEN + ';">目标区间</span> × 增长路径',
        subtitle: '从 SAM 的 330 亿中，以当前产品力和渠道能力，3 年内能拿到多少？',
        color: BRAND.JIANG_GREEN,
    })}

    <div style="margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px;">
      <!-- SOM 漏斗 -->
      <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
        <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">从 TAM 到 SOM 的收敛</div>
        <div style="display:flex; flex-direction:column; gap:12px;">
          <div style="padding:12px 16px; background:${BRAND.TECH_BLUE}08; border-radius:var(--radius-sm); border-left:4px solid ${BRAND.TECH_BLUE};">
            <div style="font-size:0.72rem; color:${BRAND.TECH_BLUE}; font-weight:700;">TAM · 全市场</div>
            <div style="font-size:1.2rem; font-weight:800; color:var(--text-1);">2.5 亿人 × 1000 亿</div>
          </div>
          <div style="text-align:center; color:var(--text-3); font-size:0.8rem;">↓ 去掉处方壁垒 + 无自主购买层</div>
          <div style="padding:12px 16px; background:${BRAND.JIANG_GREEN}08; border-radius:var(--radius-sm); border-left:4px solid ${BRAND.JIANG_GREEN};">
            <div style="font-size:0.72rem; color:${BRAND.JIANG_GREEN}; font-weight:700;">SAM · 可服务</div>
            <div style="font-size:1.2rem; font-weight:800; color:var(--text-1);">~2.3 亿人 × ~330 亿</div>
          </div>
          <div style="text-align:center; color:var(--text-3); font-size:0.8rem;">↓ 聚焦药店渠道 × OTC 属性 × 养护场景</div>
          <div style="padding:12px 16px; background:${BRAND.HOUGU_TAN}08; border-radius:var(--radius-sm); border-left:4px solid ${BRAND.HOUGU_TAN};">
            <div style="font-size:0.72rem; color:${BRAND.HOUGU_TAN}; font-weight:700;">SOM · 3年可获取</div>
            <div style="font-size:1.4rem; font-weight:900; color:${BRAND.HOUGU_TAN};">5000 万 → 5 亿</div>
          </div>
        </div>
      </div>

      <!-- 3阶段路径 -->
      <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
        <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">3 阶段增长路径</div>
        <div style="display:flex; flex-direction:column; gap:16px;">
          <div style="padding:14px 16px; background:${BRAND.SAGE}10; border-radius:var(--radius-sm); border:1px solid ${BRAND.SAGE}30;">
            <div style="display:flex; justify-content:space-between; align-items:center;">
              <span style="font-weight:800; color:${BRAND.SAGE};">Y1 验证期</span>
              <span style="font-family:var(--font-head); font-size:1.1rem; font-weight:900; color:${BRAND.SAGE};">5000 万</span>
            </div>
            <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">药店渠道验证 × 核心话术测试 × 100 家门店起步</div>
          </div>
          <div style="padding:14px 16px; background:${BRAND.JIANG_GREEN}10; border-radius:var(--radius-sm); border:1px solid ${BRAND.JIANG_GREEN}30;">
            <div style="display:flex; justify-content:space-between; align-items:center;">
              <span style="font-weight:800; color:${BRAND.JIANG_GREEN};">Y2 扩张期</span>
              <span style="font-family:var(--font-head); font-size:1.1rem; font-weight:900; color:${BRAND.JIANG_GREEN};">1.5 亿</span>
            </div>
            <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">渠道复制 × 电商起量 × 礼品线启动</div>
          </div>
          <div style="padding:14px 16px; background:${BRAND.TECH_BLUE}10; border-radius:var(--radius-sm); border:1px solid ${BRAND.TECH_BLUE}30;">
            <div style="display:flex; justify-content:space-between; align-items:center;">
              <span style="font-weight:800; color:${BRAND.TECH_BLUE};">Y3 品类升级</span>
              <span style="font-family:var(--font-head); font-size:1.1rem; font-weight:900; color:${BRAND.TECH_BLUE};">5 亿</span>
            </div>
            <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">品类心智占位 × 多 SKU 矩阵 × 线上线下全渠道</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 本报告聚焦 -->
    <div style="margin-top:20px; padding:14px 20px; background:${BRAND.CORAL}08; border:1px solid ${BRAND.CORAL}30; border-radius:var(--radius-md);">
      <div style="font-size:0.85rem; color:var(--text-1);"><strong style="color:${BRAND.CORAL};">本报告聚焦解决</strong>：从 SAM 到 SOM 的关键问题——在 330 亿的可服务市场中，猴菇饮 OTC 应该切哪个阶段、打什么症状、用什么定位，才能稳扎 5000 万然后长到 5 亿。</div>
    </div>
  </div>
</section>`;
}

module.exports = { renderSub1, renderSub2, renderSub3 };