// Novox — nova-star mark (static).
// A central four-point nova-star + three concentric sound-arcs, mirrored on
// each side: the signal radiating evenly outward, heard in every direction.
// The gold inner arc carries the brand energy; the ink arcs frame and ground it.
//   nova (a new star) + vox (voice) → Novox.

// One side's three arcs. innerStroke is gold (accent) on branded surfaces,
// ink when monochrome. Fresh elements per call so both <g> wrappers stay clean.
function NovoxArcs(color, innerStroke) {
  return [
    <path key="inner" d="M64.6 37.8 A 19 19 0 0 1 64.6 62.2"
      fill="none" strokeLinecap="round" stroke={innerStroke} strokeWidth={4.4} />,
    <path key="mid" d="M70.7 32.6 A 27 27 0 0 1 70.7 67.4"
      fill="none" strokeLinecap="round" stroke={color} strokeWidth={4.4} opacity={0.5} />,
    <path key="outer" d="M76.8 27.5 A 35 35 0 0 1 76.8 72.5"
      fill="none" strokeLinecap="round" stroke={color} strokeWidth={4.4} />,
  ];
}

function NovoxMark({ size = 160, color = '#131726', accent = '#F5A623', showAccent = false }) {
  const innerStroke = showAccent ? accent : color;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      {/* nova-star */}
      <path d="M50 35 Q52.1 47.9 65 50 Q52.1 52.1 50 65 Q47.9 52.1 35 50 Q47.9 47.9 50 35 Z"
        fill={color} />
      {/* right-side arcs */}
      <g>{NovoxArcs(color, innerStroke)}</g>
      {/* left-side arcs — same three, mirrored across the vertical axis */}
      <g transform="scale(-1,1) translate(-100,0)">{NovoxArcs(color, innerStroke)}</g>
    </svg>
  );
}

function NovoxWordmark({ size = 48, color = '#EEF1FA' }) {
  return (
    <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600,
      fontSize: size, color, letterSpacing: '-0.02em', lineHeight: 1 }}>Novox</div>
  );
}

function NovoxLockup({ markSize = 72, textSize = 44, color = '#131726', accent = '#F5A623', vertical = false, showAccent = false }) {
  if (vertical) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: markSize * 0.3 }}>
        <NovoxMark size={markSize} color={color} accent={accent} showAccent={showAccent} />
        <NovoxWordmark size={textSize} color={color} />
      </div>
    );
  }
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: markSize * 0.24 }}>
      <NovoxMark size={markSize} color={color} accent={accent} showAccent={showAccent} />
      <NovoxWordmark size={textSize} color={color} />
    </div>
  );
}

Object.assign(window, { NovoxMark, NovoxWordmark, NovoxLockup });