/* AllLaw Guide brand: A + G monogram from alllaw-guide-logo.svg.
   PLACEHOLDER. James will refine fonts + final design in a future pass. */
/* Inline A+G monogram. Kept for legacy callers. Now uses the natural 1.2:1 aspect
   ratio of its viewBox so the mark doesn't get letterboxed/squashed when forced
   into a square slot. Most callers should use AllLawLockupSymbol below instead,
   which renders the same SVG asset shipped in /assets/. */
const AllLawMark = ({ size = 32, color }) => {
  const isDark = (typeof THEME !== 'undefined' ? THEME.mode : 'dark') === 'dark';
  const stroke = color ?? (isDark ? '#9FB3FF' : '#6986BF');
  // viewBox is 480×400 (1.2:1). Render width-first so aspect ratio is preserved.
  const w = Math.round(size * 1.2);
  return (
    <svg width={w} height={size} viewBox="0 0 480 400" fill="none"
      stroke={stroke} strokeWidth="54" strokeLinecap="round" strokeLinejoin="round"
      preserveAspectRatio="xMidYMid meet">
      <g transform="translate(40 22)">
        <path d="M220 20 L38 352 Q26 374 52 374 H404 Q430 374 418 352 L236 20 Q228 5 220 20 Z"/>
        <path d="M158 272 Q182 198 255 198 H354"/>
        <path d="M350 198 H248 Q192 198 171 249 Q150 300 197 327 H348"/>
        <path d="M348 327 H285"/>
      </g>
    </svg>
  );
};

/* Collapsed-nav variant: renders the lockup 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 lockup file is 4202×609 with the
   symbol in the leftmost ~609px square; 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/alllaw-guide-lockup-dark.svg' : 'assets/alllaw-guide-lockup-light.svg';
  // Lockup natural aspect 4202:609 ≈ 6.90. Symbol is in the first ~609px (square).
  // Render the full lockup and clip to a square viewport showing just the symbol.
  const fullHeight = size;
  const fullWidth = Math.round(size * (4202 / 609));
  return (
    <div style={{ width: size, height: size, overflow: 'hidden', flexShrink: 0 }}>
      <img src={src} alt="Laws Guide" 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 Laws Guide lockup. File names remain alllaw-guide-* until the
  // formal brand rename pass with Quentin (deferred per memory).
  const src = isDark ? 'assets/alllaw-guide-lockup-dark.svg' : 'assets/alllaw-guide-lockup-light.svg';
  // Original viewBox is 4202×609 (aspect ratio ~6.90:1). Sizing the lockup to a target height keeps it readable.
  const targetHeight = 28 * scale;
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <img src={src} alt="Laws Guide" style={{ height: targetHeight, width: 'auto', display: 'block' }}/>
    </div>
  );
};

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