// 江中猴菇饮 v2 · Ch5 定位推导（4 子章）
//   5.1 里斯品类战略 · 品类进化树 × 品类分化机会
//   5.2 特劳特心智阶梯 · 胃病用户脑中的产品序列
//   5.3 差异化锚点 · vs 药品 / vs 保健品 / vs 食品
//   5.4 定位陈述 · 一句话定位 × VOC 验证证据

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

// ================================================================
// 5.1 · 里斯品类战略 · 品类进化树 × 品类分化机会
// ================================================================
function renderSub1(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal } = ctx;

    const categories = [
        { name: '处方胃药', parent: '胃病治疗', examples: 'PPI/铋剂/三联', trend: '成熟', color: '#C62828' },
        { name: 'OTC 化药', parent: '胃病自治', examples: '奥美拉唑/达喜', trend: '成熟', color: '#E53935' },
        { name: 'OTC 中成药', parent: '胃病养护', examples: '三九胃泰/摩罗丹', trend: '衰退', color: BRAND.WARM_ORANGE },
        { name: '保健食品', parent: '胃部保健', examples: '猴头菇胶囊/养胃茶', trend: '停滞', color: BRAND.HOUGU_TAN },
        { name: '功能食品', parent: '日常养胃', examples: '米稀/养胃粥', trend: '增长', color: BRAND.SAGE },
        { name: 'OTC 养胃饮', parent: '⭐ 新品类', examples: '猴菇饮 = 开创者', trend: '空白', color: BRAND.JIANG_GREEN },
    ];

    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.PURPLE + ';">品类进化树</span> × 分化机会',
        subtitle: '里斯认为：品牌的最大机会不是在既有品类中竞争，而是开创新品类并成为第一。',
        color: BRAND.PURPLE,
    })}

    <!-- 品类进化树 -->
    <div style="margin-top:24px; 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.PURPLE}; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">胃病产品品类进化树</div>
      <div style="display:flex; flex-direction:column; gap:6px;">
        ${categories.map((cat, i) => `
        <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:${cat.color}05; border-left:4px solid ${cat.color}; border-radius:0 var(--radius-sm) var(--radius-sm) 0; ${i === categories.length - 1 ? 'border:2px solid ' + cat.color + '40; border-left:4px solid ' + cat.color + ';' : ''}">
          <div style="font-weight:800; font-size:0.88rem; color:${cat.color};">${esc(cat.name)}</div>
          <div style="font-size:0.75rem; color:var(--text-3);">${esc(cat.parent)}</div>
          <div style="font-size:0.78rem; color:var(--text-2);">${esc(cat.examples)}</div>
          <div style="text-align:center;">
            <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
              background:${cat.trend === '空白' ? BRAND.JIANG_GREEN + '15' : cat.trend === '增长' ? BRAND.SAGE + '15' : cat.trend === '衰退' ? BRAND.CORAL + '15' : 'var(--bg-2)'};
              color:${cat.trend === '空白' ? BRAND.JIANG_GREEN : cat.trend === '增长' ? BRAND.SAGE : cat.trend === '衰退' ? BRAND.CORAL : 'var(--text-3)'};">
              ${cat.trend}
            </span>
          </div>
        </div>`).join('')}
      </div>
    </div>

    <!-- 里斯观点 -->
    <div style="margin-top:16px; padding:16px 20px; background:${BRAND.PURPLE}08; border:1px solid ${BRAND.PURPLE}30; border-radius:var(--radius-md);">
      <div style="font-size:0.82rem; color:var(--text-2); font-style:italic; margin-bottom:8px;">"品牌不是在品类中竞争的结果，品牌是开创品类的奖赏。" —— 艾·里斯</div>
      <div style="font-size:0.88rem; color:var(--text-1); line-height:1.7;">
        <strong style="color:${BRAND.JIANG_GREEN};">猴菇饮的品类战略</strong>：不要试图在"OTC 中成药"品类里和三九胃泰竞争，也不要在"功能食品"里和米稀抢早餐。而是<strong>开创"OTC 养胃饮"新品类</strong>——这个品类目前是空白的，猴菇饮天然是第一个进入者。
      </div>
    </div>
  </div>
