// MLE monogram — three distinct letters sharing a geometric grid.
// Each letter occupies an equal-width column, all same height, same stroke.
// M: two upstrokes with a V-peak center.
// L: vertical + horizontal baseline.
// E: vertical + three horizontal arms.

function MLEMark({ size = 32, color = 'currentColor', strokeWidth = 2 }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 60 40" fill="none"
         xmlns="http://www.w3.org/2000/svg"
         style={{display:'block'}}>
      {/* M — cols 0..16 */}
      <path d="M2 38 L2 2 L10 14 L18 2 L18 38"
            stroke={color} strokeWidth={strokeWidth}
            fill="none" strokeLinejoin="miter"/>
      {/* L — cols 22..38 */}
      <path d="M22 2 L22 38 L38 38"
            stroke={color} strokeWidth={strokeWidth}
            fill="none" strokeLinejoin="miter"/>
      {/* E — cols 42..58 */}
      <path d="M58 2 L42 2 L42 38 L58 38"
            stroke={color} strokeWidth={strokeWidth}
            fill="none" strokeLinejoin="miter"/>
      <path d="M42 20 L54 20"
            stroke={color} strokeWidth={strokeWidth}/>
    </svg>
  );
}

window.MLEMark = MLEMark;