// brand-mark.jsx — The Oscillian-generated EpochCore brand mark.
// Reproduces the studio's Synapse-mode logo using the brand's seed values.
// Renders deterministically — same seed → same shape, every time.

// Brand seed values from brand-tokens.css
const BRAND_SEEDS = {
  logoSeed:     1779340712452.4722,
  logoHex:      '#e72020',                 // Oscillation Crimson
  logoParent:   'Oscillation Crimson',
  patternHex:   '#a334f3',                 // Swarm Violet
  patternParent:'Swarm Violet',
  colorSeed:    1779342991571,
};

// Deterministic LCG seeded by a real number
function brandLcg(seed) {
  let n = Math.floor(seed * 1e6) >>> 0;
  return () => { n = (n * 1664525 + 1013904223) >>> 0; return n / 0xFFFFFFFF; };
}

function BrandMark({ size = 24, accentHex, patternHex, withWord = false, label = 'EpochCore' }) {
  const accent  = accentHex || BRAND_SEEDS.logoHex;
  const pattern = patternHex || BRAND_SEEDS.patternHex;
  const r = brandLcg(BRAND_SEEDS.logoSeed);
  const c  = size / 2;
  const outerR = size * 0.42;

  // 8 sparse constellation lines between deterministic points
  const points = Array.from({ length: 10 }).map((_, i) => {
    const a = (i / 10) * Math.PI * 2 + r() * 0.5;
    const rad = outerR * (0.55 + r() * 0.40);
    return { x: c + Math.cos(a) * rad, y: c + Math.sin(a) * rad };
  });
  const lineCount = 6;
  const lines = [];
  for (let i = 0; i < lineCount; i++) {
    const a = (i * 3 + 2) % points.length;
    const b = (i * 5 + 1) % points.length;
    if (a !== b) lines.push([points[a], points[b]]);
  }

  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: withWord ? 9 : 0 }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label="EpochCore brand mark">
        {/* outer dashed ring — accent */}
        <circle cx={c} cy={c} r={outerR}
          fill="none" stroke={accent}
          strokeWidth={Math.max(1, size * 0.06)}
          strokeDasharray={`${size * 0.12} ${size * 0.06}`}/>
        {/* inner faint ring — pattern color */}
        <circle cx={c} cy={c} r={outerR * 0.62} fill="none"
          stroke={pattern} strokeWidth={size * 0.018} opacity="0.32"/>
        {/* constellation lines */}
        {lines.map((ln, i) => (
          <line key={i}
            x1={ln[0].x} y1={ln[0].y} x2={ln[1].x} y2={ln[1].y}
            stroke={pattern} strokeWidth={size * 0.018}
            opacity={i % 2 === 0 ? 0.32 : 0.18} strokeLinecap="round"/>
        ))}
        {/* center pip */}
        <circle cx={c} cy={c} r={size * 0.05} fill={accent}/>
      </svg>
      {withWord && (
        <span style={{
          fontFamily: 'Geist, sans-serif',
          fontWeight: 600, letterSpacing: -0.3,
          fontSize: size * 0.74, color: '#F4F4F0',
        }}>{label}</span>
      )}
    </div>
  );
}

Object.assign(window, { BRAND_SEEDS, BrandMark });