// ============================================================
// 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',
        // invert for dark backgrounds: invierte el texto a blanco, mantiene colores del isotipo cerca
        filter: inverse ? 'invert(1) hue-rotate(180deg) saturate(1.6)' : 'none',
      }}
    />
  );
};

// Isotipo-only (extrae el lado izquierdo del PNG mediante clip)
const GarabatoMark = ({ size = 48 }) => {
  const h = size;
  // El isotipo ocupa aprox los primeros 170px de los 664
  const markRatio = 170 / 165; // ≈ 1.03
  return (
    <div style={{
      width: h * markRatio, height: h,
      overflow: 'hidden', display: 'inline-block', position: 'relative',
    }}>
      <img
        src="assets/garabato-logo.png"
        alt="Garabato"
        style={{
          height: h,
          width: 'auto',
          display: 'block',
        }}
      />
    </div>
  );
};

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