/* global React */
// LITMUS placeholder logo — three variants.
// Concept: a litmus strip — two stacked bars (before / after reaction) with a measurement notch.
// The mark also reads as an "L".

function LitmusMark({ variant = 'strip', size = 22, color = 'currentColor', accent = 'var(--copper)' }) {
  // strip: two horizontal bars with a notch — the canonical mark
  if (variant === 'strip') {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{flexShrink:0}}>
        {/* upper bar — sand / unreacted */}
        <rect x="2" y="6" width="20" height="4" rx="0.5" fill={color} opacity="0.32"/>
        {/* lower bar — copper / reacted */}
        <rect x="2" y="14" width="20" height="4" rx="0.5" fill={accent}/>
        {/* measurement notch — the threshold line */}
        <line x1="14" y1="4" x2="14" y2="20" stroke={color} strokeWidth="0.9"/>
        <circle cx="14" cy="4" r="1.1" fill={color}/>
      </svg>
    );
  }
  // stack: three nested squares — narrative / capital / operations layers
  if (variant === 'stack') {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{flexShrink:0}}>
        <rect x="3" y="3" width="18" height="18" stroke={color} strokeWidth="1.2" opacity="0.45"/>
        <rect x="6.5" y="6.5" width="11" height="11" stroke={color} strokeWidth="1.2" opacity="0.75"/>
        <rect x="10" y="10" width="4" height="4" fill={accent}/>
      </svg>
    );
  }
  // dot: minimal — diamond + line, the existing visual
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{flexShrink:0}}>
      <rect x="6" y="6" width="12" height="12" fill={accent} transform="rotate(45 12 12)"/>
      <line x1="12" y1="2" x2="12" y2="22" stroke={color} strokeWidth="0.8" opacity="0.4"/>
    </svg>
  );
}

// Full lockup: mark + wordmark, where the wordmark uses a serif for editorial gravitas.
function LitmusLogo({ variant = 'strip', size = 22, kind = 'horizontal', color = 'currentColor' }) {
  const accent = 'var(--copper)';
  if (kind === 'mark') {
    return <LitmusMark variant={variant} size={size} color={color} accent={accent}/>;
  }
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap: size * 0.5}}>
      <LitmusMark variant={variant} size={size} color={color} accent={accent}/>
      <span style={{
        fontFamily: 'var(--serif)',
        fontSize: size * 0.95,
        letterSpacing: '0.04em',
        fontWeight: 400,
        lineHeight: 1,
        color,
      }}>
        LITMUS<span style={{color: accent, marginLeft: '0.05em'}}>.</span>
      </span>
    </span>
  );
}

Object.assign(window, { LitmusLogo, LitmusMark });