// 37 FORGE — Branded abstract visuals for text-heavy page heroes.
// Reuses the existing .console panel styling (border, corner brackets, head).
// Loaded as a separate text/babel script; globals are shared.

// ---- Services: live service-status console ----
function ServiceConsole() {
  const rows = [
    { ic: "fa-eye", k: "Network Monitoring", v: "ALWAYS-ON", cls: "ok" },
    { ic: "fa-shield-halved", k: "Cybersecurity", v: "DEFENDING", cls: "ok" },
    { ic: "fa-database", k: "Data Backups", v: "VERIFIED", cls: "ok" },
    { ic: "fa-cloud", k: "Cloud Services", v: "OPTIMIZED", cls: "ok" },
    { ic: "fa-headset", k: "Help Desk", v: "2 IN QUEUE", cls: "warn" },
    { ic: "fa-phone-volume", k: "VoIP & Voice", v: "DIAL-TONE", cls: "ok" }
  ];
  return (
    <div className="console page-viz-console">
      <div className="console-head">
        <span className="t">SERVICE STATUS</span>
        <span className="ts">6 DISCIPLINES · LIVE</span>
      </div>
      <div className="console-body">
        {rows.map((r, i) => (
          <div className="console-row" key={i}>
            <span className="k"><i className={`fa-solid ${r.ic}`}></i>{r.k}</span>
            <span className={"v " + r.cls}>{r.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---- Co-Managed: collaboration network diagram ----
function CollabDiagram() {
  const left = [60, 130, 200];
  const right = [60, 130, 200];
  return (
    <div className="console page-viz-console">
      <div className="console-head">
        <span className="t">SHARED OPERATIONS</span>
        <span className="ts">CO-MANAGED · LINKED</span>
      </div>
      <div className="console-body viz-body">
        <svg viewBox="0 0 480 280" className="viz-svg" role="img" aria-label="Your team and 37 Forge linked through a shared operations hub">
          {/* column labels */}
          <text x="60" y="26" className="viz-lbl">YOUR TEAM</text>
          <text x="420" y="26" className="viz-lbl viz-lbl-r" textAnchor="end">37 FORGE</text>
          <text x="240" y="262" className="viz-lbl viz-lbl-c" textAnchor="middle">SHARED QUEUE · DOCS · ROADMAP</text>

          {/* connection lines */}
          {left.map((y, i) => <line key={"l" + i} x1="60" y1={y + 14} x2="240" y2="140" className="viz-line" />)}
          {right.map((y, i) => <line key={"r" + i} x1="420" y1={y + 14} x2="240" y2="140" className="viz-line viz-line-g" />)}

          {/* traveling pulses */}
          <circle r="3.5" className="viz-travel">
            <animateMotion dur="2.6s" repeatCount="indefinite" path="M60,84 L240,140" />
          </circle>
          <circle r="3.5" className="viz-travel viz-travel-g">
            <animateMotion dur="2.6s" begin="1.3s" repeatCount="indefinite" path="M420,214 L240,140" />
          </circle>

          {/* left nodes (client) */}
          {left.map((y, i) => (
            <g key={"ln" + i}>
              <circle cx="60" cy={y + 14} r="9" className="viz-node" />
              <circle cx="60" cy={y + 14} r="9" className="viz-ring" />
            </g>
          ))}
          {/* right nodes (forge) */}
          {right.map((y, i) => (
            <g key={"rn" + i}>
              <circle cx="420" cy={y + 14} r="9" className="viz-node viz-node-g" />
              <circle cx="420" cy={y + 14} r="9" className="viz-ring viz-ring-g" />
            </g>
          ))}
          {/* center hub */}
          <circle cx="240" cy="140" r="20" className="viz-hub-bg" />
          <circle cx="240" cy="140" r="20" className="viz-hub" />
          <text x="240" y="145" className="viz-hub-ic" textAnchor="middle">37</text>
        </svg>
      </div>
    </div>
  );
}

// ---- Automation: workflow pipeline diagram ----
function AutoFlowDiagram() {
  const steps = [
    { x: 26, n: "01", t: "TRIGGER" },
    { x: 150, n: "02", t: "RULE" },
    { x: 274, n: "03", t: "ACTION" },
    { x: 398, n: "04", t: "DONE" }
  ];
  return (
    <div className="console page-viz-console">
      <div className="console-head">
        <span className="t">WORKFLOW · RUNNING</span>
        <span className="ts">AUTOMATION · 24/7</span>
      </div>
      <div className="console-body viz-body">
        <svg viewBox="0 0 480 220" className="viz-svg" role="img" aria-label="An automated workflow: trigger, rule, action, done">
          {/* pipeline line */}
          <line x1="82" y1="80" x2="430" y2="80" className="viz-line viz-flow" />
          <circle r="4" className="viz-travel">
            <animateMotion dur="3s" repeatCount="indefinite" path="M82,80 L430,80" />
          </circle>

          {steps.map((s, i) => (
            <g key={i}>
              <rect x={s.x} y="52" width="56" height="56" rx="2" className="viz-box" />
              <rect x={s.x} y="52" width="56" height="56" rx="2" className="viz-box-br" />
              <text x={s.x + 28} y="86" className="viz-boxnum" textAnchor="middle">{s.n}</text>
              <text x={s.x + 28} y="128" className="viz-step" textAnchor="middle">{s.t}</text>
            </g>
          ))}

          {/* outcome line */}
          <text x="240" y="176" className="viz-lbl-c" textAnchor="middle">EMAILS · INVOICES · FOLLOW-UPS · REPORTS</text>
          <line x1="40" y1="196" x2="440" y2="196" className="viz-line viz-flow" />
        </svg>
      </div>
    </div>
  );
}

// Render the right FontAwesome glyph per step (overlay <i> isn't available inside SVG,
// so we draw an icon box label instead). Replace the placeholder glyphs with the
// step icons via a post-mount tweak is overkill — keep simple monospace step labels.

Object.assign(window, { ServiceConsole, CollabDiagram, AutoFlowDiagram });