/* M-Dash logo — minimal mark.
   Concept: a single bold "M" letterform where the middle valley
   doubles as a downward arrow / flow connector. One color, one
   geometric shape, scales clean from 16px favicon to hero size. */

(function () {
  const Logo = ({ size = 28, mono = false }) => {
    const accent = mono ? 'currentColor' : 'var(--accent, #0EA5E9)';
    const accentDeep = mono ? 'currentColor' : 'var(--accent-active, #0369A1)';

    return (
      <svg
        width={size}
        height={size}
        viewBox="0 0 32 32"
        xmlns="http://www.w3.org/2000/svg"
        aria-label="M-Dash logo"
        style={{ display: 'block', flexShrink: 0 }}
      >
        <defs>
          <linearGradient id="mdash-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={accent} />
            <stop offset="100%" stopColor={accentDeep} />
          </linearGradient>
        </defs>

        {/* rounded tile */}
        <rect x="0" y="0" width="32" height="32" rx="8" fill="url(#mdash-grad)" />

        {/* the "M" — two thick strokes meeting at a centered point.
            The valley is deliberately deep so it reads as both an "M"
            and a downward "flow" arrow into a single output. */}
        <path
          d="M 8 23 L 8 9 L 16 17 L 24 9 L 24 23"
          fill="none"
          stroke="white"
          strokeWidth="2.6"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    );
  };

  window.MDashLogo = Logo;
})();