// ==============================================================================
// 肝纯片 v2 · Ch3 品类定位 · 里斯×特劳特
// ==============================================================================
// 3.1 里斯品类战略 · 护肝品类进化树
// 3.2 特劳特定位 · 一句话方案
// 3.3 差异化 MOAT · 藤茶 DMY 锚点
// ==============================================================================

const LA = require('./liver-analyze.js');
const C = require('./liver-components.js');
const { BRAND, esc, renderSectionHead, renderVocGrid,
        renderInsightHero, renderFindingCard, renderDecisionList, isEnglish, getTranslation } = C;

// ============================================================
// 3.1 里斯品类战略
// ============================================================
function renderSub1({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
    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} · RIES CATEGORY STRATEGY`,
        title: sub,
        subtitle: '王总要求用里斯的品类战略组织内容——"我在哪个品类？品类还能怎么分化？"',
        color: c.color,
    })}

    ${renderInsightHero({
        eyebrow: '里斯品类战略 · 核心问题',
        title: '肝纯片到底在哪个品类？',
        subtitle: '回答错了，竞争对手就选错了，渠道就铺错了，话术就说错了。',
        color: c.color,
    })}

    <div style="padding:24px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); margin-top:24px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:18px; font-weight:700;">品类进化树 · 从护肝大品类到细分定位</div>

      <!-- Level 0 -->
      <div style="text-align:center; padding:14px; background:${BRAND.TECH_BLUE}12; border:2px solid ${BRAND.TECH_BLUE}55; border-radius:8px; font-weight:700; color:${BRAND.TECH_BLUE}; font-size:1.1rem;">
        护肝大品类（~150 亿）
      </div>
      <div style="text-align:center; color:var(--text-3); font-size:1.2rem; padding:4px 0;">↓</div>

      <!-- Level 1 -->
      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;">
        <div style="padding:12px; background:${BRAND.TECH_BLUE}08; border:1px solid ${BRAND.TECH_BLUE}33; border-radius:6px; text-align:center;">
          <div style="font-weight:700; color:${BRAND.TECH_BLUE}; font-size:0.82rem;">处方护肝药</div>
          <div style="color:var(--text-3); font-size:0.68rem;">易善复/甘草酸</div>
        </div>
        <div style="padding:12px; background:${BRAND.WARM_ORANGE}08; border:1px solid ${BRAND.WARM_ORANGE}33; border-radius:6px; text-align:center;">
          <div style="font-weight:700; color:${BRAND.WARM_ORANGE}; font-size:0.82rem;">OTC 护肝中成药</div>
          <div style="color:var(--text-3); font-size:0.68rem;">葵花/水飞蓟片</div>
        </div>
        <div style="padding:12px; background:${BRAND.LIVER_AMBER}12; border:2px solid ${BRAND.LIVER_AMBER}55; border-radius:6px; text-align:center;">
          <div style="font-weight:700; color:${BRAND.LIVER_AMBER}; font-size:0.82rem;">⭐ 天然草本护肝</div>
          <div style="color:${BRAND.LIVER_AMBER}; font-size:0.68rem; font-weight:600;">肝纯片 = 这里</div>
        </div>
        <div style="padding:12px; background:${BRAND.ROSE}08; border:1px solid ${BRAND.ROSE}33; border-radius:6px; text-align:center;">
          <div style="font-weight:700; color:${BRAND.ROSE}; font-size:0.82rem;">进口保健品</div>
          <div style="color:var(--text-3); font-size:0.68rem;">Swisse/GNC</div>
        </div>
      </div>
      <div style="text-align:center; color:var(--text-3); font-size:1.2rem; padding:4px 0;">↓ 品类分化方向</div>

      <!-- Level 2 -->
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;">
        ${[
            { title: '应酬解酒·液体应急', desc: '酒前酒后即时护肝', color: BRAND.WINE_RED, star: false },
            { title: '日常养护·片剂便携', desc: '脂肪肝/熬夜日常护肝', color: BRAND.LIVER_AMBER, star: true },
            { title: '孝心礼品·高端礼盒', desc: '送长辈护肝面子工程', color: BRAND.GOLD, star: false },
        ].map(item => `
        <div style="padding:14px; background:${item.color}08; border:1px solid ${item.color}33; border-radius:6px; text-align:center;">
          <div style="font-weight:700; color:${item.color}; font-size:0.82rem;">${item.star ? '★ ' : ''}${esc(item.title)}</div>
          <div style="color:var(--text-2); font-size:0.72rem; margin-top:4px;">${esc(item.desc)}</div>
        </div>`).join('')}
      </div>
    </div>

    ${renderFindingCard({
        icon: '🎯',
        title: '里斯品类结论',
        body: `肝纯片应定位在 <strong style="color:${BRAND.LIVER_AMBER};">"天然草本护肝"</strong> 品类——<br/>
          · 不是"处方药"品类（处方依赖·用户买不了）<br/>
          · 不是"保健品"品类（Swisse 先占·智商税争议）<br/>
          · 不是"OTC 中成药"品类（葵花先占·药味老化）<br/>
          · 而是 <strong>"藤茶 DMY 天然草本护肝"</strong>——新品类无先占者，可以成为第一品牌。`,
        accent: c.color,
    })}
  </div>
</section>`;
}

