// logo.jsx — The original child-drawing logo + lockups with the wordmark.
//
// The logo is the source of truth. We never re-draw it; we always use the
// image asset directly (logo-solo.JPG — no embedded text, gives us freedom
// to compose the wordmark cleanly).

const LOGO_SRC = window.LOGO_PATH || 'uploads/logo-transparent.png';

// Bare logo, sized by prop.
function Logo({ size = 200, dark = false }) {
  return (
    <img
      src={LOGO_SRC}
      alt="Casa Lar Luz do Caminho"
      style={{
        display: 'block', objectFit: 'contain',
        height: size, width: 'auto', maxWidth: '100%',
        // dark-mode invert: the line art flips to white, the colors shift
        filter: dark ? 'invert(1) hue-rotate(180deg)' : 'none',
        // when dark we get a "negative" feel — children still readable
      }}
    />
  );
}

// ────────────────────────────────────────────────────────────────
// Vertical lockup — logo on top, wordmark below (centered)
// Used as the primary mark on covers, posters, certificates, footer
// ────────────────────────────────────────────────────────────────
function LockupVertical({ size = 220, dark = false, wordmarkScale }) {
  // wordmark visual width should match logo width roughly
  const ws = wordmarkScale ?? Math.max(0.7, size / 220);
  return (
    <div style={{
      display: 'inline-flex', flexDirection: 'column', alignItems: 'center',
      gap: size * 0.12,
    }}>
      <Logo size={size} dark={dark} />
      <WMStackedInst align="center" dark={dark} scale={ws} />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Horizontal lockup — logo on left, wordmark left-aligned on the right
// Used in headers, business cards, signatures
// ────────────────────────────────────────────────────────────────
function LockupHorizontal({ size = 64, dark = false, wordmarkScale }) {
  const ws = wordmarkScale ?? Math.max(0.65, size / 88);
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.22 }}>
      <Logo size={size} dark={dark} />
      <WMStackedInst align="left" dark={dark} compact scale={ws} />
    </div>
  );
}

Object.assign(window, { Logo, LockupVertical, LockupHorizontal, LOGO_SRC });