/**
 * 小红书封面 v5 · 圆角卡片 + 卡通插画风格
 * 奶白底色 + 大圆角 + 简洁层级
 */
export function xiaohongshuCard(renderData) {
  const { title='', body='', subtitle='', tag='', cssVars={} } = renderData;
  const v = cssVars || {};
  const getv = (k) => v[k] || v['--'+k] || v['--'+k.replace(/([A-Z])/g,'-$1').toLowerCase()];

  // 配色：奶白底 + 深绿/深棕文字 + 点缀色
  const bg       = getv('bg')      || '#FDF8F3';      // 奶白底色
  const cardBg   = getv('cardBg')  || '#FFFFFF';      // 纯白卡片
  const primary  = getv('primary') || '#2D5016';      // 深墨绿
  const accent   = getv('accent')  || '#E07B39';      // 焦糖橙
  const blue     = getv('blue')    || '#4A90A4';      // 雾蓝
  const green    = getv('green')   || '#5B8C5A';      // 苔藓绿
  const muted    = getv('muted')   || '#8B8680';      // 灰棕
  const textDark = '#1A1A1A';

  const titleText = title || '零手搓 AI 封面生成器';
  const subLines = (subtitle || '不用GPU|纯代码渲染|开源免费').split('|').filter(Boolean);
  const techStack = (tag || 'Puppeteer,Node.js,Express').split(',').map(s=>s.trim()).filter(Boolean);

  // 卡通场景 SVG - 程序员在小桌子前工作
  const cartoonSVG = `<svg viewBox="0 0 400 280" style="width:100%;height:auto">
    <!-- 桌子 -->
    <ellipse cx="200" cy="240" rx="140" ry="25" fill="#D4A574"/>
    <rect x="80" y="150" width="240" height="90" rx="8" fill="#C49A6C"/>
    <!-- 笔记本电脑 -->
    <rect x="140" y="130" width="120" height="80" rx="6" fill="#3A3A3A"/>
    <rect x="150" y="140" width="100" height="60" rx="2" fill="#5B8C5A"/>
    <rect x="155" y="145" width="90" height="8" rx="1" fill="#7BC47B"/>
    <rect x="155" y="158" width="60" height="4" rx="1" fill="#9AD89A"/>
    <rect x="155" y="168" width="75" height="4" rx="1" fill="#9AD89A"/>
    <!-- 人 -->
    <ellipse cx="200" cy="95" rx="35" ry="40" fill="#F5D0C5"/> <!-- 头 -->
    <path d="M165 80 Q200 60 235 80" stroke="#4A3728" stroke-width="12" fill="none"/> <!-- 头发 -->
    <ellipse cx="185" cy="90" rx="4" ry="5" fill="#4A3728"/> <!-- 眼 -->
    <ellipse cx="215" cy="90" rx="4" ry="5" fill="#4A3728"/>
    <path d="M190 115 Q200 120 210 115" stroke="#D4A0A0" stroke-width="3" fill="none"/> <!-- 嘴 -->
    <rect x="165" y="130" width="70" height="60" rx="20" fill="#E07B39"/> <!-- 身体 -->
    <rect x="150" y="145" width="20" height="50" rx="10" fill="#F5D0C5"/> <!-- 手臂 -->
    <rect x="230" y="145" width="20" height="50" rx="10" fill="#F5D0C5"/>
    <!-- 咖啡杯 -->
    <rect x="280" y="180" width="25" height="30" rx="4" fill="#FFF"/>
    <rect x="283" y="175" width="19" height="8" rx="2" fill="#6B4423"/>
    <path d="M305 190 Q315 190 315 200 Q315 210 305 210" stroke="#FFF" stroke-width="3" fill="none"/>
    <!-- 植物 -->
    <rect x="90" y="160" width="8" height="40" fill="#8B4513"/>
    <ellipse cx="94" cy="155" rx="20" ry="25" fill="#5B8C5A"/>
    <ellipse cx="85" cy="140" rx="12" ry="15" fill="#6B9B6A"/>
    <ellipse cx="103" cy="145" rx="12" ry="15" fill="#6B9B6A"/>
    <!-- 代码气泡 -->
    <rect x="260" y="60" width="80" height="50" rx="8" fill="#FFF" stroke="#E0E0E0" stroke-width="2"/>
    <rect x="270" y="72" width="40" height="6" rx="2" fill="#5B8C5A"/>
    <rect x="270" y="84" width="55" height="6" rx="2" fill="#4A90A4"/>
    <rect x="270" y="96" width="35" height="6" rx="2" fill="#E07B39"/>
    <polygon points="260,105 270,95 270,115" fill="#FFF" stroke="#E0E0E0" stroke-width="0"/>
    <!-- 装饰星星 -->
    <text x="350" y="100" font-size="20" fill="#FFD700">✦</text>
    <text x="60" y="80" font-size="16" fill="#4A90A4">✦</text>
  </svg>`;

  return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><style>
* {margin:0;padding:0;box-sizing:border-box}
body {
  width:1080px;height:1440px;overflow:hidden;
  font-family:'Noto Sans CJK SC','WenQuanYi Micro Hei','PingFang SC',sans-serif;
  background:${bg};position:relative;display:flex;justify-content:center;align-items:center;
}

/* 外层大卡片 */
.card {
  width:960px;height:1320px;background:${cardBg};border-radius:60px;
  box-shadow:0 20px 80px rgba(0,0,0,0.08);
  display:flex;flex-direction:column;padding:50px 60px 40px;
  position:relative;overflow:hidden;
}

/* 装饰圆 */
.deco-circle-1 {
  position:absolute;top:-100px;right:-80px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,${accent}18 0%,transparent 70%);
}
.deco-circle-2 {
  position:absolute;bottom:200px;left:-60px;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle,${blue}12 0%,transparent 70%);
}

