// Logo de la Cátedra (C verde con cuchara roja). Reproducción aproximada — original en assets/logo-catedra.jpg
const CGLogo = ({ size = 44, mono = false }) => {
  const green = mono ? 'currentColor' : 'var(--c-green)';
  const red   = mono ? 'currentColor' : 'var(--c-red)';
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-label="Cátedra de Gastronomía CLM">
      {/* C verde */}
      <path d="M50 8
               a42 42 0 1 0 0 84
               a42 42 0 0 0 36 -20
               L70 64
               a25 25 0 1 1 0 -28
               L86 28
               A42 42 0 0 0 50 8 Z"
        fill={green} />
      {/* Cuchara roja */}
      <ellipse cx="44" cy="50" rx="12" ry="10" fill={red} />
      <rect x="52" y="46.5" width="34" height="7" rx="3.5" fill={red} />
    </svg>
  );
};

const CGLogoLockup = ({ small = false }) => {
  const [, t] = window.useLang();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: small ? 10 : 14 }}>
      <CGLogo size={small ? 30 : 42} />
      <div style={{ lineHeight: 1.05 }}>
        <div style={{
          fontFamily: 'var(--font-impact)',
          fontSize: small ? 11 : 13,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
        }}>Cátedra</div>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontStyle: 'italic',
          fontWeight: 500,
          fontSize: small ? 13 : 15,
          color: 'var(--c-red)',
          letterSpacing: '-0.01em',
          marginTop: 1,
        }}>Gastronomía CLM</div>
      </div>
    </div>
  );
};

Object.assign(window, { CGLogo, CGLogoLockup });