// NoralAI brand mark components — built from the real SVG construction.
// Mark = filled dot + 3 concentric arcs (signal waves), opacity stepping down.

const NoralMark = ({ size = 120, color = "#FF5B2E", strokeRatio = 0.05 }) => {
  // viewBox 240x240, mark offset to (95, 120). We rebuild scaled.
  // dot r=18, arcs at radii 44, 70, 96; stroke 6 in original 240vb
  const vb = 240;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${vb} ${vb}`} fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
      <g transform="translate(95 120)">
        <circle cx="0" cy="0" r="18" fill={color} />
        <path d="M 30 -30 A 44 44 0 0 1 30 30" stroke={color} strokeWidth="6" fill="none" strokeLinecap="round" />
        <path d="M 52 -46 A 70 70 0 0 1 52 46" stroke={color} strokeWidth="6" fill="none" strokeLinecap="round" opacity="0.55" />
        <path d="M 74 -62 A 96 96 0 0 1 74 62" stroke={color} strokeWidth="6" fill="none" strokeLinecap="round" opacity="0.25" />
      </g>
    </svg>
  );
};

const NoralSymbol = ({ size = 120, ground = "#0A1F2E", color = "#FF5B2E", radius }) => {
  const r = radius ?? size * 0.17;
  return (
    <div style={{
      width: size, height: size, background: ground, borderRadius: r,
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <NoralMark size={size} color={color} />
    </div>
  );
};

// Wordmark — Inter 800, tight tracking. "noral" ink + "AI" signal.
const NoralWordmark = ({ size = 80, inkColor = "#0A1F2E", aiColor = "#FF5B2E" }) => (
  <span style={{
    fontFamily: "'Inter', sans-serif",
    fontWeight: 800,
    fontSize: size,
    letterSpacing: "-0.045em",
    color: inkColor,
    lineHeight: 1,
    whiteSpace: "nowrap",
  }}>
    noral<span style={{ color: aiColor }}>AI</span>
  </span>
);

// Primary horizontal lockup — mark + wordmark
const NoralPrimary = ({ size = 80, inkColor = "#0A1F2E", accent = "#FF5B2E", gap }) => {
  const _gap = gap ?? size * 0.25;
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: _gap }}>
      <NoralMark size={size * 1.5} color={accent} />
      <NoralWordmark size={size} inkColor={inkColor} aiColor={accent} />
    </div>
  );
};

// Stacked lockup — mark above wordmark
const NoralStacked = ({ size = 80, inkColor = "#0A1F2E", accent = "#FF5B2E" }) => (
  <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: size * 0.2 }}>
    <NoralMark size={size * 2} color={accent} />
    <NoralWordmark size={size} inkColor={inkColor} aiColor={accent} />
  </div>
);

Object.assign(window, { NoralMark, NoralSymbol, NoralWordmark, NoralPrimary, NoralStacked });