// logo.jsx — Thruline finalized identity wiring.
// The mark is settled (the pinwheel T·L monogram), so there's no more switching.
//   • Header  → the stylized gradient mark (primary, full-color).
//   • Footer  → the grayscale (mono) mark by default; on hover it crossfades to
//               the flat two-tone color version.
// Treatments resolve from the bundler's inlined blobs when exported, else from
// the relative asset paths in normal preview.

function assetUrl(id, fallback) {
  return (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || fallback;
}

const MARK = {
  gradient: assetUrl('markGradient', 'assets/mark-pinwheel-gradient.png'),
  flat:     assetUrl('markFlat',     'assets/mark-pinwheel-flat.png'),
  mono:     assetUrl('markMono',     'assets/mark-pinwheel-mono.png'),
};

// Header / hero mark — the stylized gradient version. Pinwheel is ~3:2
// (wider than tall), so it's height-based with width auto.
function LogoImg({ h = 38, treatment = 'gradient', style }) {
  return <img src={MARK[treatment] || MARK.gradient} alt="Thruline Solutions"
    style={{ height: h, width: 'auto', display: 'block', ...style }} />;
}

// Footer mark — grayscale at rest, flat color on hover (smooth crossfade).
// The two stacked images share the pinwheel's aspect ratio, so they register
// pixel-for-pixel as they fade.
function LogoImgFlat({ h = 30, style }) {
  const [hover, setHover] = React.useState(false);
  const img = { height: h, width: 'auto', display: 'block', transition: 'opacity .28s ease' };
  return (
    <span onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      title="Thruline Solutions"
      style={{ position: 'relative', display: 'inline-block', height: h, lineHeight: 0, cursor: 'pointer', ...style }}>
      <img src={MARK.mono} alt="Thruline Solutions" style={{ ...img, opacity: hover ? 0 : 1 }} />
      <img src={MARK.flat} alt="" aria-hidden="true"
        style={{ ...img, position: 'absolute', top: 0, left: 0, opacity: hover ? 1 : 0 }} />
    </span>
  );
}

Object.assign(window, { MARK, LogoImg, LogoImgFlat });