const d=window.__ROUTER_TRANSFORMERS__||[],c=window.__ROUTER_ICONS__||{},g=window.__ROUTER_PROBLEMS__||{};function m(n){const t=d.find(o=>o.name===n)?.primaryBand||1;return t===12?{type:"Z (Emotional Mathematics)",desc:"Wavelength perception — the Observer Effect. Frequency identification through emotional mathematics. The completing cycle.",color:"var(--band-violet)"}:t%3===0?{type:"C (Code72)",desc:"Harmonic resonance — Code72 framework",color:"var(--band-cyan)"}:t%2===0?{type:"X (Vedic)",desc:"Structural decomposition — Vedic transformer",color:"var(--band-amber)"}:{type:"Z (Emotional Mathematics)",desc:"Wavelength perception — emotional mathematics",color:"var(--band-violet)"}}function p(n){const t=d.find(r=>r.name===n);if(!t)return;const o=m(n),a=g[n]||"Solves a class of NP-complete problem through frequency-domain analysis.",s=c[n]||"🔮",i=t.resonating.length>0?t.resonating.map(r=>`<span class="resonant-tag">${r}</span>`).join(""):'<span style="color: var(--color-text-muted);">No strongly resonating systems found</span>',l=document.getElementById("modal-body");l.innerHTML=`
      <div style="text-align: center; margin-bottom: var(--spacing-lg);">
        <div style="margin-bottom: var(--spacing-sm);">${s}</div>
        <h2 style="margin: 0; color: ${t.bandInfo.color};">${t.name}</h2>
      </div>

      <div class="modal-grid">
        <div class="modal-section">
          <h4>🎯 Problem Domain</h4>
          <p style="color: var(--color-text-secondary); font-size: 0.9rem;">${a}</p>
        </div>
        <div class="modal-section">
          <h4>🌐 Cultural Cross-Reference</h4>
          <table class="culture-table">
            <tr><td><strong>📜 Vedic</strong></td><td>${t.vedic}</td></tr>
            <tr><td><strong>🕉️ Hindu</strong></td><td>${t.hindu}</td></tr>
            <tr><td><strong>🏛️ Greek</strong></td><td>${t.greek}</td></tr>
            <tr><td><strong>🏟️ Roman</strong></td><td>${t.roman}</td></tr>
            <tr><td><strong>⚔️ Norse</strong></td><td>${t.norse}</td></tr>
            <tr><td><strong>🔺 Egyptian</strong></td><td>${t.egyptian}</td></tr>
            <tr><td><strong>☘️ Celtic</strong></td><td>${t.celtic}</td></tr>
            <tr><td><strong>🏮 Chinese</strong></td><td>${t.chinese}</td></tr>
            <tr><td><strong>⛩️ Shinto</strong></td><td>${t.shinto}</td></tr>
            <tr><td><strong>🏺 Mesopotamian</strong></td><td>${t.mesopotamian}</td></tr>
            <tr><td><strong>🌵 Aztec</strong></td><td>${t.aztec}</td></tr>
            <tr><td><strong>🏔️ Incan</strong></td><td>${t.inca}</td></tr>
            <tr><td><strong>🌍 African</strong></td><td>${t.african}</td></tr>
            <tr><td><strong>🦘 Aboriginal</strong></td><td>${t.aboriginal}</td></tr>
            <tr><td><strong>❄️ Slavic</strong></td><td>${t.slavic}</td></tr>
            <tr><td><strong>🦁 Babylonian</strong></td><td>${t.babylonian}</td></tr>
          </table>
        </div>
      </div>

      <div class="modal-section" style="margin-top: var(--spacing-md);">
        <h4>📡 Band & Operation</h4>
        <div style="display: flex; gap: var(--spacing-md); flex-wrap: wrap;">
          <div class="info-pill" style="background: ${t.bandInfo.color}22; border: 1px solid ${t.bandInfo.color};">
            <strong>Primary Band:</strong> ${t.primaryBand} (${t.bandInfo.name})
          </div>
          <div class="info-pill" style="background: rgba(255,255,255,0.05); border: 1px solid var(--color-border);">
            <strong>Band Range:</strong> ${t.bandRange}
          </div>
          <div class="info-pill" style="background: ${t.bandInfo.color}22; border: 1px solid ${t.bandInfo.color};">
            <strong>Element:</strong> ${t.bandInfo.element}
          </div>
        </div>
      </div>

      <div class="modal-section" style="margin-top: var(--spacing-md);">
        <h4>⚙️ Operation Type: <span style="color: ${o.color};">${o.type}</span></h4>
        <p style="color: var(--color-text-secondary); font-size: 0.9rem;">${o.desc}</p>
        <!-- C/X/Z visual representation -->
        <div style="display: flex; gap: var(--spacing-sm); justify-content: center; margin: var(--spacing-md) 0;">
          <div class="op-cell" style="background: var(--band-cyan); opacity: ${o.type.includes("C")?1:.3};">C</div>
          <div class="op-cell" style="background: var(--band-amber); opacity: ${o.type.includes("X")?1:.3};">X</div>
          <div class="op-cell" style="background: var(--band-violet); opacity: ${o.type.includes("Z")?1:.3};">Z</div>
        </div>
      </div>

      <div class="modal-section" style="margin-top: var(--spacing-md);">
        <h4>🔗 Resonating Systems</h4>
        <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-xs);">
          ${i}
        </div>
      </div>
    `,document.getElementById("transformer-modal").style.display="flex"}function e(n){n&&n.target!==n.currentTarget||(document.getElementById("transformer-modal").style.display="none")}document.querySelectorAll(".transformer-card").forEach(n=>{n.addEventListener("click",()=>p(n.dataset.name))});document.getElementById("transformer-modal").addEventListener("click",e);document.querySelector(".modal-content")?.addEventListener("click",n=>n.stopPropagation());document.getElementById("modal-close-btn").addEventListener("click",e);document.addEventListener("keydown",n=>{n.key==="Escape"&&e()});