</section>`;
}

// ================================================================
// 5.2 · 特劳特心智阶梯 · 胃病用户脑中的产品序列
// ================================================================
function renderSub2(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal, data } = ctx;
    const items = data?.items || [];

    // 用户品类认知 VOC：搜索用户自发的品类对比/选择困惑表达
    const categoryRe = /比.*温和|不想吃药|副作用|不是药|食品|保健品|中成药|像喝.*一样|好喝|方便|养胃|不严重|日常|调理|选哪个|怎么选|纠结/i;
    const categoryItems = items.filter(it => categoryRe.test(it.content || ''));
    const categoryEvidence = HGY.getEvidence(categoryItems, { top: 3, seed: 52, minChars: 15 });

    const ladder = [
        { position: 1, product: '去医院/听医生的', mindShare: '必须的', color: '#C62828' },
        { position: 2, product: '奥美拉唑/达喜', mindShare: '"胃痛就吃这个"', color: '#E53935' },
        { position: 3, product: '三九胃泰/健胃消食片', mindShare: '"不严重就吃中成药"', color: BRAND.WARM_ORANGE },
        { position: 4, product: '米稀/酸奶', mindShare: '"日常养养胃"', color: BRAND.SAGE },
        { position: 5, product: '⭐ ???', mindShare: '"比食品可信、比药温和"', color: BRAND.JIANG_GREEN },
    ];

    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.PURPLE + ';">产品序列</span>',
        subtitle: '特劳特认为：定位不是改变产品，而是在用户心智中找到一个空位并占据它。',
        color: BRAND.PURPLE,
    })}

    <!-- 心智阶梯 -->
    <div style="margin-top:24px; 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.PURPLE}; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">胃病用户的心智阶梯（由重到轻决策序列）</div>
      <div style="display:flex; flex-direction:column; gap:4px;">
        ${ladder.map(l => `
        <div style="display:grid; grid-template-columns:60px 200px 1fr; gap:12px; align-items:center; padding:12px 16px; background:${l.color}06; border-left:4px solid ${l.color}; ${l.position === 5 ? 'border:2px dashed ' + l.color + '; border-left:4px solid ' + l.color + ';' : ''}">
          <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:${l.color}; text-align:center;">#${l.position}</div>
          <div style="font-weight:700; font-size:0.92rem; color:${l.color};">${esc(l.product)}</div>
          <div style="font-size:0.82rem; color:var(--text-2); font-style:italic;">${esc(l.mindShare)}</div>
        </div>`).join('')}
      </div>
    </div>

    <!-- 用户品类认知 VOC 验证 -->
    ${categoryEvidence.length > 0 ? `
    <div style="margin-top:16px; padding:16px; background:${BRAND.PURPLE}06; border:1px solid ${BRAND.PURPLE}30; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${BRAND.PURPLE}; letter-spacing:0.12em; margin-bottom:10px; font-weight:700;">VOC 验证 · 用户自发的品类认知表达（${categoryItems.length} 条相关 VOC）</div>
      <div style="display:grid; grid-template-columns:repeat(${Math.min(categoryEvidence.length, 3)}, 1fr); gap:10px;">
        ${categoryEvidence.map(ev => `
        <div style="padding:10px 12px; background:var(--bg-1); border-left:3px solid ${BRAND.PURPLE}; border-radius:4px;">
          <div style="font-size:0.74rem; color:var(--text-1); line-height:1.45;">"${esc((ev.content || '').slice(0, 90))}"</div>
          <div style="color:var(--text-3); font-size:0.6rem; margin-top:4px;">—${esc(ev.nickname || ev.platform)} · ❤️${ev.likes || 0}</div>
        </div>`).join('')}
      </div>
    </div>` : ''}

    <!-- 空位分析 -->
    <div style="margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
      <div style="padding:16px; background:${BRAND.CORAL}05; border:1px solid ${BRAND.CORAL}30; border-radius:var(--radius-md);">
        <div class="text-mono text-xs" style="color:${BRAND.CORAL}; margin-bottom:8px; font-weight:700;">心智空位 · 用户说不出名字的需求</div>
        <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
          在"三九胃泰（药但难吃）"和"米稀（好喝但只是食品）"之间，用户有一个说不出名字的需求：<br>
          <strong>"有没有一个东西，像喝饮料一样简单，但比食品更可信一点？"</strong>
        </div>
      </div>
      <div style="padding:16px; background:${BRAND.JIANG_GREEN}05; border:1px solid ${BRAND.JIANG_GREEN}30; border-radius:var(--radius-md);">
        <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; margin-bottom:8px; font-weight:700;">猴菇饮的心智占位</div>
        <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
          猴菇饮 = 阶梯第 5 级 = <strong>"OTC 级养胃饮"</strong><br>
          比药品温和（不怕副作用）<br>
          比食品可信（OTC 身份）<br>
          比中成药好喝（液态/好口感）<br>
          比保健品便捷（即饮/无疗程）
        </div>
      </div>
    </div>
  </div>
</section>`;
}

