/* Wordmark — the brand logo rendered as HTML so webfonts apply reliably */

function Wordmark({ size = 44, tag = false, color }) {
  const sonalSize = size;
  const studioSize = size * 0.86;
  const studioOffset = sonalSize * 0.92;
  const tagSize = Math.max(9, size * 0.18);

  return (
    <span className="wordmark" style={{ color: color || "var(--ink)" }}>
      <span className="wm-stack">
        <span className="wm-sonal" style={{ fontSize: sonalSize }}>Sonal</span>
        <span className="wm-studio" style={{ fontSize: studioSize, transform: `translate(${studioOffset}px, -${sonalSize * 0.18}px)` }}>studio</span>
      </span>
      {tag && (
        <span className="wm-tag" style={{ fontSize: tagSize }}>
          Web design · Ireland
        </span>
      )}
      <style>{`
        .wordmark {
          display: inline-flex;
          flex-direction: column;
          line-height: 1;
          color: inherit;
        }
        .wm-stack {
          display: inline-flex;
          flex-direction: column;
          align-items: flex-start;
          line-height: 0.95;
        }
        .wm-sonal {
          font-family: var(--font-serif-italic);
          font-style: italic;
          font-weight: 500;
          letter-spacing: -0.025em;
          line-height: 0.95;
          color: inherit;
        }
        .wm-studio {
          font-family: var(--font-script);
          font-weight: 400;
          color: var(--primary);
          line-height: 0.75;
          margin-bottom: -0.25em;
          white-space: nowrap;
        }
        .wm-tag {
          font-family: var(--font-body);
          font-weight: 700;
          letter-spacing: 0.34em;
          text-transform: uppercase;
          color: var(--ink-mute);
          margin-top: 0.55em;
          padding-left: 2px;
        }
      `}</style>
    </span>
  );
}

window.Wordmark = Wordmark;