/* eslint-disable */
/*
  STM Logo — PNG-based component.
  Uses the actual stm-logo-transparent.png asset, glowing on dark backgrounds.
  Optionally adds the "Sawt / Tech & Marketing" wordmark beside it.
*/

function STMLogo({ variant = 'white', size = 32, withWordmark = false }) {
  const isDark  = variant === 'white';
  const ink     = isDark ? '#ffffff' : '#070d18';
  const muted   = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(11,20,38,0.5)';
  const sep     = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(11,20,38,0.14)';

  // On dark backgrounds give the PNG a soft white glow so it pops.
  // On light backgrounds use ink filter to make the transparent PNG dark.
  const imgFilter = isDark
    ? 'drop-shadow(0 0 8px rgba(255,255,255,0.55)) drop-shadow(0 0 2px rgba(255,255,255,0.9))'
    : 'invert(1) brightness(0.15)';

  // Logo image height tracks the `size` prop (same interface as before).
  const imgH = size * 1.25;

  return (
    <span
      className={'stm-logo stm-logo--' + variant}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 12,
        lineHeight: 1,
        verticalAlign: 'middle',
        textDecoration: 'none',
      }}
    >
      <img
        src="photos/stm-logo-transparent.png"
        alt="STM logo"
        style={{
          height: imgH + 'px',
          width: 'auto',
          objectFit: 'contain',
          filter: imgFilter,
          flexShrink: 0,
          display: 'block',
        }}
      />

      {withWordmark && (
        <span
          className="stm-logo__wordmark"
          style={{
            paddingLeft: 12,
            borderLeft: '1px solid ' + sep,
            display: 'inline-flex',
            flexDirection: 'column',
            justifyContent: 'center',
            lineHeight: 1.1,
          }}
        >
          <span style={{
            fontFamily: "'IBM Plex Sans', system-ui, sans-serif",
            fontWeight: 600,
            fontSize: size * 0.5 + 'px',
            color: ink,
            letterSpacing: '-0.015em',
          }}>Sawt</span>
          <span style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: size * 0.32 + 'px',
            color: muted,
            letterSpacing: '0.04em',
            marginTop: 2,
          }}>Tech &amp; Marketing</span>
        </span>
      )}
    </span>
  );
}

window.STMLogo = STMLogo;