// Animated architecture flow: SME public profile → secure MCP handshake → SME AI Pod
// (Green Lion 25-min acquire loop → priority → ActionList → office-hour plan → new board),
// with a Yellow Lion audit rail. Flowing dashed wires + traveling data packets (SMIL).
const V = "#a78bfa", GRN = "#34D399", AMB = "#F5B301", SKY = "#38bdf8", ROSE = "#F43F5E";
const CARD = "rgba(21,14,39,0.94)", LINE = "rgba(255,255,255,0.14)";

// A flowing wire with N traveling packets. Paths are drawn in the direction of flow.
const Wire = ({ id, d, c = V, w = 2, dur = 2.6, n = 1, delay = 0 }) => (
  <g>
    <path d={d} fill="none" stroke={c} strokeOpacity="0.13" strokeWidth={w + 2.5} strokeLinecap="round" />
    <path id={id} d={d} className="itg-wire" fill="none" stroke={c} strokeWidth={w} strokeLinecap="round" />
    {Array.from({ length: n }).map((_, i) => (
      <circle key={i} r="4.4" fill={c} className="itg-packet" style={{ color: c }}>
        <animateMotion dur={dur + "s"} begin={(delay + i * (dur / n)).toFixed(2) + "s"} repeatCount="indefinite">
          <mpath xlinkHref={"#" + id} href={"#" + id} />
        </animateMotion>
      </circle>
    ))}
  </g>
);

const Card = ({ x, y, w, h, c = LINE, fill = CARD, rx = 16 }) => (
  <g>
    <rect x={x} y={y} width={w} height={h} rx={rx} fill={fill} stroke={c} strokeWidth="1.4" />
    <rect x={x + 1} y={y + 1} width={w - 2} height={h - 2} rx={rx - 1} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
  </g>
);

const Pill = ({ x, y, w, label, c = "#C9B8EC", bg = "rgba(255,255,255,0.05)", bc = "rgba(255,255,255,0.16)", h = 24 }) => (
  <g>
    <rect x={x} y={y} width={w} height={h} rx={h / 2} fill={bg} stroke={bc} />
    <text x={x + w / 2} y={y + h / 2 + 4} textAnchor="middle" className="itg-badge-t" style={{ fill: c }}>{label}</text>
  </g>
);

const Chk = ({ x, y, c = V }) => (
  <g>
    <circle cx={x} cy={y} r="7" fill="none" stroke={c} strokeOpacity="0.6" strokeWidth="1.3" />
    <path d={`M${x - 3} ${y} l2.2 2.4 l4 -4.6`} fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
  </g>
);

