/* global React */

// ===== Simple Brand Mark (4×4 dot grid) =====
function BrandMark({ size = 32 }) {
  const PATTERN = [
    [0, 1, 1, 1],
    [1, 1, 0, 0],
    [0, 1, 1, 0],
    [1, 1, 1, 0],
  ];
  const cell = size / 4;
  const dotR = size * 0.085;

  return (
    <span
      className="brand-mark-v2"
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
        <rect width={size} height={size} rx={size * 0.22} fill="#0a0a0a" />
        {PATTERN.map((row, ry) =>
          row.map((on, rx) => {
            const x = cell * (rx + 0.5);
            const y = cell * (ry + 0.5);
            const idx = ry * 4 + rx;
            return (
              <circle
                key={idx}
                cx={x}
                cy={y}
                r={dotR}
                fill={on ? '#0066ff' : 'rgba(255,255,255,0.18)'}
                className={on ? 'mark-dot on' : 'mark-dot'}
                style={{ animationDelay: `${idx * 0.08}s` }}
              />
            );
          })
        )}
      </svg>
    </span>
  );
}

// ===== Wordmark =====
function Wordmark({ size = 17 }) {
  return (
    <span className="wordmark" style={{ fontSize: size }}>
      <span className="wm-left">sistemas</span>
      <span className="wm-dot">.</span>
      <span className="wm-right">club</span>
    </span>
  );
}

function Brand({ size = 32 }) {
  return (
    <span className="brand-v2">
      <BrandMark size={size} />
      <Wordmark />
    </span>
  );
}

Object.assign(window, { BrandMark, Wordmark, Brand });