// Logo.jsx — the MY monogram and the Made Yours wordmark.
// The mark is a single path in currentColor, so it takes whatever text colour surrounds it.
const MARK_PATH = 'M14.5 80V20H27.3L50 45.7 72.7 20H85.5V80H74.5V34.5L55.5 56.1V80H44.5V56.1L25.5 34.5V80Z M8 76h24v8H8z M38 76h24v8H38z M68 76h24v8H68z';

function LogoMark({ height = 32, style }) {
  return (
    <svg viewBox="4 16 92 72" style={{ height, display: 'block', flexShrink: 0, ...style }} aria-hidden="true">
      <path fill="currentColor" d={MARK_PATH} />
    </svg>
  );
}

// Primary lockup is the name only; pass `tagline` for the secondary "Custom Engraving" version.
function Wordmark({ size = 18, tagline = false }) {
  return (
    <span style={{ display: 'inline-flex', flexDirection: 'column', gap: size * 0.45 }}>
      <span className="mys-wordmark" style={{ fontSize: size }}>Made Yours</span>
      {tagline && <span className="mys-tagline">Custom Engraving</span>}
    </span>
  );
}

window.LogoMark = LogoMark;
window.Wordmark = Wordmark;