const IntegrationDiagram = () => (
  <div className="itg-diagram">
    <svg viewBox="0 0 1120 1160" className="itg-svg" role="img"
      aria-label="Architecture flow: the public SME profile calls a secure MCP gateway that handshakes with the ActionBoard gateway and posts into the SME AI Pod, where the Green Lion runs a 25-minute acquire loop to classify requests, build an ActionList, and ship a new scheduled ActionBoard — logged the whole way by the Yellow Lion audit trail.">

      {/* ============ WIRES (under nodes) ============ */}
      {/* band A */}
      <Wire id="w-cust" d="M220 156 C248 156 262 150 296 150" c={SKY} dur={2.8} />
      <Wire id="w-a2b" d="M531 224 C531 252 436 258 436 286" c={V} dur={2.6} delay={0.3} />
      {/* band B */}
      <Wire id="w-hs" d="M548 324 H628" c={V} dur={1.7} />
      <Wire id="w-b2c" d="M740 362 C740 388 740 392 740 404" c={V} dur={1.4} />
      {/* into pod → green lion */}
      <Wire id="w-entry" d="M740 404 C740 452 300 448 250 498" c={GRN} dur={2.6} />
      <Wire id="w-gl-pri" d="M328 556 H396" c={GRN} dur={1.4} n={2} />
      <Wire id="w-pri-al" d="M604 556 H700" c={GRN} dur={1.4} n={2} />
      {/* return sweep down to plan row */}
      <Wire id="w-return" d="M816 612 C816 648 216 636 216 668" c={V} dur={3.2} n={2} />
      <Wire id="w-oh-fp" d="M328 714 H396" c={V} dur={1.4} />
      <Wire id="w-fp-cm" d="M604 714 H700" c={V} dur={1.4} />
      {/* pod exit → new board */}
      <Wire id="w-exit" d="M816 760 C816 812 560 800 560 872" c={V} dur={2.6} />
      {/* board → outputs */}
      <Wire id="w-b-sch" d="M560 1022 C560 1036 300 1030 300 1044" c={V} dur={2.0} />
      <Wire id="w-b-vis" d="M560 1022 V1044" c={V} dur={2.0} delay={0.5} />
      <Wire id="w-b-pay" d="M560 1022 C560 1036 828 1030 828 1044" c={V} dur={2.0} delay={0.9} />

      {/* ============ YELLOW LION AUDIT RAIL (right) ============ */}
      <Wire id="w-rail" d="M1058 150 V1094" c={AMB} dur={4.4} n={3} />
      <Wire id="w-t1" d="M766 152 H1058" c={AMB} dur={1.8} />
      <Wire id="w-t2" d="M852 324 H1058" c={AMB} dur={1.8} delay={0.4} />
      <Wire id="w-t3" d="M1032 556 H1058" c={AMB} dur={1.2} delay={0.2} />
      <Wire id="w-t4" d="M1032 714 H1058" c={AMB} dur={1.2} delay={0.6} />
      <Wire id="w-t5" d="M924 1080 H1058" c={AMB} dur={1.8} delay={0.8} />
      {[152, 324, 556, 714, 1080].map((cy) => (
        <g key={cy}>
          <circle cx={1058} cy={cy} r="8" fill="rgba(217,119,6,0.16)" stroke={AMB} strokeWidth="1.4" />
          <rect x={1055} y={cy - 1.5} width={6} height={6} rx={1.2} fill="none" stroke={AMB} strokeWidth="1.2" />
          <path d={`M1056.5 ${cy - 1.5} v-2 a1.5 1.5 0 0 1 3 0 v2`} fill="none" stroke={AMB} strokeWidth="1.2" />
        </g>
      ))}
      <text x={1096} y={620} textAnchor="middle" transform="rotate(90 1096 620)" className="itg-rail-lbl" style={{ fill: AMB }}>YELLOW LION · IMMUTABLE AUDIT TRAIL · MERKLE-ATTESTED</text>
      <text x={1058} y={138} textAnchor="middle" className="itg-mini" style={{ fill: AMB }}>user pod</text>
      <text x={1058} y={1112} textAnchor="middle" className="itg-mini" style={{ fill: AMB }}>SME pod</text>

      {/* ============ BAND A — PUBLIC EDGE ============ */}
      <text x={44} y={80} className="itg-lbl">01 · PUBLIC ACCESS</text>
      {/* customer */}
      <Card x={44} y={104} w={176} h={104} />
      <circle cx={78} cy={140} r="13" fill="rgba(56,189,248,0.14)" stroke={SKY} strokeWidth="1.3" />
      <circle cx={78} cy={135} r="4.4" fill={SKY} />
      <path d="M70 149 a8 8 0 0 1 16 0" fill="none" stroke={SKY} strokeWidth="1.6" />
      <text x={100} y={134} className="itg-t1">Customer</text>
      <text x={100} y={152} className="itg-t2">shares a request</text>
      <Pill x={60} y={172} w={140} label="◍ Share data" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.32)" />
      {/* compliance scrub gate on the wire */}
      <g transform="translate(258 150)">
        <rect x="-15" y="-15" width="30" height="30" rx="7" transform="rotate(45)" fill="rgba(52,211,153,0.14)" stroke={GRN} strokeWidth="1.4" />
        <path d="M-6 0 h12 M-6 -4 h12 M-6 4 h9" stroke={GRN} strokeWidth="1.4" strokeLinecap="round" />
      </g>
      <text x={258} y={196} textAnchor="middle" className="itg-mini" style={{ fill: GRN }}>compliance scrub</text>
      {/* profile app card */}
      <Card x={296} y={96} w={470} h={128} c="rgba(167,139,250,0.4)" />
      <text x={324} y={132} className="itg-hd">SME Public Profile</text>
      <g transform="translate(700 118)">
        <circle r="4" fill={GRN} />
        <text x={12} y={4} className="itg-mini" style={{ fill: GRN, textAnchor: "start" }}>PUBLIC</text>
      </g>
      <text x={324} y={154} className="itg-t2">profile.actionboard.ai</text>
      <Pill x={324} y={172} w={132} label="⊕ DNS control" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.34)" />
      <Pill x={466} y={172} w={196} label="⛨ Data security controls" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />

      {/* ============ BAND B — SECURE MCP BRIDGE ============ */}
      <text x={300} y={250} className="itg-lbl">02–03 · SECURE MCP HANDSHAKE</text>
      <rect x={300} y={262} width={560} height={126} rx={18} fill="rgba(124,58,237,0.05)" stroke="rgba(167,139,250,0.22)" strokeWidth="1.2" strokeDasharray="3 6" />
      {/* left shield — profile secure gateway */}
      <Card x={312} y={286} w={224} h={76} c="rgba(167,139,250,0.4)" />
      <path d="M340 300 l14 -6 l14 6 v10 c0 9 -7 15 -14 19 c-7 -4 -14 -10 -14 -19 z" fill="rgba(124,58,237,0.16)" stroke={V} strokeWidth="1.4" />
      <text x={378} y={316} className="itg-t1" style={{ fontSize: "13.5px" }}>Profile Secure</text>
      <text x={378} y={332} className="itg-t1" style={{ fontSize: "13.5px" }}>MCP Gateway</text>
      <text x={378} y={349} className="itg-t2" style={{ fontSize: "10px" }}>mcp://…/profile</text>
      {/* right shield — actionboard gateway */}
      <Card x={628} y={286} w={224} h={76} c="rgba(167,139,250,0.4)" />
      <path d="M656 300 l14 -6 l14 6 v10 c0 9 -7 15 -14 19 c-7 -4 -14 -10 -14 -19 z" fill="rgba(124,58,237,0.16)" stroke={V} strokeWidth="1.4" />
      <text x={694} y={316} className="itg-t1" style={{ fontSize: "13.5px" }}>ActionBoard</text>
      <text x={694} y={332} className="itg-t1" style={{ fontSize: "13.5px" }}>MCP Gateway</text>
      <text x={694} y={349} className="itg-t2" style={{ fontSize: "10px" }}>gateway.actionboard.ai</text>
      {/* handshake lock motif on the bridge wire */}
      <g className="itg-pulse">
        <rect x={576} y={318} width={16} height={13} rx={2.5} fill="#150E27" stroke={V} strokeWidth="1.5" />
        <path d="M579 318 v-3.5 a5 5 0 0 1 10 0 v3.5" fill="none" stroke={V} strokeWidth="1.5" />
        <circle cx={584} cy={325} r="1.6" fill={V} />
      </g>
      <text x={584} y={281} textAnchor="middle" className="itg-mini" style={{ fill: V }}>mTLS · signed route</text>

      {/* ============ BAND C — SME AI POD ============ */}
      <Card x={64} y={404} w={968} h={436} c="rgba(255,255,255,0.16)" fill="rgba(14,9,26,0.72)" rx={22} />
      <circle cx={92} cy={436} r="5" fill={GRN} className="itg-pulse" />
      <text x={108} y={441} className="itg-hd">SME AI Pod · Voltron Castle</text>
      <text x={1008} y={441} textAnchor="end" className="itg-t2">pod: sme-jarjis-imam</text>
      <line x1={88} y1={456} x2={1008} y2={456} stroke="rgba(255,255,255,0.1)" strokeWidth="1" />

      {/* — row 1: green lion → priority → actionlist — */}
      {/* green lion */}
      <Card x={104} y={498} w={224} h={118} c="rgba(52,211,153,0.4)" />
      <g transform="translate(158 552)">
        <g className="itg-cycle">
          <circle r="31" fill="none" stroke="#059669" strokeOpacity="0.3" strokeWidth="6" />
          <circle r="31" fill="none" stroke={GRN} strokeWidth="3.4" strokeDasharray="34 160" strokeLinecap="round" />
          <circle r="31" fill="none" stroke={GRN} strokeWidth="3.4" strokeDasharray="6 190" strokeDashoffset="-120" strokeLinecap="round" />
        </g>
        <circle r="19" fill="rgba(5,150,105,0.16)" stroke="#059669" strokeWidth="1.3" />
        <text x="0" y="7" textAnchor="middle" style={{ fontSize: "20px" }}>🦁</text>
      </g>
      <text x={202} y={540} className="itg-t1" style={{ fontSize: "14px" }}>Green Lion</text>
      <text x={202} y={558} className="itg-t2">batch acquire</text>
      <text x={202} y={584} style={{ fill: GRN, fontFamily: "ui-monospace,Menlo,monospace", fontSize: "17px", fontWeight: 800 }}>25:00</text>
      <text x={252} y={584} className="itg-t2" style={{ fontSize: "10px" }}>min / cycle</text>
      {/* priority classification */}
      <Card x={396} y={500} w={208} h={112} c="rgba(52,211,153,0.4)" />
      <text x={412} y={524} className="itg-t3">Priority classification</text>
      {[{ y: 542, c: ROSE, l: "P1", w: 132 }, { y: 566, c: AMB, l: "P2", w: 100 }, { y: 590, c: SKY, l: "P3", w: 70 }].map((r) => (
        <g key={r.l}>
          <circle cx={416} cy={r.y} r="4" fill={r.c} />
          <text x={428} y={r.y + 4} className="itg-t2" style={{ fill: r.c, fontSize: "10.5px" }}>{r.l}</text>
          <rect x={452} y={r.y - 4} width={140} height={8} rx={4} fill="rgba(255,255,255,0.06)" />
          <rect x={452} y={r.y - 4} width={r.w} height={8} rx={4} fill={r.c} fillOpacity="0.8" />
        </g>
      ))}
      {/* actionlist */}
      <Card x={700} y={500} w={232} h={112} c="rgba(52,211,153,0.4)" />
      <text x={716} y={524} className="itg-t1" style={{ fontSize: "14px" }}>ActionList</text>
      <text x={716} y={540} className="itg-t2" style={{ fontSize: "10px" }}>for Voltron Lion agents</text>
      {[{ y: 562, w: 150 }, { y: 582, w: 120 }, { y: 602, w: 172 }].map((r, i) => (
        <g key={i}>
          <Chk x={724} y={r.y} c={GRN} />
          <rect x={740} y={r.y - 3.5} width={r.w} height={7} rx={3.5} fill="rgba(167,139,250,0.32)" />
        </g>
      ))}

      {/* — row 2: office hour → feature plan → custom model — */}
      <Card x={104} y={668} w={224} h={92} c={LINE} />
      <g transform="translate(134 700)"><circle r="11" fill="none" stroke={V} strokeWidth="1.5" /><path d="M0 -6 V0 l4 3" fill="none" stroke={V} strokeWidth="1.5" strokeLinecap="round" /></g>
      <text x={156} y={700} className="itg-t1" style={{ fontSize: "13.5px" }}>G-Stack Office Hour</text>
      <text x={156} y={718} className="itg-t2" style={{ fontSize: "10px" }}>SME live build session</text>
      <Card x={396} y={668} w={208} h={92} c={LINE} />
      <text x={412} y={700} className="itg-t1" style={{ fontSize: "13.5px" }}>Feature plan</text>
      <text x={412} y={718} className="itg-t2" style={{ fontSize: "10px" }}>scoped from request</text>
      <Card x={700} y={668} w={232} h={92} c={LINE} />
      <text x={716} y={696} className="itg-t1" style={{ fontSize: "13.5px" }}>Your custom model</text>
      <Pill x={716} y={710} w={98} label="Core model" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.32)" h={22} />
      <Pill x={822} y={710} w={94} label="Training" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.32)" h={22} />

      {/* ============ BAND D — DELIVERY ============ */}
      <text x={300} y={862} className="itg-lbl">07 · NEW ACTIONBOARD</text>
      <Card x={300} y={872} w={520} h={150} c="rgba(167,139,250,0.4)" />
      <text x={328} y={906} className="itg-hd">New ActionBoard</text>
      <text x={328} y={926} className="itg-t2">created for the incoming request</text>
      <Pill x={328} y={942} w={112} label="KB loaded" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.3)" />
      <Pill x={448} y={942} w={128} label="Analysis done" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />
      {[{ y: 982, w: 420 }, { y: 1000, w: 340 }].map((r, i) => (
        <g key={i}>
          <circle cx={334} cy={r.y + 3} r="3" fill={V} />
          <rect x={348} y={r.y} width={r.w} height={7} rx={3.5} fill="rgba(255,255,255,0.09)" />
        </g>
      ))}
      {/* outputs */}
      <Card x={216} y={1044} w={168} h={72} c={LINE} />
      <text x={300} y={1076} textAnchor="middle" className="itg-t1" style={{ fontSize: "13.5px" }}>Schedule</text>
      <text x={300} y={1094} textAnchor="middle" className="itg-t2" style={{ fontSize: "10px" }}>cadence set</text>
      <Card x={456} y={1044} w={208} h={72} c="rgba(167,139,250,0.4)" />
      <text x={560} y={1076} textAnchor="middle" className="itg-t1" style={{ fontSize: "13.5px" }}>Vision ActionBoard</text>
      <text x={560} y={1094} textAnchor="middle" className="itg-t2" style={{ fontSize: "10px" }}>complete build</text>
      <Card x={724} y={1044} w={200} h={72} c={LINE} />
      <text x={824} y={1076} textAnchor="middle" className="itg-t1" style={{ fontSize: "13.5px" }}>Payment agents</text>
      <text x={824} y={1094} textAnchor="middle" className="itg-t2" style={{ fontSize: "10px" }}>wallet link shared</text>
    </svg>
  </div>
);