/* 顶行标签 */
.top-row {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
}
.tag-group {display:flex;gap:12px}
.tag {
  padding:10px 22px;border-radius:24px;font-size:20px;font-weight:700;
  background:${bg};border:2px solid ${accent}30;color:${primary};
}
.tag.hl {background:${accent}15;border-color:${accent}50}
.corner-text {
  font-size:18px;color:${muted};font-weight:500;
}

/* 主标题区 */
.title-block {text-align:center;margin-bottom:20px}
.title-block h1 {
  font-size:72px;font-weight:800;color:${textDark};line-height:1.2;letter-spacing:2px;
}
.title-block .hl {color:${primary};position:relative;display:inline-block}
.title-block .hl::after {
  content:'';position:absolute;bottom:8px;left:-4px;right:-4px;height:16px;
  background:${accent}40;border-radius:8px;z-index:-1;
}

/* 副标题 */
.subtitle-row {
  display:flex;justify-content:center;gap:16px;margin-bottom:32px;flex-wrap:wrap;
}
.sub-pill {
  padding:10px 24px;border-radius:30px;background:${bg};
  font-size:22px;font-weight:600;color:${primary};
}

/* 卡通区 */
.cartoon-area {
  flex:1;display:flex;align-items:center;justify-content:center;
  margin:20px 0;
}
.cartoon-box {
  width:420px;height:300px;
}

/* 底部信息卡 */
.bottom-cards {
  display:flex;gap:20px;margin-bottom:24px;
}
.info-card {
  flex:1;background:${bg};border-radius:24px;padding:24px 20px;text-align:center;
  border:2px solid transparent;transition:border-color 0.2s;
}
.info-card:hover {border-color:${accent}40}
.info-card .num {
  font-size:48px;font-weight:800;color:${primary};line-height:1;
}
.info-card .num small {font-size:24px;font-weight:600;margin-left:4px}
.info-card .label {
  font-size:20px;color:${muted};margin-top:8px;font-weight:500;
}

/* 底部技术栈 */
.tech-row {
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 0;border-top:2px solid ${bg};
}
.tech-row .t-label {
  font-size:18px;color:${muted};font-weight:600;
}
.tech-row .t-chip {
  padding:8px 18px;border-radius:16px;font-size:18px;font-weight:600;
  background:${cardBg};border:2px solid ${accent}25;color:${primary};
}

/* 水印 */
.wm {
  position:absolute;bottom:20px;right:40px;font-size:16px;color:${muted}40;
}
</style></head><body>

<div class="card">
  <div class="deco-circle-1"></div>
  <div class="deco-circle-2"></div>

  <div class="top-row">
    <div class="tag-group">
      <span class="tag hl">🤖 AI辅助开发</span>
      <span class="tag">💰 开源免费</span>
    </div>
    <span class="corner-text"></span>
  </div>

  <div class="title-block">
    <h1>${titleText.replace(/(.{4,6})(.+)/, '$1<span class="hl">$2</span>')}</h1>
  </div>

  <div class="subtitle-row">
    ${subLines.map(s=>`<span class="sub-pill">${s}</span>`).join('')}
  </div>

  <div class="cartoon-area">
    <div class="cartoon-box">${cartoonSVG}</div>
  </div>

  <div class="bottom-cards">
    <div class="info-card">
      <div class="num">0<small>GPU</small></div>
      <div class="label">纯CSS排版</div>
    </div>
    <div class="info-card">
      <div class="num">${techStack.length}<small>项</small></div>
      <div class="label">开源技术栈</div>
    </div>
    <div class="info-card">
      <div class="num">∞<small>扩展</small></div>
      <div class="label">模块化设计</div>
    </div>
  </div>

  <div class="tech-row">
    <span class="t-label">🛠 技术栈</span>
    ${techStack.slice(0,5).map(t=>`<span class="t-chip">${t}</span>`).join('')}
  </div>

</div>

</body></html>`;
}
