// Wordmark.jsx — Georgia "k●nnecting d●ts" with a JS-positioned connector
// between the two dots. Variants: "dotted" (default), "solid", "dashed", "arc".
function Wordmark({ size = 64, variant = 'solid', onInk = false }) {
  const wrapRef = React.useRef(null);

  React.useLayoutEffect(() => {
    if (window.positionKdWmLines) window.positionKdWmLines();
    const id = setTimeout(() => window.positionKdWmLines && window.positionKdWmLines(), 60);
    return () => clearTimeout(id);
  });

  const classes = ['kd-wm'];
  if (variant === 'solid') classes.push('is-solid');
  if (variant === 'dashed') classes.push('v-dashed');
  if (onInk) classes.push('on-ink');

  return (
    <span ref={wrapRef} className={classes.join(' ')} style={{ fontSize: size }} aria-label="konnecting dots">
      k<span className="kd-wm-dot" aria-hidden="true" />nnecting&nbsp;d<span className="kd-wm-dot" aria-hidden="true" />ts
      {variant === 'arc' ? (
        <svg className="kd-wm-curve" viewBox="0 0 200 14" preserveAspectRatio="none">
          <path d="M0 2 Q100 22 200 2" strokeWidth="0.9" strokeDasharray="0.2 3" strokeLinecap="round" />
        </svg>
      ) : (
        <span className="kd-wm-line" />
      )}
    </span>
  );
}
window.Wordmark = Wordmark;