/* Hello Court brand mark. Inline A+G monogram retained for legacy callers; renders
   the natural 1.2:1 viewBox aspect ratio so the mark doesn't get letterboxed/squashed
   when forced into a square slot. Most callers should use AllLawLockupSymbol below
   instead, which renders the canonical hellocourt-lockup-*.svg shipped in /assets/.
   JS identifiers (AllLawMark / AllLawLockup / AllLawLockupSymbol) remain at the
   AllLaw-era names until a deeper component-rename refactor. */
const AllLawMark = ({ size = 32, color }) => {
  // Legacy alias. Render the real symbol mark from the shipped logo SVG (via
  // AllLawLockupSymbol) so it can never drift from the current Hello Court logo.
  return <AllLawLockupSymbol size={size} />;
};

/* Collapsed-nav variant: renders the home-logo SVG cropped to its symbol region.
   Keeps the EXACT same logo asset as the expanded lockup. No separate inline
   recreation, no risk of visual drift. The home-logo file is 1024×192 with the
   symbol in the leftmost ~166px region; we scale + clip to show only that. */
const AllLawLockupSymbol = ({ size = 28, dark }) => {
  const isDark = dark ?? ((typeof THEME !== 'undefined' ? THEME.mode : 'dark') === 'dark');
  const src = isDark ? 'assets/hellocourt-home-logo-dark.svg?v=20260608' : 'assets/hellocourt-home-logo-light.svg?v=20260608';
  // Home-logo natural aspect 1024:192 ≈ 5.33. Symbol is in the leftmost ~166px.
  // Render the full lockup and clip to a square viewport showing just the symbol.
  const fullHeight = size;
  const fullWidth = Math.round(size * (1024 / 192));
  return (
    <div style={{ width: size, height: size, overflow: 'hidden', flexShrink: 0 }}>
      <img src={src} alt="Hello Court" style={{
        height: fullHeight, width: fullWidth, display: 'block',
        objectFit: 'cover', objectPosition: 'left center',
      }}/>
    </div>
  );
};

const AllLawLockup = ({ scale = 1, dark }) => {
  // Auto-detect theme if `dark` prop not passed explicitly
  const isDark = dark ?? ((typeof THEME !== 'undefined' ? THEME.mode : 'dark') === 'dark');
  // Theme-aware Hello Court home logo. File names are hellocourt-home-logo-*.svg
  // (updated 2026-05-16); JS identifiers remain AllLaw-* until a deeper
  // component-rename refactor.
  const src = isDark ? 'assets/hellocourt-home-logo-dark.svg?v=20260608' : 'assets/hellocourt-home-logo-light.svg?v=20260608';
  // viewBox is 1024×192 (aspect ratio ~5.33:1). Sizing to a target height keeps it readable.
  const targetHeight = 28 * scale;
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <img src={src} alt="Hello Court" style={{ height: targetHeight, width: 'auto', display: 'block' }}/>
    </div>
  );
};

window.AllLawMark = AllLawMark;
window.AllLawLockup = AllLawLockup;
window.AllLawLockupSymbol = AllLawLockupSymbol;