// Marca interactiva. En reposo: mau.dev — al hover (o en touch): Xmau.dev.
// La X aparece desde la izquierda con transición fluida (no salto).
const Logo = ({ size = 22, showTag = true, tagText = '// AI engineering', href = '#' }) => (
  <a href={href} className="logo" style={{ fontSize: size }}>
    <span className="logo-mark" style={{ fontSize: size }}>
      <span className="logo-x" aria-hidden="true">X</span>mau.dev
    </span>
    {showTag && (
      <span className="logo-tag" style={{ fontSize: Math.max(10, Math.round(size * 0.5)) }}>
        {tagText}
      </span>
    )}
  </a>
);

window.Logo = Logo;