/* ============================================================
   ETP SIGNATURE MARK - broken circle, gap at 1-2 o'clock
   Single stroke, never filled, never rotated, never closed.
   ============================================================ */

const Mark = ({ size = 48, color = '#1a6b5a', stroke = null, title = 'End the Pattern' }) => {
  // Stroke weight scales per icon guide
  // 16px → 2.5, 24px → 2.5, 36px → 2.5, 48px → 3, 64px → 3, 96px+ → 3.5
  let sw = stroke;
  if (sw == null) {
    if (size <= 36) sw = 2.5;
    else if (size <= 64) sw = 3;
    else sw = 3.5;
  }
  // Normalize to 100x100 viewBox
  const r = 42;
  const cx = 50, cy = 50;
  // Gap from 350° to 55° (per guide). Arc draws from 55° around to 350° (≈300°).
  const startDeg = 55;
  const endDeg = 350;
  const toXY = (deg) => {
    const rad = (deg - 90) * Math.PI / 180; // 0deg = top
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  };
  const [x1, y1] = toXY(startDeg);
  const [x2, y2] = toXY(endDeg);
  const sweep = ((endDeg - startDeg + 360) % 360); // 295
  const largeArc = sweep > 180 ? 1 : 0;
  const d = `M ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2}`;
  // Stroke in viewBox units - viewBox is 100, target px size = size, scale stroke
  const strokeVB = (sw / size) * 100;

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      role="img"
      aria-label={title}
      style={{ display: 'block', flex: 'none' }}
    >
      <path
        d={d}
        fill="none"
        stroke={color}
        strokeWidth={strokeVB}
        strokeLinecap="round"
      />
    </svg>
  );
};

// Avatar: mark on a solid colored circle background
const MarkAvatar = ({ size = 96, bg = '#1a6b5a', mark = '#f4f1eb' }) => (
  <div
    style={{
      width: size,
      height: size,
      background: bg,
      borderRadius: '50%',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      flex: 'none',
    }}
  >
    <Mark size={size * 0.55} color={mark} />
  </div>
);

window.Mark = Mark;
window.MarkAvatar = MarkAvatar;