/* global React */
(function () {
  const T = window.SC_T;

  function Logo({ size = 32 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32"
           style={{ borderRadius: 10, overflow: 'hidden', display: 'block' }}>
        <defs>
          <linearGradient id="logoGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#6366F1" />
            <stop offset="100%" stopColor="#A855F7" />
          </linearGradient>
        </defs>
        <rect width="32" height="32" rx="10" fill="url(#logoGrad)" />
        <g stroke="white" strokeWidth="1.6" fill="none" strokeLinecap="round">
          <circle cx="16" cy="16" r="3.5" fill="white" stroke="none" />
          <circle cx="16" cy="16" r="8" opacity="0.85" />
          <line x1="22.5" y1="22.5" x2="26" y2="26" opacity="0.85" />
        </g>
      </svg>
    );
  }

  function LogoBlock() {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <Logo />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: T.ink, letterSpacing: -0.2 }}>
            Semantic Core
          </div>
          <div style={{ fontSize: 10, fontWeight: 500, color: T.inkSubtle, letterSpacing: 0.8, textTransform: 'uppercase' }}>
            Сборщик семантических ядер
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { Logo, LogoBlock });
})();