/* ============================================================
   SHLOK — Illustration library → window.Illo
   Animated abstract SVG scenes, themed per step.
   Shared visual language: indigo→teal, soft gradients,
   floating layered shapes, gentle motion.
   ============================================================ */
const Illo = (function () {
  const W = 460, H = 168;

  function Defs() {
    return (
      <defs>
        <linearGradient id="ig" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#8b92ff" />
          <stop offset="1" stopColor="#3ee0cf" />
        </linearGradient>
        <linearGradient id="ig2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#6f76f6" />
          <stop offset="1" stopColor="#19c6b4" />
        </linearGradient>
        <radialGradient id="glo" cx="50%" cy="40%" r="60%">
          <stop offset="0" stopColor="rgba(124,140,255,0.5)" />
          <stop offset="1" stopColor="rgba(124,140,255,0)" />
        </radialGradient>
        <filter id="soft"><feGaussianBlur stdDeviation="2.2" /></filter>
      </defs>
    );
  }

  // tiny dotted backdrop used in most scenes
  function Dots() {
    const els = [];
    for (let i = 0; i < 26; i++) {
      const x = (i * 67) % W, y = (i * 113) % H;
      els.push(<circle key={i} cx={x} cy={y} r="1.1" fill="#fff" opacity={0.05 + (i % 5) * 0.012} />);
    }
    return <g>{els}</g>;
  }

  const G = "url(#ig)", G2 = "url(#ig2)";
  const stroke = { fill: "none", stroke: "url(#ig)", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" };
  const sFaint = { fill: "none", stroke: "rgba(255,255,255,0.18)", strokeWidth: 1.4, strokeLinecap: "round" };

  /* ---- scenes ---- */
  const scenes = {
    // role — avatar in a glowing ring with orbiting role glyphs
    role: (
      <g>
        <circle cx="230" cy="86" r="46" fill="none" stroke="rgba(124,140,255,0.25)" strokeWidth="1.4" className="il-spin" />
        <circle cx="230" cy="86" r="62" fill="none" stroke="rgba(62,224,207,0.14)" strokeWidth="1.2" className="il-spin-r" />
        <circle cx="230" cy="86" r="30" fill="url(#glo)" />
        <g className="il-float">
          <circle cx="230" cy="78" r="12" fill={G2} />
          <path d="M210 104a20 20 0 0 1 40 0" fill={G2} />
        </g>
        <g className="il-tw"><circle cx="184" cy="86" r="4.5" fill="#8b92ff" /></g>
        <g className="il-tw" style={{ animationDelay: "-0.8s" }}><circle cx="276" cy="86" r="4.5" fill="#3ee0cf" /></g>
        <g className="il-tw" style={{ animationDelay: "-1.6s" }}><circle cx="230" cy="24" r="4" fill="#8b92ff" /></g>
        <g className="il-tw" style={{ animationDelay: "-1.2s" }}><circle cx="230" cy="148" r="4" fill="#3ee0cf" /></g>
      </g>
    ),

    // business — building blocks rising
    business: (
      <g>
        <line x1="120" y1="132" x2="340" y2="132" stroke="rgba(255,255,255,0.12)" strokeWidth="1.4" />
        <g className="il-rise">
          <rect x="150" y="92" width="44" height="40" rx="7" fill="rgba(111,118,246,0.3)" stroke="url(#ig)" strokeWidth="1.6" />
          <rect x="160" y="72" width="44" height="40" rx="7" fill="rgba(25,198,180,0.22)" stroke="url(#ig)" strokeWidth="1.6" className="il-float2" />
        </g>
        <g className="il-float">
          <rect x="208" y="58" width="50" height="74" rx="8" fill="url(#ig2)" opacity="0.9" />
          <rect x="218" y="70" width="11" height="11" rx="2" fill="rgba(255,255,255,0.5)" />
          <rect x="237" y="70" width="11" height="11" rx="2" fill="rgba(255,255,255,0.3)" />
          <rect x="218" y="90" width="11" height="11" rx="2" fill="rgba(255,255,255,0.3)" />
          <rect x="237" y="90" width="11" height="11" rx="2" fill="rgba(255,255,255,0.5)" />
        </g>
        <rect x="268" y="100" width="42" height="32" rx="6" fill="rgba(111,118,246,0.25)" stroke="url(#ig)" strokeWidth="1.6" className="il-float3" />
        <circle cx="300" cy="56" r="5" fill="#3ee0cf" className="il-pulse" />
      </g>
    ),

    // team — connected person nodes
    team: (
      <g>
        <g style={{ stroke: "rgba(124,140,255,0.3)", strokeWidth: 1.4 }}>
          <line x1="160" y1="60" x2="230" y2="92" /><line x1="300" y1="60" x2="230" y2="92" />
          <line x1="150" y1="118" x2="230" y2="92" /><line x1="310" y1="118" x2="230" y2="92" />
        </g>
        {[[160, 60, 0], [300, 60, -0.7], [150, 118, -1.4], [310, 118, -0.4]].map(([x, y, d], i) => (
          <g key={i} className="il-float2" style={{ animationDelay: d + "s" }}>
            <circle cx={x} cy={y} r="14" fill="rgba(13,18,33,0.9)" stroke="url(#ig)" strokeWidth="1.6" />
            <circle cx={x} cy={y - 3} r="4.5" fill="#9aa7c2" />
            <path d={`M${x - 7} ${y + 8}a7 7 0 0 1 14 0`} fill="#9aa7c2" />
          </g>
        ))}
        <g className="il-float">
          <circle cx="230" cy="92" r="20" fill="url(#ig2)" />
          <circle cx="230" cy="87" r="6" fill="rgba(255,255,255,0.85)" />
          <path d="M219 104a11 11 0 0 1 22 0" fill="rgba(255,255,255,0.85)" />
        </g>
      </g>
    ),

    // tools — scattered floating chips
    tools: (
      <g>
        <g className="il-float"><rect x="120" y="58" width="62" height="40" rx="11" fill="rgba(37,211,102,0.18)" stroke="rgba(37,211,102,0.6)" strokeWidth="1.6" />
          <circle cx="151" cy="78" r="10" fill="none" stroke="rgba(37,211,102,0.8)" strokeWidth="1.6" /><path d="M147 82l-3 4 5-1" fill="rgba(37,211,102,0.8)" /></g>
        <g className="il-float2"><rect x="196" y="48" width="68" height="46" rx="8" fill="rgba(111,118,246,0.2)" stroke="url(#ig)" strokeWidth="1.6" />
          <line x1="206" y1="62" x2="254" y2="62" stroke="rgba(255,255,255,0.4)" strokeWidth="2" /><line x1="206" y1="72" x2="244" y2="72" stroke="rgba(255,255,255,0.25)" strokeWidth="2" /><line x1="206" y1="82" x2="250" y2="82" stroke="rgba(255,255,255,0.25)" strokeWidth="2" /></g>
        <g className="il-float3"><rect x="278" y="62" width="56" height="56" rx="10" fill="rgba(25,198,180,0.18)" stroke="rgba(62,224,207,0.7)" strokeWidth="1.6" />
          <line x1="278" y1="80" x2="334" y2="80" stroke="rgba(62,224,207,0.5)" strokeWidth="1.4" /><line x1="296" y1="62" x2="296" y2="118" stroke="rgba(62,224,207,0.5)" strokeWidth="1.4" /><line x1="316" y1="62" x2="316" y2="118" stroke="rgba(62,224,207,0.5)" strokeWidth="1.4" /></g>
        <g className="il-float" style={{ animationDelay: "-2s" }}><rect x="150" y="104" width="44" height="30" rx="7" fill="rgba(95,184,224,0.18)" stroke="rgba(127,208,238,0.6)" strokeWidth="1.6" /><path d="M160 110l12 9 12-9" fill="none" stroke="rgba(127,208,238,0.8)" strokeWidth="1.6" /></g>
      </g>
    ),

    // worries — a head with floating concern dots
    worries: (
      <g>
        <g className="il-float">
          <path d="M230 128c-26 0-42-18-42-42a42 42 0 0 1 84 0c0 9-3 16-3 22 0 6 4 8 4 12 0 4-4 6-9 6h-8v6c0 4-3 6-7 6h-12Z" fill="rgba(111,118,246,0.16)" stroke="url(#ig)" strokeWidth="1.8" />
        </g>
        <g className="il-tw"><circle cx="218" cy="80" r="4" fill="#8b92ff" /></g>
        <g className="il-tw" style={{ animationDelay: "-0.7s" }}><circle cx="238" cy="72" r="5" fill="#3ee0cf" /></g>
        <g className="il-tw" style={{ animationDelay: "-1.3s" }}><circle cx="232" cy="94" r="3.5" fill="#8b92ff" /></g>
        <g className="il-float2"><circle cx="300" cy="50" r="3" fill="#9aa7c2" /><circle cx="312" cy="60" r="4.5" fill="#9aa7c2" /><circle cx="326" cy="74" r="6.5" fill="rgba(124,140,255,0.5)" /></g>
        <path d="M150 70l5 5M148 92l6-2M158 110l4-5" stroke="rgba(62,224,207,0.5)" strokeWidth="2" strokeLinecap="round" className="il-pulse" />
      </g>
    ),

    // messy — tangled line resolving into neat lines
    messy: (
      <g>
        <path d="M120 84c14-30 34 28 48-4s30 26 44-6 30 24 44-4" {...stroke} stroke="rgba(255,120,140,0.55)" className="il-dash" />
        <g className="il-float">
          <line x1="276" y1="62" x2="340" y2="62" stroke="url(#ig)" strokeWidth="3" strokeLinecap="round" />
          <line x1="276" y1="86" x2="340" y2="86" stroke="url(#ig)" strokeWidth="3" strokeLinecap="round" />
          <line x1="276" y1="110" x2="320" y2="110" stroke="url(#ig)" strokeWidth="3" strokeLinecap="round" />
        </g>
        <path d="M250 86h22" stroke="rgba(62,224,207,0.7)" strokeWidth="2" markerEnd="url(#a)" className="il-pulse" />
        <circle cx="272" cy="86" r="3" fill="#3ee0cf" />
      </g>
    ),

    // burden — figure carrying a stack
    burden: (
      <g>
        <g className="il-float">
          <rect x="196" y="44" width="68" height="16" rx="4" fill="rgba(111,118,246,0.5)" />
          <rect x="202" y="58" width="56" height="14" rx="4" fill="rgba(25,198,180,0.5)" />
          <rect x="208" y="70" width="44" height="13" rx="4" fill="rgba(124,140,255,0.4)" />
        </g>
        <circle cx="230" cy="100" r="11" fill="url(#ig2)" />
        <path d="M214 150c0-14 7-24 16-24s16 10 16 24" fill="none" stroke="url(#ig)" strokeWidth="3" strokeLinecap="round" />
        <path d="M210 92l-14 8M250 92l14 8" stroke="url(#ig)" strokeWidth="3" strokeLinecap="round" className="il-float2" />
      </g>
    ),

    // feeling — equalizer / gauge bars
    feeling: (
      <g>
        {[0, 1, 2, 3, 4].map((i) => (
          <g key={i}>
            <rect x={160 + i * 30} y="48" width="16" height="80" rx="8" fill="rgba(255,255,255,0.06)" />
            <rect x={160 + i * 30} y="48" width="16" height="80" rx="8" fill="url(#ig2)" className="il-bar" style={{ animationDelay: -i * 0.4 + "s", transformOrigin: `${168 + i * 30}px 128px` }} />
          </g>
        ))}
        <circle cx="168" cy="50" r="3.5" fill="#3ee0cf" className="il-pulse" />
        <circle cx="288" cy="50" r="3.5" fill="#8b92ff" className="il-pulse" style={{ animationDelay: "-1s" }} />
      </g>
    ),

    // scenario — overlapping speech bubbles
    scenario: (
      <g>
        <g className="il-float">
          <path d="M150 56h84a12 12 0 0 1 12 12v24a12 12 0 0 1-12 12h-52l-18 16v-16h-14a12 12 0 0 1-12-12V68a12 12 0 0 1 12-12Z" fill="rgba(111,118,246,0.2)" stroke="url(#ig)" strokeWidth="1.8" />
          <circle cx="172" cy="80" r="3.5" fill="#8b92ff" /><circle cx="192" cy="80" r="3.5" fill="#8b92ff" /><circle cx="212" cy="80" r="3.5" fill="#8b92ff" />
        </g>
        <g className="il-float2">
          <path d="M250 86h60a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-12l-14 12v-12h-34a12 12 0 0 1-12-12V98a12 12 0 0 1 12-12Z" fill="rgba(25,198,180,0.22)" stroke="rgba(62,224,207,0.7)" strokeWidth="1.8" />
          <line x1="266" y1="104" x2="306" y2="104" stroke="rgba(62,224,207,0.6)" strokeWidth="2" /><line x1="266" y1="114" x2="294" y2="114" stroke="rgba(62,224,207,0.4)" strokeWidth="2" />
        </g>
      </g>
    ),

    // loss — draining hourglass / falling coins
    loss: (
      <g>
        <g className="il-float">
          <path d="M206 48h48l-20 38 20 38h-48l20-38Z" fill="none" stroke="url(#ig)" strokeWidth="2.2" strokeLinejoin="round" />
          <path d="M214 56h32l-16 26Z" fill="rgba(124,140,255,0.5)" />
          <path d="M222 116h16l-8-12Z" fill="rgba(62,224,207,0.6)" />
        </g>
        <g className="il-float2"><circle cx="296" cy="64" r="11" fill="none" stroke="rgba(62,224,207,0.7)" strokeWidth="2" /><text x="296" y="69" textAnchor="middle" fontSize="11" fill="#3ee0cf" fontWeight="700">{"\u20B9"}</text></g>
        <g className="il-float3"><circle cx="318" cy="92" r="9" fill="none" stroke="rgba(124,140,255,0.6)" strokeWidth="2" /></g>
        <g className="il-tw"><circle cx="304" cy="118" r="7" fill="none" stroke="rgba(255,120,140,0.6)" strokeWidth="2" /></g>
      </g>
    ),

    // outcomes — scattered dots converging into a hub
    outcomes: (
      <g>
        <g style={{ stroke: "rgba(124,140,255,0.25)", strokeWidth: 1.4 }} className="il-dash">
          <line x1="150" y1="50" x2="230" y2="86" /><line x1="320" y1="48" x2="230" y2="86" />
          <line x1="140" y1="120" x2="230" y2="86" /><line x1="330" y1="120" x2="230" y2="86" />
        </g>
        {[[150, 50], [320, 48], [140, 120], [330, 120]].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="5.5" fill="#9aa7c2" className="il-tw" style={{ animationDelay: -i * 0.5 + "s" }} />
        ))}
        <g className="il-float">
          <circle cx="230" cy="86" r="26" fill="url(#glo)" />
          <rect x="212" y="68" width="36" height="36" rx="11" fill="url(#ig2)" />
          <path d="M222 86l6 6 12-13" fill="none" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        </g>
      </g>
    ),

    // trust — shield with check + rays
    trust: (
      <g>
        <g className="il-pulse" style={{ transformOrigin: "230px 86px" }}>
          <circle cx="230" cy="86" r="58" fill="url(#glo)" />
        </g>
        <g className="il-float">
          <path d="M230 44l34 14v24c0 22-15 38-34 46-19-8-34-24-34-46V58l34-14Z" fill="rgba(25,198,180,0.16)" stroke="url(#ig)" strokeWidth="2.2" strokeLinejoin="round" />
          <path d="M216 86l10 10 20-22" fill="none" stroke="url(#ig)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        </g>
      </g>
    ),

    // landing — a beacon line of light
    landing: (
      <g>
        <rect x="80" y="82" width="300" height="3" rx="1.5" fill="rgba(255,255,255,0.08)" />
        <rect x="150" y="81" width="160" height="5" rx="2.5" fill="url(#ig)" className="il-pulse" style={{ transformOrigin: "230px 84px" }} />
        <g className="il-float">
          <circle cx="230" cy="84" r="16" fill="url(#ig2)" />
          <circle cx="230" cy="84" r="28" fill="none" stroke="rgba(62,224,207,0.4)" strokeWidth="1.6" className="il-pulse" />
          <circle cx="230" cy="84" r="40" fill="none" stroke="rgba(124,140,255,0.2)" strokeWidth="1.4" />
        </g>
        <path d="M230 84l-22-30M230 84l22-30" stroke="rgba(124,140,255,0.4)" strokeWidth="2" strokeLinecap="round" />
      </g>
    ),

    // need — compass / heart-pulse
    need: (
      <g>
        <circle cx="230" cy="86" r="50" fill="none" stroke="rgba(124,140,255,0.25)" strokeWidth="1.6" />
        <circle cx="230" cy="86" r="50" fill="url(#glo)" />
        <g className="il-spin" style={{ transformOrigin: "230px 86px" }}>
          <path d="M230 50l12 36-12 8-12-8Z" fill="url(#ig2)" />
          <path d="M230 122l-12-36 12-8 12 8Z" fill="rgba(124,140,255,0.4)" />
        </g>
        <circle cx="230" cy="86" r="6" fill="#fff" />
        <circle cx="230" cy="36" r="3" fill="#3ee0cf" className="il-pulse" />
      </g>
    ),

    // contact — calendar + phone
    contact: (
      <g>
        <g className="il-float">
          <rect x="160" y="52" width="76" height="72" rx="10" fill="rgba(111,118,246,0.18)" stroke="url(#ig)" strokeWidth="1.8" />
          <line x1="160" y1="72" x2="236" y2="72" stroke="url(#ig)" strokeWidth="1.6" />
          <line x1="178" y1="48" x2="178" y2="60" stroke="url(#ig)" strokeWidth="2.4" strokeLinecap="round" />
          <line x1="218" y1="48" x2="218" y2="60" stroke="url(#ig)" strokeWidth="2.4" strokeLinecap="round" />
          <circle cx="178" cy="88" r="3" fill="#8b92ff" /><circle cx="198" cy="88" r="3" fill="#8b92ff" /><circle cx="218" cy="88" r="3" fill="rgba(255,255,255,0.3)" />
          <circle cx="178" cy="106" r="3" fill="rgba(255,255,255,0.3)" /><circle cx="198" cy="106" r="3" fill="#3ee0cf" />
        </g>
        <g className="il-float2">
          <rect x="256" y="62" width="40" height="64" rx="9" fill="url(#ig2)" />
          <rect x="262" y="70" width="28" height="40" rx="3" fill="rgba(8,12,22,0.55)" />
          <circle cx="276" cy="118" r="3" fill="rgba(255,255,255,0.7)" />
          <path d="M268 84l6 6 10-12" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
        </g>
      </g>
    ),
  };

  function Illo({ name }) {
    const scene = scenes[name] || scenes.role;
    return (
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <Defs />
        <Dots />
        {scene}
      </svg>
    );
  }
  return Illo;
})();
window.Illo = Illo;