// ============================================================
// 3.2 特劳特定位 · 一句话
// ============================================================
function renderSub2({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
    const items = data?.items || [];

    // 用户品类认知 VOC：用户对天然/草本/藤茶/水飞蓟的认知表达
    const positionRe = /天然|草本|植物|化学|西药|中药|副作用|温和|安全|水飞蓟.*吸收|不伤|藤茶|二氢杨梅素|DMY|选哪个|到底.*用|不敢吃药/i;
    const positionItems = items.filter(it => positionRe.test(it.content || ''));
    const positionEvidence = LA.getEvidence(positionItems, { top: 3, seed: 321, minChars: 15, contentMatch: /天然|草本|植物|藤茶|中草药|传统|千年|herbal|natural|botanical/i });

    const options = [
        {
            slogan: '千年藤茶·天然护肝',
            strategy: '品类占位',
            troutMethod: '开创新品类',
            pros: '历史背书+天然安全+品类空白',
            cons: '"藤茶"用户不认识，需教育成本',
            score: 90,
        },
        {
            slogan: 'DMY 98%·科学护肝新选择',
            strategy: '差异化定位',
            troutMethod: '重新定位竞品',
            pros: '科学数据支撑·对标水飞蓟"吸收差"',
            cons: '"DMY"太学术·记不住',
            score: 78,
        },
        {
            slogan: '不伤胃的护肝片',
            strategy: '痛点占位',
            troutMethod: '聚焦法则',
            pros: '直击易善复/水飞蓟副作用痛点',
            cons: '防御性定位·天花板低',
            score: 72,
        },
    ];

    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} · TROUT POSITIONING`,
        title: sub,
        subtitle: '能写在盒子上的一句话 · 能让店员一句话推荐 · 能让用户一句话记住',
        color: c.color,
    })}

    <div style="display:grid; gap:18px; margin-top:24px;">
      ${options.map((opt, i) => `
      <div style="padding:24px; background:${i === 0 ? c.color + '10' : 'var(--bg-1)'}; border:${i === 0 ? '2px' : '1px'} solid ${i === 0 ? c.color + '55' : 'var(--border)'}; border-radius:var(--radius-md); position:relative;">
        ${i === 0 ? `<div style="position:absolute; top:12px; right:16px; padding:4px 12px; background:${c.color}; color:#fff; border-radius:12px; font-size:0.7rem; font-weight:700;">★ 推荐</div>` : ''}
        <div style="display:grid; grid-template-columns:1fr 140px; gap:20px; align-items:center;">
          <div>
            <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.12em; font-weight:700; margin-bottom:8px;">方案 ${i+1} · ${esc(opt.strategy)}</div>
            <div style="font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--text-1); margin-bottom:12px;">"${esc(opt.slogan)}"</div>
            <div style="color:var(--text-2); font-size:0.82rem; line-height:1.6;">
              <strong>特劳特方法</strong>：${esc(opt.troutMethod)}<br/>
              <strong style="color:${BRAND.JIANG_GREEN};">优势</strong>：${esc(opt.pros)}<br/>
              <strong style="color:${BRAND.CORAL};">风险</strong>：${esc(opt.cons)}
            </div>
          </div>
          <div style="text-align:center;">
            <div style="width:100px; height:100px; border-radius:50%; background:${i === 0 ? c.color : 'var(--text-3)'}15; border:3px solid ${i === 0 ? c.color : 'var(--text-3)'}44; display:flex; align-items:center; justify-content:center; flex-direction:column; margin:0 auto;">
              <div style="font-family:var(--font-head); font-size:2rem; font-weight:900; color:${i === 0 ? c.color : 'var(--text-3)'};">${opt.score}</div>
              <div style="font-size:0.62rem; color:var(--text-3);">综合评分</div>
            </div>
          </div>
        </div>
      </div>`).join('')}
    </div>

    ${positionEvidence.length > 0 ? `
    <div style="margin-top:20px; padding:16px; background:${BRAND.TENGCHA_GREEN}06; border:1px solid ${BRAND.TENGCHA_GREEN}30; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${BRAND.TENGCHA_GREEN}; letter-spacing:0.12em; margin-bottom:10px; font-weight:700;">VOC 验证 · 用户天然/草本品类认知（${positionItems.length} 条相关 VOC）</div>
      <div style="display:grid; grid-template-columns:repeat(${Math.min(positionEvidence.length, 3)}, 1fr); gap:10px;">
        ${positionEvidence.map(ev => {
            const raw = (ev.content || '').slice(0, 90);
            const trans = isEnglish(raw) ? getTranslation(ev.content) : null;
            const display = trans ? trans.slice(0, 90) : raw;
            const badge = trans ? ' <span style="color:' + BRAND.WARM_ORANGE + ';font-size:0.56rem;">🔄已翻译</span>' : (isEnglish(raw) ? ' <span style="color:' + BRAND.WARM_ORANGE + ';font-size:0.56rem;">EN</span>' : '');
            return `
        <div style="padding:10px 12px; background:var(--bg-1); border-left:3px solid ${BRAND.TENGCHA_GREEN}; border-radius:4px;">
          <div style="font-size:0.74rem; color:var(--text-1); line-height:1.45;">"${esc(display)}"${badge}</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>` : ''}

    ${renderInsightHero({
        eyebrow: 'TROUT VERDICT',
        title: '推荐定位："千年藤茶 · 天然护肝"',
        subtitle: `
          <strong>心智阶梯</strong>：想到"天然护肝" → 第一反应"藤茶" → 江中肝纯片<br/>
          <strong>写在盒子上</strong>：<span style="padding:4px 12px; background:${BRAND.TENGCHA_GREEN}15; border:1px solid ${BRAND.TENGCHA_GREEN}44; border-radius:4px; font-weight:700; color:${BRAND.TENGCHA_GREEN};">千年藤茶 · 天然护肝</span><br/>
          <strong>店员话术</strong>："这是用千年藤茶做的天然护肝片，不像水飞蓟那么伤胃"<br/>
          <strong>教育路径</strong>："藤茶"先行（安全/文化）→ "DMY"跟进（科学/数据）
        `,
        color: BRAND.TENGCHA_GREEN,
    })}
  </div>
</section>`;
}

// ============================================================
// 3.3 差异化 MOAT
// ============================================================
function renderSub3({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
    const moats = [
        { name: '千年食饮史', desc: '藤茶（显齿蛇葡萄叶）在中国西南被食饮千年，不是新发明的化学成分。用户心理：历史=安全。', icon: '📜', color: BRAND.TENGCHA_GREEN, type: '文化壁垒' },
        { name: 'DMY 总黄酮 98%', desc: '二氢杨梅素纯度远超水飞蓟宾（30-80%），有临床研究支持（解酒/抗氧化/保肝）。', icon: '🔬', color: BRAND.TECH_BLUE, type: '科学壁垒' },
        { name: '中国特有原料', desc: '藤茶是中国西南特有植物，国际品牌无法复制原料供应链。对标：片仔癀的"国宝配方"逻辑。', icon: '🇨🇳', color: BRAND.CORAL, type: '供应链壁垒' },
        { name: 'OTC 药品身份', desc: '相比 Swisse/汤臣倍健的"保健品"身份，OTC 药品 = 功效背书 + 医疗级信任 + 药店核心陈列。', icon: '💊', color: BRAND.LIVER_AMBER, type: '监管壁垒' },
        { name: '江中品牌资产', desc: '江中 = 胃肠道专家（健胃消食片国民认知），延伸到"肝"符合品牌心智——从"胃"到"肝"是自然延伸。', icon: '🏷️', color: BRAND.JIANG_GREEN, type: '品牌壁垒' },
    ];

    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} · DIFFERENTIATION MOAT`,
        title: sub,
        subtitle: '五重壁垒构成肝纯片的差异化护城河——竞品很难同时复制。',
        color: c.color,
    })}

    <div style="display:grid; gap:14px; margin-top:24px;">
      ${moats.map((m, i) => `
      <div style="display:grid; grid-template-columns:60px 1fr; gap:16px; padding:18px 22px; background:${m.color}06; border:1px solid ${m.color}33; border-left:4px solid ${m.color}; border-radius:var(--radius-md);">
        <div style="text-align:center;">
          <div style="font-size:1.6rem; margin-bottom:4px;">${m.icon}</div>
          <div style="color:${m.color}; font-size:0.62rem; font-weight:700;">${esc(m.type)}</div>
        </div>
        <div>
          <div style="font-weight:700; color:var(--text-1); font-size:0.92rem; margin-bottom:6px;">${esc(m.name)}</div>
          <div style="color:var(--text-2); font-size:0.84rem; line-height:1.6;">${esc(m.desc)}</div>
        </div>
      </div>`).join('')}
    </div>

    ${renderDecisionList([
        '五重壁垒中<strong>任何一重</strong>都不够独特——但<strong>五重叠加</strong>后形成独一无二的组合',
        '对标"右旋"案例：右旋靠"左旋不吸收"的科学故事重新定位品类——肝纯片靠"水飞蓟吸收差"做同样的事',
        '教育路径分两步：先推"藤茶"（情感·安全·文化），再推"DMY"（理性·科学·数据）',
        '风险：如果"藤茶"认知教育失败，需准备 Plan B = "不伤胃的护肝片"（痛点占位）',
    ], { accent: c.color, title: 'MOAT VERDICT · 护城河结论' })}
  </div>
</section>`;
}

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