// ============================================================================
// PERSONAL AI ACTIONBOARD ARCHITECTURE
// Your ActionBoard is the control plane. Managed from mobile + Voltron Castle
// desktop (local model / hybrid), executing across a local runtime and an
// always-on cloud AI pod (150+ tools, Voltron agents). Models + community-hosted
// MCP providers supply both. SME profiles (right rail) take mission briefings /
// meeting requests and run an auto action loop as an AI backend to the board.
const PersonalDiagram = () => (
  <div className="itg-diagram">
    <svg viewBox="0 0 1120 980" className="itg-svg" role="img"
      aria-label="Personal architecture: your ActionBoard is the control plane, managed from a mobile client and the Voltron Castle local desktop app (local model or hybrid mode). It executes across a local runtime and an always-on ActionBoard.ai cloud AI pod running 150+ tools and Voltron agents. Multiple models and a community-hosted MCP gateway supply both engines with nothing to self-host. SME profiles take mission briefings and meeting requests and run an auto action loop as an AI backend to the board.">

      {/* ============ WIRES (under nodes) ============ */}
      {/* clients → board */}
      <Wire id="p-mob" d="M300 200 C300 228 400 224 430 250" c={SKY} dur={2.4} />
      <Wire id="p-desk" d="M820 200 C820 228 720 224 690 250" c={V} dur={2.4} delay={0.3} />
      {/* board → execution */}
      <Wire id="p-loc" d="M440 436 C440 462 320 460 300 486" c={V} dur={2.4} />
      <Wire id="p-cld" d="M680 436 C680 462 780 460 800 486" c={GRN} dur={2.4} delay={0.3} />
      {/* providers → execution */}
      <Wire id="p-mdl" d="M320 700 V644" c={V} dur={1.8} n={2} />
      <Wire id="p-mcp" d="M820 700 V644" c={GRN} dur={1.8} n={2} />
      <Wire id="p-mdl-c" d="M450 700 C450 676 650 664 680 644" c={V} dur={2.6} />

      {/* ============ SME PROFILE RAIL (right) ============ */}
      <Wire id="p-rail" d="M1058 150 V900" c={AMB} dur={4.4} n={3} />
      <Wire id="p-sme1" d="M820 300 H1058" c={AMB} dur={1.8} />
      <Wire id="p-sme2" d="M820 344 H1058" c={AMB} dur={1.8} delay={0.5} />
      <Wire id="p-sme3" d="M1058 560 H1020" c={AMB} dur={1.4} delay={0.3} />
      {[300, 344, 560].map((cy) => (
        <g key={cy}>
          <circle cx={1058} cy={cy} r="8" fill="rgba(217,119,6,0.16)" stroke={AMB} strokeWidth="1.4" />
          <circle cx={1058} cy={cy} r="2.6" fill={AMB} />
        </g>
      ))}
      <text x={1096} y={525} textAnchor="middle" transform="rotate(90 1096 525)" className="itg-rail-lbl" style={{ fill: AMB }}>SME PROFILES · AI BACKEND · AUTO ACTION LOOP</text>
      <text x={1058} y={138} textAnchor="middle" className="itg-mini" style={{ fill: AMB }}>you</text>
      <text x={1058} y={920} textAnchor="middle" className="itg-mini" style={{ fill: AMB }}>SME network</text>
      <text x={938} y={292} textAnchor="middle" className="itg-mini" style={{ fill: AMB }}>mission briefing</text>
      <text x={938} y={336} textAnchor="middle" className="itg-mini" style={{ fill: AMB }}>meeting request</text>
      <text x={1040} y={548} textAnchor="end" className="itg-mini" style={{ fill: AMB }}>auto action loop</text>

      {/* ============ BAND 1 — CLIENTS ============ */}
      <text x={44} y={78} className="itg-lbl">01 · MANAGE FROM ANY CLIENT</text>
      {/* mobile */}
      <Card x={150} y={96} w={300} h={104} c="rgba(56,189,248,0.4)" />
      <rect x={181} y={130} width={15} height={32} rx={3.4} fill="rgba(56,189,248,0.14)" stroke={SKY} strokeWidth="1.5" />
      <line x1={185} y1={134} x2={192} y2={134} stroke={SKY} strokeWidth="1.4" strokeLinecap="round" />
      <circle cx={188.5} cy={157} r="1.6" fill={SKY} />
      <text x={222} y={132} className="itg-t1">Mobile Client</text>
      <text x={222} y={150} className="itg-t2">manage cloud + local</text>
      <Pill x={214} y={168} w={170} label="◱ iOS · Android" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.32)" />
      {/* desktop */}
      <Card x={670} y={96} w={300} h={104} c="rgba(167,139,250,0.4)" />
      <rect x={700} y={128} width={30} height={22} rx={2.5} fill="rgba(124,58,237,0.16)" stroke={V} strokeWidth="1.5" />
      <line x1={715} y1={150} x2={715} y2={158} stroke={V} strokeWidth="1.5" />
      <line x1={707} y1={159} x2={723} y2={159} stroke={V} strokeWidth="1.5" strokeLinecap="round" />
      <text x={746} y={130} className="itg-t1">Voltron Castle</text>
      <text x={746} y={148} className="itg-t2">Local Desktop App</text>
      <Pill x={746} y={166} w={112} label="Local model" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.32)" />
      <Pill x={866} y={166} w={98} label="Hybrid" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.32)" />

      {/* ============ BAND 2 — YOUR ACTIONBOARD (hub) ============ */}
      <Card x={300} y={250} w={520} h={186} c="rgba(167,139,250,0.55)" rx={20} />
      <circle cx={330} cy={286} r="5" fill={V} className="itg-pulse" />
      <text x={346} y={291} className="itg-hd">Your ActionBoard</text>
      <text x={790} y={286} textAnchor="end" className="itg-mini" style={{ fill: V }}>control plane</text>
      <text x={330} y={314} className="itg-t2">your personal AIOps board</text>
      <line x1={326} y1={328} x2={794} y2={328} stroke="rgba(255,255,255,0.1)" strokeWidth="1" />
      <Pill x={330} y={344} w={176} label="⟲ Auto action loop" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.34)" />
      <Pill x={516} y={344} w={126} label="▤ Vision board" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />
      <Pill x={652} y={344} w={148} label="⧉ Model + MCP" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.3)" />
      <text x={330} y={398} className="itg-t2" style={{ fontSize: "12px" }}>One board — run it local, cloud, or hybrid. You decide per action.</text>

      {/* ============ BAND 3 — HYBRID EXECUTION ============ */}
      <text x={44} y={470} className="itg-lbl">02 · HYBRID EXECUTION</text>
      <text x={560} y={470} textAnchor="middle" className="itg-mini" style={{ fill: V }}>hybrid mode splits work across local + cloud</text>
      {/* local runtime */}
      <Card x={150} y={486} w={340} h={158} c="rgba(167,139,250,0.4)" />
      <rect x={178} y={508} width={26} height={26} rx={5} fill="rgba(124,58,237,0.14)" stroke={V} strokeWidth="1.5" />
      <rect x={186} y={516} width={10} height={10} rx={2} fill="none" stroke={V} strokeWidth="1.3" />
      <text x={222} y={516} className="itg-t1">Local Runtime</text>
      <text x={222} y={534} className="itg-t2">on your desktop</text>
      <Pill x={172} y={556} w={120} label="Local model" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.32)" />
      <Pill x={300} y={556} w={150} label="Offline-capable" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />
      <Pill x={172} y={592} w={126} label="Hybrid split" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.3)" />
      {/* cloud pod */}
      <Card x={630} y={486} w={390} h={158} c="rgba(52,211,153,0.45)" fill="rgba(12,20,17,0.82)" />
      <circle cx={656} cy={516} r="5" fill={GRN} className="itg-pulse" />
      <text x={672} y={521} className="itg-hd" style={{ fontSize: "15px" }}>ActionBoard.ai Cloud AI Pod</text>
      <text x={654} y={543} className="itg-t2">always-on managed pod</text>
      <Pill x={654} y={560} w={112} label="150+ tools" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.32)" />
      <Pill x={776} y={560} w={138} label="Voltron agents" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.32)" />
      <Pill x={654} y={596} w={104} label="Always-on" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />
      <text x={992} y={528} style={{ fontSize: "22px" }}>🦁</text>

      {/* ============ BAND 4 — PROVIDERS (community-hosted) ============ */}
      <text x={44} y={684} className="itg-lbl">03 · CONNECT ANYTHING — HOSTED FOR YOU</text>
      {/* multiple models */}
      <Card x={150} y={700} w={340} h={150} c="rgba(167,139,250,0.4)" />
      <path d="M188 726 l14 -7 l14 7 l-14 7 z" fill="rgba(124,58,237,0.16)" stroke={V} strokeWidth="1.4" strokeLinejoin="round" />
      <path d="M174 734 l28 14 l14 -7" fill="none" stroke={V} strokeWidth="1.2" strokeOpacity="0.5" strokeLinejoin="round" />
      <text x={228} y={726} className="itg-t1">Multiple Models</text>
      <text x={228} y={744} className="itg-t2">bring or switch any model</text>
      <Pill x={172} y={764} w={86} label="Claude" c={V} bg="rgba(124,58,237,0.14)" bc="rgba(167,139,250,0.32)" />
      <Pill x={266} y={764} w={84} label="GPT-4o" c="#C9B8EC" />
      <Pill x={358} y={764} w={120} label="Llama · local" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.3)" />
      <Pill x={172} y={800} w={84} label="Mistral" c="#C9B8EC" />
      <Pill x={264} y={800} w={84} label="Gemini" c="#C9B8EC" />
      <Pill x={356} y={800} w={122} label="swap anytime" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />
      {/* community mcp gateway */}
      <Card x={630} y={700} w={390} h={150} c="rgba(167,139,250,0.4)" />
      <circle cx={668} cy={738} r="6" fill="none" stroke={V} strokeWidth="1.5" />
      <g stroke={V} strokeWidth="1.4" strokeLinecap="round">
        <line x1={668} y1={732} x2={668} y2={724} />
        <line x1={668} y1={744} x2={668} y2={752} />
        <line x1={662} y1={738} x2={654} y2={738} />
        <line x1={674} y1={738} x2={682} y2={738} />
      </g>
      <text x={704} y={730} className="itg-t1">Community MCP Gateway</text>
      <text x={704} y={748} className="itg-t2">multiple providers, hosted for you</text>
      <Pill x={654} y={766} w={84} label="GitHub" c="#C9B8EC" />
      <Pill x={746} y={766} w={70} label="Slack" c="#C9B8EC" />
      <Pill x={824} y={766} w={82} label="Notion" c="#C9B8EC" />
      <Pill x={914} y={766} w={64} label="+150" c={SKY} bg="rgba(56,189,248,0.1)" bc="rgba(56,189,248,0.3)" />
      <Pill x={654} y={802} w={222} label="✓ You host zero endpoints" c={GRN} bg="rgba(52,211,153,0.1)" bc="rgba(52,211,153,0.32)" />
    </svg>
  </div>
);

Object.assign(window, { IntegrationDiagram, PersonalDiagram });