/* Mindburn Labs — Brand marks (logo, wordmark, lockups, favicon) */

const { useId } = React;

// ---- The mark: a threshold / gate forming an M ----
// Two uprights + a centered "boundary bar" that also reads as the crossbar of M.
// Circle = the scope within which HELM operates.
function MindburnMark({ size = 40, color = "currentColor", bg = "transparent" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 40 40" fill="none" role="img" aria-label="Mindburn Labs mark">
      <circle cx="20" cy="20" r="19" stroke={color} strokeWidth="1.25" fill={bg} />
      {/* inner M — a gated threshold */}
      <path
        d="M10 28 V13 L20 22 L30 13 V28"
        stroke={color}
        strokeWidth="1.75"
        strokeLinecap="square"
        strokeLinejoin="miter"
        fill="none"
      />
      {/* boundary bar */}
      <path d="M7 20 H13 M27 20 H33" stroke={color} strokeWidth="1.75" strokeLinecap="square" />
      {/* anchor dots — "signed" */}
      <circle cx="10" cy="28" r="1.2" fill={color} />
      <circle cx="30" cy="28" r="1.2" fill={color} />
    </svg>
  );
}

// Alt: geometric variant — minimal, deck-friendly
function MindburnGlyph({ size = 40, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      <rect x="6" y="6" width="28" height="28" stroke={color} strokeWidth="1.25" />
      <path d="M11 28 V12 L20 21 L29 12 V28" stroke={color} strokeWidth="2" fill="none" strokeLinejoin="miter" />
    </svg>
  );
}

function Wordmark({ size = 18, color = "currentColor" }) {
  return (
    <span
      style={{
        fontFamily: 'var(--font-display)',
        fontSize: size,
        letterSpacing: '-0.02em',
        lineHeight: 1,
        color,
        fontWeight: 400,
        display: 'inline-flex',
        alignItems: 'baseline',
        gap: 1,
      }}
    >
      Mindburn<span style={{ color: 'var(--ink-3)' }}>·</span>Labs
    </span>
  );
}

function Lockup({ size = 32, showMeta = false }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <MindburnMark size={size} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <Wordmark size={size * 0.52} />
        {showMeta && (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
            Execution boundary for AI agents
          </span>
        )}
      </div>
    </div>
  );
}

// HELM product lockup — sub-brand
function HelmLockup({ size = 24 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="1.2" />
        <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.2" />
        <path d="M12 1 V5 M12 19 V23 M1 12 H5 M19 12 H23 M4 4 L7 7 M17 17 L20 20 M4 20 L7 17 M17 7 L20 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />
      </svg>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase' }}>HELM</span>
    </div>
  );
}

Object.assign(window, { MindburnMark, MindburnGlyph, Wordmark, Lockup, HelmLockup });