// Animated monogram sigils for the three teammates.
// Each is a full-size SVG that fills the .monogram circle.

const { useEffect: useSigilEffect, useRef: useSigilRef } = React;

function SigilWatchdog() {
  // Radar sweep — rotating arc + pinging dot
  return (
    <svg viewBox="0 0 100 100" aria-hidden="true">
      <defs>
        <clipPath id="wd-clip"><circle cx="50" cy="50" r="42" /></clipPath>
      </defs>
      <g clipPath="url(#wd-clip)">
        {/* grid */}
        <circle cx="50" cy="50" r="14" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.25"/>
        <circle cx="50" cy="50" r="26" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.2"/>
        <circle cx="50" cy="50" r="38" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.15"/>
        <line x1="10" y1="50" x2="90" y2="50" stroke="currentColor" strokeWidth="0.5" opacity="0.15"/>
        <line x1="50" y1="10" x2="50" y2="90" stroke="currentColor" strokeWidth="0.5" opacity="0.15"/>

        {/* sweep arc */}
        <g style={{transformOrigin:"50px 50px", animation:"wd-sweep 4s linear infinite"}}>
          <path d="M 50 50 L 90 50 A 40 40 0 0 0 78.28 21.72 Z" fill="currentColor" opacity="0.14" />
          <line x1="50" y1="50" x2="90" y2="50" stroke="currentColor" strokeWidth="1.2" />
        </g>

        {/* targets (ping) */}
        <circle cx="68" cy="38" r="1.6" fill="currentColor">
          <animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite" begin="1s"/>
        </circle>
        <circle cx="34" cy="62" r="1.6" fill="currentColor">
          <animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite" begin="2.6s"/>
        </circle>

        {/* monogram */}
        <text x="50" y="58" textAnchor="middle" fontFamily="var(--serif)" fontSize="30" fontStyle="italic" fontWeight="500" fill="currentColor">W</text>
      </g>
    </svg>
  );
}

function SigilEzra() {
  // Concentric knowledge rings — slow pulse outward
  return (
    <svg viewBox="0 0 100 100" aria-hidden="true">
      <defs>
        <clipPath id="ez-clip"><circle cx="50" cy="50" r="42" /></clipPath>
      </defs>
      <g clipPath="url(#ez-clip)">
        {[0, 1, 2].map(i => (
          <circle
            key={i}
            cx="50" cy="50"
            fill="none" stroke="currentColor" strokeWidth="0.8"
            style={{transformOrigin:"50px 50px", animation:`ez-pulse 3.6s ease-out ${i * 1.2}s infinite`}}
          />
        ))}
        {/* nodes */}
        <circle cx="22" cy="44" r="1.6" fill="currentColor" opacity="0.55"/>
        <circle cx="80" cy="34" r="1.6" fill="currentColor" opacity="0.55"/>
        <circle cx="74" cy="74" r="1.6" fill="currentColor" opacity="0.55"/>
        <circle cx="28" cy="72" r="1.6" fill="currentColor" opacity="0.55"/>
        {/* monogram */}
        <text x="50" y="58" textAnchor="middle" fontFamily="var(--serif)" fontSize="30" fontStyle="italic" fontWeight="500" fill="currentColor">E</text>
      </g>
    </svg>
  );
}

function SigilMia() {
  // Call waveform — bars animating heights
  const bars = [
    { x: 22, h: 14 },
    { x: 30, h: 26 },
    { x: 38, h: 10 },
    { x: 58, h: 22 },
    { x: 66, h: 12 },
    { x: 74, h: 20 },
  ];
  return (
    <svg viewBox="0 0 100 100" aria-hidden="true">
      <defs>
        <clipPath id="mi-clip"><circle cx="50" cy="50" r="42" /></clipPath>
      </defs>
      <g clipPath="url(#mi-clip)">
        {/* wave bars — left group */}
        {bars.map((b, i) => (
          <rect
            key={i}
            x={b.x} width="3" rx="1.5"
            fill="currentColor"
            opacity="0.75"
            style={{
              transformOrigin: `${b.x + 1.5}px 50px`,
              animation: `mi-wave 1.4s ease-in-out ${i * 0.12}s infinite`,
              y: `${50 - b.h / 2}px`,
              height: `${b.h}px`,
            }}
          >
            <animate attributeName="y" values={`${50 - b.h/2};${50 - b.h/4};${50 - b.h/2}`} dur="1.4s" begin={`${i * 0.12}s`} repeatCount="indefinite"/>
            <animate attributeName="height" values={`${b.h};${b.h/2};${b.h}`} dur="1.4s" begin={`${i * 0.12}s`} repeatCount="indefinite"/>
          </rect>
        ))}
        {/* monogram */}
        <text x="50" y="58" textAnchor="middle" fontFamily="var(--serif)" fontSize="30" fontStyle="italic" fontWeight="500" fill="currentColor">M</text>
      </g>
    </svg>
  );
}

window.SigilWatchdog = SigilWatchdog;
window.SigilEzra = SigilEzra;
window.SigilMia = SigilMia;