// Ritual mark for Øneiro — a Ø inside an astrological circle with notches
// Used as the brand mark; scales with `size`. Pure SVG, animated rotation.

function OneiroSigil({ size = 120, t, animated = true, intensity = 1 }) {
  const c = size / 2;
  const r = size * 0.42;
  // 12 tick marks like a star map
  const ticks = Array.from({ length: 24 }).map((_, i) => {
    const a = (i / 24) * Math.PI * 2;
    const long = i % 6 === 0;
    const r1 = r + size * 0.02;
    const r2 = r + size * (long ? 0.07 : 0.04);
    return {
      x1: c + Math.cos(a) * r1, y1: c + Math.sin(a) * r1,
      x2: c + Math.cos(a) * r2, y2: c + Math.sin(a) * r2, long,
    };
  });
  // 4 cardinal sigils
  const cardinals = [0, 90, 180, 270];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
         style={{ overflow: 'visible' }}>
      <defs>
        <radialGradient id="sigil-glow">
          <stop offset="0%" stopColor={t.glow} stopOpacity={0.5 * intensity} />
          <stop offset="60%" stopColor={t.glow} stopOpacity={0.05 * intensity} />
          <stop offset="100%" stopColor={t.glow} stopOpacity={0} />
        </radialGradient>
      </defs>

      {/* outer glow */}
      <circle cx={c} cy={c} r={r * 1.35} fill="url(#sigil-glow)" />

      {/* slowly-rotating tick ring */}
      <g style={animated ? {
        transformOrigin: 'center',
        animation: 'oneiro-rotate 240s linear infinite',
      } : undefined}>
        {ticks.map((tk, i) => (
          <line key={i} x1={tk.x1} y1={tk.y1} x2={tk.x2} y2={tk.y2}
                stroke={t.accent} strokeWidth={tk.long ? 1.2 : 0.6}
                opacity={tk.long ? 0.9 : 0.45} />
        ))}
      </g>

      {/* counter-rotating cardinal glyphs */}
      <g style={animated ? {
        transformOrigin: 'center',
        animation: 'oneiro-rotate-rev 360s linear infinite',
      } : undefined}>
        {cardinals.map(deg => {
          const a = (deg * Math.PI) / 180;
          const rr = r + size * 0.13;
          const x = c + Math.cos(a) * rr;
          const y = c + Math.sin(a) * rr;
          return (
            <text key={deg} x={x} y={y} textAnchor="middle" dominantBaseline="middle"
                  fontFamily={t.serif} fontSize={size * 0.07} fill={t.accent}
                  opacity={0.7}>
              {{0:'ε', 90:'υ', 180:'ν', 270:'π'}[deg]}
            </text>
          );
        })}
      </g>

      {/* main rings */}
      <circle cx={c} cy={c} r={r} fill="none" stroke={t.accent} strokeWidth="0.8" opacity="0.7" />
      <circle cx={c} cy={c} r={r * 0.86} fill="none" stroke={t.accent} strokeWidth="0.5" opacity="0.4" />

      {/* inner star — septagram-ish via 7 points */}
      <g opacity="0.35">
        {Array.from({length:7}).map((_,i)=>{
          const a1 = (i/7)*Math.PI*2 - Math.PI/2;
          const a2 = ((i+3)/7)*Math.PI*2 - Math.PI/2;
          const r0 = r * 0.74;
          return (
            <line key={i}
              x1={c+Math.cos(a1)*r0} y1={c+Math.sin(a1)*r0}
              x2={c+Math.cos(a2)*r0} y2={c+Math.sin(a2)*r0}
              stroke={t.accent} strokeWidth="0.5" />
          );
        })}
      </g>

      {/* the Ø — drawn as O + slash */}
      <g>
        <circle cx={c} cy={c} r={r * 0.42} fill="none" stroke={t.ink} strokeWidth={size * 0.018} />
        <line x1={c - r * 0.34} y1={c + r * 0.34}
              x2={c + r * 0.34} y2={c - r * 0.34}
              stroke={t.ink} strokeWidth={size * 0.018} strokeLinecap="round" />
      </g>

      {/* central pinpoint */}
      <circle cx={c} cy={c} r={size * 0.012} fill={t.accent} />
    </svg>
  );
}

window.OneiroSigil = OneiroSigil;