// ==============================================================================
// 肝纯片 v2 · Ch5 落地行动
// ==============================================================================
// 5.1 4P 配称 · 产品+渠道+推广+价格
// 5.2 10 亿路径 · 3 阶段 Roadmap
// 5.3 P0/P1 行动清单 + 包装优化
// ==============================================================================

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

// ============================================================
// 5.1 4P 配称
// ============================================================
function renderSub1({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
    const ps = [
        {
            p: 'Product 产品', icon: '📦', color: BRAND.LIVER_AMBER,
            items: [
                '核心 SKU：瓶装日常（28天）+ 板装便携（7天）+ 礼盒（双瓶/四瓶）',
                '剂型：片剂（主力）+ 液体口服液（应酬应急·储备）',
                '包装：去药盒感 → 新中式设计 · 藤茶绿+琥珀金主色调',
                '12 SKU 矩阵覆盖 4 场景 × 3 价格带',
            ],
        },
        {
            p: 'Place 渠道', icon: '🏪', color: BRAND.TECH_BLUE,
            items: [
                '药线：大参林/一心堂 3w 门店 · 店员"一句话推荐"培训',
                '电商：京东自营+天猫旗舰 · 种草→搜索→转化闭环',
                '餐饮：锡纸分食 B2B2C · 白领酒局/商务宴请',
                '礼品：节点营销（父亲节/中秋/春节）· 企业团购',
            ],
        },
        {
            p: 'Promotion 推广', icon: '📢', color: BRAND.WARM_ORANGE,
            items: [
                '小红书：千年藤茶故事 + 打工人护肝 + 送爸爸礼盒',
                '抖音：场景剧（酒局/熬夜/体检）+ 达人口播',
                '药店：店员培训 + 端架陈列 + "藤茶科普"小册子',
                '不做：硬广洗脑（海王金樽教训）· 不做夸大宣称',
            ],
        },
        {
            p: 'Price 价格', icon: '💰', color: BRAND.JIANG_GREEN,
            items: [
                '日常装：¥128-168/盒（28天）· vs Swisse 便宜 15-30%',
                '便携装：¥68-98/盒（7天）· 打工人入门价',
                '礼盒装：¥298-898（双瓶/四瓶）· 对标东阿阿胶',
                '液体装：¥15-30/支 · 便利店/餐饮渠道',
            ],
        },
    ];

    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} · 4P MIX`,
        title: sub,
        subtitle: '从 VOC 洞察反推 4P 配称——每个 P 都有 VOC 证据支撑。',
        color: c.color,
    })}

    <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:24px;">
      ${ps.map(p => `
      <div style="padding:22px; background:${p.color}08; border:1px solid ${p.color}33; border-top:3px solid ${p.color}; border-radius:var(--radius-md);">
        <div style="display:flex; align-items:center; gap:8px; margin-bottom:14px;">
          <span style="font-size:1.3rem;">${p.icon}</span>
          <div class="text-mono text-xs" style="color:${p.color}; font-weight:700; letter-spacing:0.12em;">${esc(p.p)}</div>
        </div>
        <ul style="margin:0; padding-left:18px; color:var(--text-1); font-size:0.82rem; line-height:1.65;">
          ${p.items.map(i => `<li>${esc(i)}</li>`).join('')}
        </ul>
      </div>`).join('')}
    </div>
  </div>
</section>`;
}

