// ============================================================
// GARABATO · Logo (usa el PNG real del isotipo + wordmark)
// ============================================================

const GarabatoLogo = ({ size = 40, color = '#0A0A0F', markOnly = false, inverse = false }) => {
  // Logo oficial (PNG con transparencia). Aspect ≈ 664×165 ≈ 4.024
  const aspect = 664 / 165;
  const h = size;
  const w = markOnly ? size : h * aspect;
  return (
    <img
      src="assets/garabato-logo.png"
      alt="Garabato"
      width={w}
      height={h}
      style={{
        display: 'inline-block',
        height: h,
        width: markOnly ? h : 'auto',
        objectFit: markOnly ? 'cover' : 'contain',
        objectPosition: markOnly ? 'left center' : 'center',
        // Transparent original; use a white silhouette on dark surfaces.
        filter: inverse ? 'brightness(0) invert(1)' : 'none',
        background: 'transparent',

      }}
    />
  );
};

// Isotipo-only (extrae el lado izquierdo del PNG mediante clip)
const GarabatoMark = ({ size = 48 }) => <img src="assets/brand/isotipo.svg" alt="Garabato" width={size * 87 / 97} height={size}
  style={{display:'inline-block',width:size * 87 / 97,height:size,objectFit:'contain'}}/>;

Object.assign(window, { GarabatoMark, GarabatoLogo });