// Logo / Brand mark — uses real SVG (cropped to right half via viewBox)
function Logo({ size = 32, mono = false, color }) {
  const ink = color || '#0E0E12';
  return (
    <div className="logo" style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.4 }}>
      <div style={{
        width: size * 1.7, height: size * 1.5,
        overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center',
        filter: ink === '#fff' || ink === '#FFFFFF' ? 'invert(1)' : 'none',
      }}>
        <img
          src="assets/logo-devsm.svg"
          alt="DEVSocialMedia"
          style={{
            height: size * 3,
            width: 'auto',
            display: 'block',
            transform: 'translateX(25%)',
          }}
        />
      </div>
      {!mono && (
        <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: size * 0.55, letterSpacing: '-0.025em', color: ink, lineHeight: 1 }}>
          DEV<span style={{ color: 'var(--primary)' }}>SocialMedia</span>
        </span>
      )}
    </div>
  );
}

window.Logo = Logo;