// Logo.jsx — popor 圈状字标（五个圆连在一起 · 深蓝 · R 足下深红）
// 注册商标 popor：五个圆形并连，字身深海蓝，末字 R 足下一抹深红 —— 一半海水，一半火焰。
const { createElement: hL } = React;

function PoporMark({ height = 26, sea = '#1a2840', flame = '#8B2020' }) {
  const w = 158, h = 46;
  const sw = 3.6;
  const r = 9;
  const cy = 18;
  const gap = 27;             // 圆心间距（略小于 2r，使其相连）
  const x0 = 14;
  const xs = [0, 1, 2, 3, 4].map(i => x0 + i * gap);
  const baseY = cy + r;
  const desc = 38;

  const ring = (cx, key) => hL('circle', { key, cx, cy, r, fill: 'none', stroke: sea, strokeWidth: sw });
  const stem = (x, key) => hL('line', { key, x1: x, y1: cy - r + 1, x2: x, y2: desc, stroke: sea, strokeWidth: sw, strokeLinecap: 'round' });
  // 连体短杆：相邻圆在基线处用一小段相连
  const link = (x1, x2, key) => hL('line', { key, x1, y1: baseY, x2, y2: baseY, stroke: sea, strokeWidth: sw, strokeLinecap: 'round' });

  return hL('svg', { width: height * (w / h), height, viewBox: `0 0 ${w} ${h}`, role: 'img', 'aria-label': 'popor' }, [
    // 连体基线
    link(xs[0], xs[4] + r, 'lk'),
    // p
    stem(xs[0] - r, 'p1s'), ring(xs[0], 'p1'),
    // o
    ring(xs[1], 'o1'),
    // p
    stem(xs[2] - r, 'p2s'), ring(xs[2], 'p2'),
    // o
    ring(xs[3], 'o2'),
    // r（末圆 · 足下深红，不带降部）
    ring(xs[4], 'r1'),
    // R 足下深红
    hL('line', { key: 'flame', x1: xs[4] - r + 1, y1: baseY + 6, x2: xs[4] + r + 1, y2: baseY + 6, stroke: flame, strokeWidth: 4.6, strokeLinecap: 'round' }),
  ]);
}

Object.assign(window, { PoporMark });