// MorphMark — animated AEQ shield/letter mark.
// Three layered morphing blobs + animated circuit lines.
// `intensity` 0..100 controls amplitude & speed.

function MorphMark({ intensity = 70, size = 320, monochrome = false }) {
  const i = Math.max(0, Math.min(100, intensity)) / 100;
  const amp = 6 + i * 16;     // blob amplitude
  const speed = 14 - i * 8;   // seconds per cycle

  // Three blobs with offset phases (CSS keyframes drive d via CSS variables would be heavy — use SMIL animateTransform instead)
  return (
    <div className="morph-mark" style={{ width: size, height: size, ['--amp']: amp+'px', ['--spd']: speed+'s' }}>
      <svg viewBox="-100 -100 200 200" width={size} height={size} aria-hidden="true">
        <defs>
          <linearGradient id="mm-g1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor={monochrome ? "var(--ink)" : "#0b1e3f"} />
            <stop offset="55%" stopColor={monochrome ? "var(--ink)" : "#0ea5e9"} />
            <stop offset="100%" stopColor={monochrome ? "var(--ink)" : "#22d3ee"} />
          </linearGradient>
          <linearGradient id="mm-g2" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stopColor={monochrome ? "transparent" : "#22d3ee"} />
            <stop offset="100%" stopColor={monochrome ? "transparent" : "#a3e635"} />
          </linearGradient>
          <radialGradient id="mm-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#22d3ee" stopOpacity=".5" />
            <stop offset="60%" stopColor="#22d3ee" stopOpacity="0" />
          </radialGradient>
          <filter id="mm-blur"><feGaussianBlur stdDeviation="2.5" /></filter>
        </defs>

        {/* glow */}
        <circle cx="0" cy="0" r="92" fill="url(#mm-glow)" />

        {/* Morphing blob shield - back layer */}
        <g className="mm-blob-a">
          <path d="M 0 -78 C 38 -78 78 -50 78 -16 C 78 24 50 70 0 78 C -50 70 -78 24 -78 -16 C -78 -50 -38 -78 0 -78 Z"
            fill="url(#mm-g1)" opacity="0.22" />
        </g>
        <g className="mm-blob-b">
          <path d="M 0 -70 C 40 -70 72 -40 70 -8 C 68 28 40 64 0 70 C -40 64 -68 28 -70 -8 C -72 -40 -40 -70 0 -70 Z"
            fill="url(#mm-g1)" opacity="0.32" filter="url(#mm-blur)" />
        </g>

        {/* Shield outline (the structural mark) */}
        <g className="mm-shield">
          <path d="M 0 -66 L 56 -44 L 56 12 C 56 38 32 58 0 70 C -32 58 -56 38 -56 12 L -56 -44 Z"
            fill="none" stroke="url(#mm-g1)" strokeWidth="2.5" strokeLinejoin="round" />
        </g>

        {/* AEQ letterforms — abstracted, set in mono */}
        <g className="mm-letters" fill={monochrome ? "var(--ink)" : "#0b1e3f"}>
          {/* A */}
          <path d="M -36 22 L -22 -22 L -8 22 M -30 8 L -14 8" stroke="url(#mm-g1)" strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          {/* E */}
          <path d="M 4 -22 L 4 22 M 4 -22 L 22 -22 M 4 0 L 18 0 M 4 22 L 22 22" stroke="url(#mm-g1)" strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          {/* Q — circle + tail (drawn off-center to feel like the source mark) */}
          <circle cx="42" cy="0" r="14" stroke="url(#mm-g2)" strokeWidth="4" fill="none"/>
          <path d="M 50 8 L 60 18" stroke="url(#mm-g2)" strokeWidth="4" strokeLinecap="round" fill="none"/>
        </g>

        {/* Circuit lines that pulse */}
        <g className="mm-circuits" stroke="url(#mm-g2)" strokeWidth="1.2" fill="none" opacity=".9">
          <path d="M -78 -30 L -64 -30 L -58 -36" />
          <path d="M  78 -10 L 64 -10 L 58 -16" />
          <path d="M -70  40 L -50 40 L -44 34" />
          <path d="M  70  44 L 50 44 L 44 50" strokeDasharray="3 3" />
          <circle cx="-78" cy="-30" r="2.2" fill="#22d3ee" />
          <circle cx=" 78" cy="-10" r="2.2" fill="#a3e635" />
          <circle cx="-70" cy=" 40" r="2.2" fill="#0ea5e9" />
          <circle cx=" 70" cy=" 44" r="2.2" fill="#22d3ee" />
        </g>

        {/* corner dots */}
        <g className="mm-dots" fill="url(#mm-g2)">
          <circle cx="-58" cy="56" r="2.2"/>
          <circle cx="-50" cy="56" r="1.6" opacity=".75"/>
          <circle cx="-42" cy="56" r="1.2" opacity=".5"/>
        </g>
      </svg>

      <style>{`
        .morph-mark{position:relative;display:inline-flex}
        .morph-mark svg{display:block; filter: hue-rotate(var(--hue-shift,0deg));}
        .mm-blob-a{transform-origin:center;animation: mm-blob-a var(--spd,14s) ease-in-out infinite alternate}
        .mm-blob-b{transform-origin:center;animation: mm-blob-b calc(var(--spd,14s) * 0.78) ease-in-out infinite alternate}
        .mm-shield{transform-origin:center;animation: mm-shield calc(var(--spd,14s) * 1.4) ease-in-out infinite alternate}
        .mm-letters{transform-origin:center;animation: mm-letters calc(var(--spd,14s) * 1.6) ease-in-out infinite alternate}
        .mm-circuits path{stroke-dasharray:0,140;stroke-dashoffset:0;animation: mm-trace 5.5s ease-in-out infinite}
        .mm-circuits path:nth-child(2){animation-delay:.6s}
        .mm-circuits path:nth-child(3){animation-delay:1.2s}
        .mm-circuits path:nth-child(4){animation-delay:1.8s}
        .mm-circuits circle{animation: mm-blink 2.4s ease-in-out infinite}
        .mm-circuits circle:nth-child(6){animation-delay:.4s}
        .mm-circuits circle:nth-child(7){animation-delay:.8s}
        .mm-circuits circle:nth-child(8){animation-delay:1.2s}

        @keyframes mm-blob-a{
          0%   { transform: translate(calc(var(--amp)*-.4), calc(var(--amp)*.3)) scale(1)    rotate(0deg) }
          50%  { transform: translate(calc(var(--amp)*.5),  calc(var(--amp)*-.2)) scale(1.05) rotate(8deg) }
          100% { transform: translate(calc(var(--amp)*-.2), calc(var(--amp)*.5)) scale(.97)  rotate(-6deg) }
        }
        @keyframes mm-blob-b{
          0%   { transform: translate(calc(var(--amp)*.3), calc(var(--amp)*-.4)) scale(1) rotate(0deg) }
          100% { transform: translate(calc(var(--amp)*-.5),calc(var(--amp)*.3))  scale(1.08) rotate(-12deg) }
        }
        @keyframes mm-shield{
          0%, 100% { transform: rotate(0deg) scale(1) }
          50%      { transform: rotate(2deg) scale(1.02) }
        }
        @keyframes mm-letters{
          0%, 100% { transform: translateY(0px) }
          50%      { transform: translateY(-2px) }
        }
        @keyframes mm-trace{
          0%   { stroke-dasharray: 0 140; }
          40%  { stroke-dasharray: 90 50; }
          100% { stroke-dasharray: 0 140; stroke-dashoffset: -140; }
        }
        @keyframes mm-blink{
          0%, 100% { opacity:.4; r:1.4 }
          50%      { opacity:1;  r:2.6 }
        }
      `}</style>
    </div>
  );
}

window.MorphMark = MorphMark;