// ============================================================
// 5.2 10 亿路径
// ============================================================
function renderSub2({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
    const phases = [
        {
            phase: 'Y1 · 验证期', target: '5 亿', color: BRAND.TECH_BLUE,
            channels: [
                { name: '药线', target: '3 亿', pct: '60%', action: '大参林/一心堂铺货 + 店员培训' },
                { name: '电商', target: '2 亿', pct: '40%', action: '京东自营 + XHS/抖音种草' },
            ],
            kpi: 'NPS ≥ 40 · 复购率 ≥ 25% · 药店动销率 ≥ 60%',
        },
        {
            phase: 'Y2 · 复制期', target: '3 亿', color: BRAND.WARM_ORANGE,
            channels: [
                { name: '礼品', target: '1.5 亿', pct: '50%', action: '新中式礼盒 + 节点营销' },
                { name: '餐饮', target: '1.5 亿', pct: '50%', action: '锡纸分食 B2B2C + 便利店' },
            ],
            kpi: '礼盒客单价 ≥ ¥398 · 餐饮覆盖 5000 家 · 品牌提及率 ↑50%',
        },
        {
            phase: 'Y3 · 升级期', target: '2 亿', color: BRAND.JIANG_GREEN,
            channels: [
                { name: '国际', target: '1 亿', pct: '50%', action: 'DMY 出海 · Amazon/iHerb' },
                { name: '品类升级', target: '1 亿', pct: '50%', action: '功能饮品 + 联名 + 新品' },
            ],
            kpi: 'Amazon BSR Top 20 · 功能饮品 GMV ≥ 5000 万',
        },
    ];

    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} · 10B ROADMAP`,
        title: sub,
        subtitle: '药线 3 亿 + 礼品 2.5 亿 + 餐饮 2.5 亿 + 电商 2 亿 = 10 亿 / 3 年',
        color: c.color,
    })}

    <div style="display:grid; gap:18px; margin-top:24px;">
      ${phases.map(ph => `
      <div style="padding:22px; background:${ph.color}08; border:1px solid ${ph.color}33; border-left:4px solid ${ph.color}; border-radius:var(--radius-md);">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
          <div>
            <div class="text-mono text-xs" style="color:${ph.color}; font-weight:700; letter-spacing:0.15em;">${esc(ph.phase)}</div>
          </div>
          <div style="font-family:var(--font-head); font-size:1.8rem; font-weight:800; color:${ph.color};">${esc(ph.target)}</div>
        </div>
        <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:12px;">
          ${ph.channels.map(ch => `
          <div style="padding:12px; background:var(--bg-1); border-radius:var(--radius-sm);">
            <div style="display:flex; justify-content:space-between;">
              <span style="font-weight:700; color:var(--text-1); font-size:0.84rem;">${esc(ch.name)}</span>
              <span style="color:${ph.color}; font-size:0.78rem; font-weight:700;">${esc(ch.target)}（${esc(ch.pct)}）</span>
            </div>
            <div style="color:var(--text-2); font-size:0.78rem; margin-top:4px;">${esc(ch.action)}</div>
          </div>`).join('')}
        </div>
        <div style="color:var(--text-3); font-size:0.74rem; border-top:1px dashed ${ph.color}33; padding-top:8px;">
          <strong>KPI</strong>：${esc(ph.kpi)}
        </div>
      </div>`).join('')}
    </div>
  </div>
</section>`;
}

