// sigil.jsx — the Azoth emblem (squaring of the circle) + small avatar
// "As above, so below": circle ▸ square ▸ triangle ▸ point, in gold line-art.

function Sigil({ size = 320, spin = true, intensity = 1 }) {
  const s = size;
  const c = s / 2;
  const r = s * 0.46;             // outer circle
  const rInner = s * 0.30;        // inner circle
  const sq = r * 0.92;            // square half-diagonal reach
  // square corners (rotated 45° -> diamond aligned to cardinal points)
  const sqPts = [
    [c, c - sq], [c + sq, c], [c, c + sq], [c - sq, c]
  ].map(p => p.join(",")).join(" ");
  // upward triangle inscribed
  const tr = rInner * 1.32;
  const triPts = [
    [c, c - tr],
    [c + tr * Math.sin(Math.PI / 3), c + tr * 0.5],
    [c - tr * Math.sin(Math.PI / 3), c + tr * 0.5]
  ].map(p => p.map(n => n.toFixed(1)).join(",")).join(" ");

  return (
    <svg className="sigil" viewBox={`0 0 ${s} ${s}`} width={s} height={s}
         style={{ overflow: "visible" }}>
      <defs>
        <radialGradient id="sgGold" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fff2c8" />
          <stop offset="45%" stopColor="#e8c75a" />
          <stop offset="100%" stopColor="#9a7c1e" />
        </radialGradient>
        <filter id="sgGlow" x="-60%" y="-60%" width="220%" height="220%">
          <feGaussianBlur stdDeviation={2.4 * intensity} result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
      </defs>

      {/* slow counter-rotating outer ring of runes */}
      <g className={spin ? "sigil__spin" : ""} style={{ transformOrigin: "center" }}
         stroke="url(#sgGold)" fill="none" filter="url(#sgGlow)">
        <circle cx={c} cy={c} r={r} strokeWidth="1.1" opacity="0.85" />
        <circle cx={c} cy={c} r={r * 0.86} strokeWidth="0.5" opacity="0.4" strokeDasharray="2 7" />
      </g>

      {/* runic glyphs around the ring */}
      <g className={spin ? "sigil__spin-rev" : ""} style={{ transformOrigin: "center" }}>
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
          const gx = c + Math.cos(a) * (r * 0.93);
          const gy = c + Math.sin(a) * (r * 0.93);
          const glyphs = ["☉","☿","♀","♁","♂","♃","♄","🜍","🜔","🜂","🜄","🜁"];
          return (
            <text key={i} x={gx} y={gy} fill="var(--gold)" opacity="0.6"
                  fontSize={s * 0.05} textAnchor="middle" dominantBaseline="central"
                  style={{ fontFamily: "serif" }}>{glyphs[i]}</text>
          );
        })}
      </g>

      {/* static inner geometry */}
      <g stroke="url(#sgGold)" fill="none" filter="url(#sgGlow)">
        <polygon points={sqPts} strokeWidth="0.9" opacity="0.7" />
        <circle cx={c} cy={c} r={rInner} strokeWidth="1" opacity="0.9" />
        <polygon points={triPts} strokeWidth="0.9" opacity="0.8" />
        {/* central seven-point star */}
        <g opacity="0.95">
          {Array.from({ length: 7 }).map((_, i) => {
            const a = (i / 7) * Math.PI * 2 - Math.PI / 2;
            const x2 = c + Math.cos(a) * (rInner * 0.62);
            const y2 = c + Math.sin(a) * (rInner * 0.62);
            return <line key={i} x1={c} y1={c} x2={x2} y2={y2} strokeWidth="0.7" />;
          })}
        </g>
        {/* connecting star polygon {7/3} */}
        <polygon
          points={Array.from({ length: 7 }).map((_, i) => {
            const a = ((i * 3) % 7) / 7 * Math.PI * 2 - Math.PI / 2;
            return [(c + Math.cos(a) * rInner * 0.62).toFixed(1),
                    (c + Math.sin(a) * rInner * 0.62).toFixed(1)].join(",");
          }).join(" ")}
          strokeWidth="0.7" opacity="0.7" />
      </g>

      {/* breathing core */}
      <circle className="sigil__core" cx={c} cy={c} r={s * 0.022}
              fill="url(#sgGold)" filter="url(#sgGlow)" />
    </svg>
  );
}

// Small avatar used beside agent messages / in headers
function SigilMark({ size = 34, live = false }) {
  const c = size / 2;
  return (
    <span className={"sigil-mark" + (live ? " sigil-mark--live" : "")}
          style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
        <g stroke="var(--gold)" fill="none" strokeWidth="0.9">
          <circle cx={c} cy={c} r={size * 0.44} opacity="0.85" />
          <polygon points={[
            [c, c - size*0.34],[c + size*0.30, c + size*0.18],[c - size*0.30, c + size*0.18]
          ].map(p=>p.map(n=>n.toFixed(1)).join(",")).join(" ")} opacity="0.8" />
          <polygon points={[
            [c, c + size*0.30],[c - size*0.26, c - size*0.10],[c + size*0.26, c - size*0.10]
          ].map(p=>p.map(n=>n.toFixed(1)).join(",")).join(" ")} opacity="0.55" />
        </g>
        <circle cx={c} cy={c} r={size * 0.05} fill="var(--gold-bright)" />
      </svg>
    </span>
  );
}

Object.assign(window, { Sigil, SigilMark });