// JahizLink brand — Concept A "Interlock"
// Imported from the JahizLink logo project. Two interlocking rounded
// squares (deep green woven with brass) + Space Grotesk wordmark.

const BRAND = {
  green: '#0E4D33',
  brass: '#C9A24B',
  cream: '#F4EDDC'
};

let _jzUid = 0;
function useJzUid(prefix) {
  const ref = React.useRef(null);
  if (!ref.current) ref.current = `${prefix}-${++_jzUid}`;
  return ref.current;
}

// The interlocking mark. On dark backgrounds the rear ring flips to cream
// so it stays legible; brass stays brass either way.
function JahizMark({ size = 34, onDark = false }) {
  const id = useJzUid('jzmark');
  const primary = onDark ? BRAND.cream : BRAND.green;
  const accent = BRAND.brass;
  const w = size * (220 / 130);
  return (
    <svg width={w} height={size} viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg" aria-label="JahizLink mark" style={{ display: 'block', flex: 'none' }}>
      <defs>
        <mask id={id}>
          <rect width="220" height="130" fill="white" />
          <rect x="118" y="0" width="22" height="32" fill="black" />
        </mask>
      </defs>
      <rect x="14" y="14" width="120" height="102" rx="26" ry="26" stroke={primary} strokeWidth="20" fill="none" />
      <g mask={`url(#${id})`}>
        <rect x="86" y="14" width="120" height="102" rx="26" ry="26" stroke={accent} strokeWidth="20" fill="none" />
      </g>
    </svg>);

}

function JahizWordmark({ size = 22, onDark = false }) {
  const primary = onDark ? BRAND.cream : BRAND.green;
  return (
    <span style={{
      fontFamily: '"Space Grotesk", sans-serif',
      fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1,
      fontSize: size, color: primary, whiteSpace: 'nowrap'
    }}>
      Jahiz<span style={{ color: BRAND.brass }}>Link</span>
    </span>);

}

// Full lockup. Default = mark + wordmark side by side with an optional
// caption. stacked = mark on top, wordmark centered beneath (matches the
// primary brand lockup).
function JahizLogo({ markSize = 34, wordSize = 22, onDark = false, caption, stacked = false }) {
  if (stacked) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
        <JahizMark size={markSize} onDark={onDark} />
        <JahizWordmark size={wordSize} onDark={onDark} />
        {caption &&
        <span style={{
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: onDark ? 'rgba(244,237,220,0.6)' : 'rgba(14,77,51,0.55)', textAlign: 'center',
        }}>{caption}</span>
        }
      </div>);
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <JahizMark size={markSize} onDark={onDark} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 4 }}>
        <JahizWordmark size={wordSize} onDark={onDark} />
        {caption &&
        <span style={{
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: onDark ? 'rgba(244,237,220,0.6)' : 'rgba(14,77,51,0.55)', textAlign: "center"
        }}>{caption}</span>
        }
      </div>
    </div>);

}

window.JahizMark = JahizMark;
window.JahizWordmark = JahizWordmark;
window.JahizLogo = JahizLogo;
window.BRAND = BRAND;