// ================================================================
// 5.3 · 差异化锚点 · vs 药品 / vs 保健品 / vs 食品
// ================================================================
function renderSub3(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal } = ctx;

    const axes = [
        { vs: '药品（PPI/中成药）', anchor: '温和无副作用', detail: '"不是替代药品，是药品的温和伴侣"', color: BRAND.TECH_BLUE },
        { vs: '保健品（猴头菇胶囊）', anchor: 'OTC 信任 + 好喝', detail: '"同样猴头菇，我是药准字/你是食准字"', color: BRAND.HOUGU_TAN },
        { vs: '食品（米稀/养胃茶）', anchor: 'OTC 信任 + 全天场景', detail: '"不止早餐，随时随地 OTC 级养护"', 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: '差异化锚点 · <span style="color:' + BRAND.PURPLE + ';">三轴定位</span>',
        subtitle: '猴菇饮不是任何一个既有品类的"又一个产品"，而是三个品类交叉的唯一占位。',
        color: BRAND.PURPLE,
    })}

    <!-- 三轴差异化 -->
    <div style="margin-top:24px; display:flex; flex-direction:column; gap:16px;">
      ${axes.map(a => `
      <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid ${a.color};">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
          <span style="font-weight:800; font-size:0.95rem; color:var(--text-1);">vs ${esc(a.vs)}</span>
          <span style="padding:4px 12px; background:${a.color}12; color:${a.color}; font-weight:700; font-size:0.78rem; border-radius:12px;">差异化锚点：${esc(a.anchor)}</span>
        </div>
        <div style="font-size:0.85rem; color:var(--text-2); font-style:italic;">${esc(a.detail)}</div>
      </div>`).join('')}
    </div>

    <!-- 交叉定位图 -->
    <div style="margin-top:20px; padding:20px; background:${BRAND.JIANG_GREEN}06; 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:12px; font-weight:700;">猴菇饮 = 三个维度的交叉唯一点</div>
      <div style="font-size:1.1rem; color:var(--text-1); line-height:1.8; max-width:600px; margin:0 auto;">
        <span style="color:${BRAND.TECH_BLUE}; font-weight:700;">药品的 OTC 信任</span> ×
        <span style="color:${BRAND.HOUGU_TAN}; font-weight:700;">好喝的猴头菇口感</span> ×
        <span style="color:${BRAND.SAGE}; font-weight:700;">即饮的全天场景</span>
        <br>
        <span style="font-size:0.85rem; color:var(--text-3);">= 市场上唯一占据这个交叉位置的产品</span>
      </div>
    </div>
  </div>
</section>`;
}

// ================================================================
// 5.4 · 定位陈述 · 一句话定位 × VOC 验证证据
// ================================================================
function renderSub4(ctx) {
    const { chapter: c, subIdx, slideNum, slideTotal, data } = ctx;
    const items = data.items || [];
    const vocCards = HGY.getEvidence(items, { hypothesis: 'H5', top: 4, seed: 67, contentMatch: /养胃|胃|猴菇|饮|应酬|夜班|办公/i });

    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.JIANG_GREEN + ';">一句话定位</span>',
        subtitle: '能写在盒子上、药店店员能说出来、用户能记住的那一句。',
        color: BRAND.JIANG_GREEN,
    })}

    <!-- 定位陈述 -->
    <div style="margin-top:24px; padding:28px 32px; background:${BRAND.JIANG_GREEN}08; border:2px solid ${BRAND.JIANG_GREEN}; border-radius:var(--radius-lg); text-align:center;">
      <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.2em; margin-bottom:12px;">POSITIONING STATEMENT</div>
      <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:var(--text-1); line-height:1.5; max-width:560px; margin:0 auto;">
        "中国第一款 <span style="color:${BRAND.JIANG_GREEN};">OTC 养胃饮</span>"
      </div>
      <div style="font-size:0.88rem; color:var(--text-2); margin-top:12px; max-width:500px; margin-left:auto; margin-right:auto; line-height:1.6;">
        专为<strong>轻度胃不适 + 日常养护</strong>人群设计<br>
        OTC 药品级信任 × 即饮便捷 × 猴头菇温和养护
      </div>
    </div>

    <!-- 定位验证 -->
    <div style="margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
      <div style="padding:16px; 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}; margin-bottom:10px; font-weight:700;">✓ 定位自检 · 通过</div>
        <div style="display:flex; flex-direction:column; gap:6px; font-size:0.82rem;">
          <div style="color:var(--text-1);">✅ <strong>独特性</strong>：市场上没有其他"OTC 养胃饮"</div>
          <div style="color:var(--text-1);">✅ <strong>可信性</strong>：OTC 批文是实际背书</div>
          <div style="color:var(--text-1);">✅ <strong>相关性</strong>：2.5亿胃病人群的真实需求</div>
          <div style="color:var(--text-1);">✅ <strong>简洁性</strong>：一句话说清楚是什么</div>
          <div style="color:var(--text-1);">✅ <strong>可执行</strong>：药店店员能直接用这句推荐</div>
        </div>
      </div>
      <div style="padding:16px; 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}; margin-bottom:10px; font-weight:700;">⚠ 备选定位方案</div>
        <div style="display:flex; flex-direction:column; gap:8px; font-size:0.82rem;">
          <div style="padding:8px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
            <strong>方案 B</strong>：猴菇饮——"药品级养胃，饮料般好喝"
          </div>
          <div style="padding:8px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
            <strong>方案 C</strong>：猴菇饮——"PPI 减量期的温和伴侣"（窄）
          </div>
          <div style="padding:8px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
            <strong>方案 D</strong>：猴菇饮——"每天一瓶，OTC 级养胃"
          </div>
        </div>
      </div>
    </div>

    ${vocCards.length > 0 ? `
    <div style="margin-top:16px;">
      <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 验证 · 用户自发使用的类似表达</div>
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
        ${vocCards.slice(0, 4).map(v => renderVocCard(v, { compact: true })).join('')}
      </div>
    </div>` : ''}
  </div>
</section>`;
}

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