// Logo DocentesMX — imagen PNG + wordmark "DocentesMX / Simulador"
// Soporta prop `dark` para fondos oscuros (sidebar admin, pantalla auth)
window.Logo = function Logo({ size = 28, dark = false, withWordmark = true,
                               color, accent }) {
  const base = window.API_BASE ? window.API_BASE.replace(/\/api$/, '') : '';
  // ?v=2 fuerza refresco de caché cuando se reemplaza el archivo en el servidor
  const src  = base + '/Logo_DocentesMX.png?v=2';
  const imgH = Math.round(size * 1.7);

  const titleColor = dark ? '#ffffff' : '#0B2545';
  const subColor   = dark ? '#5EEAD4' : '#0D9488'; // verde/teal en ambos fondos

  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, lineHeight: 1 }}>
      <img
        src={src}
        alt="DocentesMX"
        style={{ height: imgH, width: 'auto', display: 'block', objectFit: 'contain', flexShrink: 0 }}
      />
      {withWordmark && (
        <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{
            fontFamily: '"Fraunces", serif',
            fontWeight: 700,
            fontSize: Math.round(size * 0.78),
            color: titleColor,
            letterSpacing: '-0.02em',
            lineHeight: 1,
          }}>
            DocentesMX
          </span>
          <span style={{
            fontFamily: '"Inter", sans-serif',
            fontWeight: 500,
            fontSize: Math.round(size * 0.4),
            color: subColor,
            letterSpacing: '0.08em',
            lineHeight: 1,
            textTransform: 'uppercase',
          }}>
            Simulador
          </span>
        </span>
      )}
    </span>
  );
};