// octanex — лого-плитка «o/» + текстовый знак o/ctanex (из хендоффа Claude Design).
// Адаптировано под панель: глобальный React + регистрация в window (без import/export).
const OX_BRAND_C = {
  tile: '#0d1410',
  tileBorder: 'rgba(154, 183, 165, 0.26)',
  text: '#eaf5ee',
  accent: '#00e272',
  onAccent: '#040705',
  muted: '#5f7368',
};
const OX_MONO = "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace";

function OctanexLogo({ size = 32, inverse = false, style }) {
  const C = OX_BRAND_C;
  return (
    <span style={{
      width: size, height: size, borderRadius: Math.round(size * 0.22), flex: 'none',
      display: 'inline-grid', placeItems: 'center', boxSizing: 'border-box',
      background: inverse ? C.accent : C.tile,
      border: `1px solid ${inverse ? C.accent : C.tileBorder}`,
      fontFamily: OX_MONO, fontWeight: 700, letterSpacing: '-0.02em',
      fontSize: Math.round(size * 0.5), lineHeight: 1,
      color: inverse ? C.onAccent : C.text,
      ...style,
    }}><span style={{ whiteSpace: 'nowrap' }}>o<span style={{ color: inverse ? C.onAccent : C.accent }}>/</span></span></span>
  );
}

function OctanexWordmark({ size = 24, tagline = false, mark = false, style }) {
  const C = OX_BRAND_C;
  const name = (
    <span style={{ display: 'inline-flex', flexDirection: 'column', gap: Math.max(2, size * 0.12), lineHeight: 1, ...(mark ? null : style) }}>
      <span style={{ fontFamily: OX_MONO, fontWeight: 700, letterSpacing: '-0.02em', fontSize: size, color: C.text }}>
        o<span style={{ color: C.accent }}>/</span>ctanex
      </span>
      {tagline && (
        <span style={{ fontFamily: OX_MONO, fontSize: Math.round(size * 0.32), letterSpacing: '0.14em', textTransform: 'uppercase', color: C.muted }}>
          aio e-com panel
        </span>
      )}
    </span>
  );
  if (!mark) return name;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: Math.round(size * 0.45), ...style }}>
      <OctanexLogo size={Math.round(size * 1.5)} />
      {name}
    </span>
  );
}

Object.assign(window, { OctanexLogo, OctanexWordmark });