// ============================================================
// 5.3 P0/P1 行动清单 + 包装优化
// ============================================================
function renderSub3({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
    const actions = [
        { priority: 'P0', action: '确认品类定位："千年藤茶·天然护肝"', owner: '品牌部', timeline: '1 周', status: '待确认' },
        { priority: 'P0', action: '包装优化：去药盒感 → 新中式设计（不再"放蓬塔"）', owner: '设计部', timeline: '2 周', status: '重点项' },
        { priority: 'P0', action: '药店店员"一句话推荐"话术手册', owner: '渠道部', timeline: '2 周', status: '待启动' },
        { priority: 'P0', action: '肝纯片自身 VOC 补充采集（抖音购买评论/淘宝评论）', owner: '数据团队', timeline: '1 周', status: '数据缺口' },
        { priority: 'P1', action: '12 SKU 矩阵设计（日常/便携/礼盒/液体）', owner: '产品部', timeline: '1 月', status: '待排期' },
        { priority: 'P1', action: '小红书种草内容矩阵搭建', owner: '电商部', timeline: '1 月', status: '待启动' },
        { priority: 'P1', action: '"藤茶"认知教育内容库（科普文/视频脚本）', owner: '品牌部', timeline: '1 月', status: '待启动' },
        { priority: 'P1', action: '礼盒装设计打样（¥298/¥598 两档）', owner: '设计部', timeline: '2 月', status: '待排期' },
        { priority: 'P2', action: '液体口服液剂型开发（餐饮/便利店渠道）', owner: '研发部', timeline: '3 月', status: '远期储备' },
        { priority: 'P2', action: 'DMY 出海可行性研究（Amazon/iHerb）', owner: '国际部', timeline: '3 月', status: '远期储备' },
    ];

    const p0 = actions.filter(a => a.priority === 'P0');
    const p1 = actions.filter(a => a.priority === 'P1');
    const p2 = actions.filter(a => a.priority === 'P2');

    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} · ACTION PLAN`,
        title: sub,
        subtitle: 'P0 立即 / P1 一月内 / P2 远期 · 特别标注：包装优化是第一优先级',
        color: c.color,
    })}

    ${renderStatStrip([
        { num: p0.length, label: 'P0 · 立即', color: BRAND.CORAL },
        { num: p1.length, label: 'P1 · 1月内', color: BRAND.WARM_ORANGE },
        { num: p2.length, label: 'P2 · 远期', color: 'var(--text-3)' },
        { num: actions.length, label: '总行动项', color: c.color },
    ])}

    ${renderCompareTable({
        title: 'P0 · 立即执行（本周-2周）',
        headers: ['行动', '负责方', '时间线', '状态'],
        rows: p0.map(a => [
            { html: `<strong>${esc(a.action)}</strong>`, bold: true },
            a.owner,
            a.timeline,
            { html: `<span style="color:${BRAND.CORAL}; font-weight:700;">${esc(a.status)}</span>` },
        ]),
        accent: BRAND.CORAL,
    })}

    <div style="margin-top:18px;">
    ${renderCompareTable({
        title: 'P1 · 1 月内启动',
        headers: ['行动', '负责方', '时间线', '状态'],
        rows: p1.map(a => [
            a.action, a.owner, a.timeline,
            { html: `<span style="color:${BRAND.WARM_ORANGE};">${esc(a.status)}</span>` },
        ]),
        accent: BRAND.WARM_ORANGE,
    })}
    </div>

    <div style="margin-top:18px;">
    ${renderCompareTable({
        title: 'P2 · 远期储备',
        headers: ['行动', '负责方', '时间线', '状态'],
        rows: p2.map(a => [a.action, a.owner, a.timeline, a.status]),
        accent: 'var(--text-3)',
    })}
    </div>

    <div style="margin-top:24px; padding:20px 24px; background:${BRAND.LIVER_AMBER}08; border-left:3px solid ${BRAND.LIVER_AMBER}; border-radius:6px;">
      <div class="text-mono text-xs" style="color:${BRAND.LIVER_AMBER}; letter-spacing:0.15em; margin-bottom:10px; font-weight:700;">⚠️ 包装优化专项</div>
      <div style="color:var(--text-1); font-size:0.88rem; line-height:1.7;">
        上版报告建议"放蓬塔"偏了（江旭反馈）。v2 包装方向：<br/>
        · <strong>去药盒感</strong>：不像易善复/葵花那种白底药盒<br/>
        · <strong>新中式美学</strong>：藤茶绿 + 琥珀金 + 中国风纹理<br/>
        · <strong>送得出手</strong>：礼盒装对标东阿阿胶/小罐茶的质感<br/>
        · <strong>便携友好</strong>：板装可放进包/抽屉·不尴尬
      </div>
    </div>

    ${renderInsightHero({
        eyebrow: 'CLOSING',
        title: '从 VOC 到行动：10 亿目标的起点是品类重定位',
        subtitle: `本报告 v2 回应了江旭提出的三个缺失：<strong style="color:${BRAND.LIVER_AMBER};">① 自身产品画像</strong>（Ch1）、<strong style="color:${BRAND.TECH_BLUE};">② VOC 分类归拢</strong>（Ch0）、<strong style="color:${BRAND.ROSE};">③ 竞品正反面</strong>（Ch2）。加上里斯×特劳特定位（Ch3）、四大场景机会（Ch4），最终收敛到 10 条可执行行动。<br/>核心一句话：<strong style="color:${BRAND.TENGCHA_GREEN};">千年藤茶 · 天然护肝</strong>。`,
        color: c.color,
    })}
  </div>
</section>`;
}

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