// plant-equipment.jsx — Composed equipment groups for the plant scene.
// Each function takes `{ styleFor }` and returns the SVG fragment for one
// equipment "block", tagged with the appropriate discipline data so the
// glow/dim filter can apply correctly.

// ── Equipment-level helpers (composed from primitives) ─────────────────────

// Agitator tank: vertical cylinder + top bridge + drive head + motor.
// Used for leach tanks and CIL tanks.
function AgitatorTank({ x, y, z = 6, r = 30, h = 80, motorYellow = true, sideLadder = true, glowEdge }) {
  return (
    <>
      <IsoVCylinder x={x} y={y} z={z} r={r} h={h}
                    top="#262d36" shell="#171c23" edge={glowEdge || "#7a8593"} capRing={false} />
      {/* Top bridge / catwalk diametrically across */}
      <IsoBox x={x - r} y={y - 3} z={z + h} w={r * 2} d={6} h={3}
              top="#1f2630" right="#13181f" front="#0a0d12" edge="#5a6473" edgeWidth={0.5} />
      {/* Drive head reducer */}
      <IsoBox x={x - 5} y={y - 4} z={z + h + 3} w={10} d={8} h={8}
              top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" edgeWidth={0.5} />
      {/* Motor on top of reducer */}
      <IsoBox x={x - 3} y={y - 3} z={z + h + 11} w={6} d={5} h={5}
              top="#2a313b" right="#1a1f28" front="#10141a"
              edge={motorYellow ? SHADE.yellow : "#7a8593"} edgeWidth={0.4} />
      {/* Centre stub (impeller shaft going down into tank) */}
      {(() => {
        const a = iso(x, y, z + h);
        const b = iso(x, y, z + h * 0.4);
        return <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.5" />;
      })()}
      {sideLadder && (() => {
        const rungs = [];
        const rungCount = Math.max(4, Math.floor(h / 12));
        for (let i = 0; i <= rungCount; i++) {
          const zz = z + (h * i) / rungCount;
          const a = iso(x, y - r * 0.5, zz);
          const b = iso(x + 2, y - r * 0.5, zz);
          rungs.push(<line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.5" />);
        }
        const sa = iso(x, y - r * 0.5, z), sb = iso(x, y - r * 0.5, z + h);
        const sc = iso(x + 2, y - r * 0.5, z), sd = iso(x + 2, y - r * 0.5, z + h);
        return (
          <>
            <line x1={sa.X} y1={sa.Y} x2={sb.X} y2={sb.Y} stroke="#3a4250" strokeWidth="0.5" />
            <line x1={sc.X} y1={sc.Y} x2={sd.X} y2={sd.Y} stroke="#3a4250" strokeWidth="0.5" />
            {rungs}
          </>
        );
      })()}
    </>
  );
}

// Lime silo: tall vertical cylinder + bottom discharge cone + top roof cone + fill pipe.
function LimeSilo({ x, y, h = 170, r = 22 }) {
  return (
    <>
      {/* Foundation ring */}
      <IsoVCylinder x={x} y={y} z={0} r={r + 4} h={6} shell="#1a1f28" top="#2a313b" edge="#5a6473" capRing={false} />
      {/* Discharge cone (apex down) */}
      <IsoCone x={x} y={y} z={6} r={r - 2} h={20} inverted light="#1c2128" dark="#0e131a" edge="#7a8593" />
      {/* Body */}
      <IsoVCylinder x={x} y={y} z={26} r={r} h={h - 50} shell="#171c23" top="#262d36" edge="#7a8593" capRing={false} />
      {/* Roof cone */}
      <IsoCone x={x} y={y} z={h - 24} r={r} h={28} light="#262d36" dark="#171c23" edge="#7a8593" />
      {/* Fill pipe stack */}
      <IsoVCylinder x={x} y={y} z={h + 4} r={3} h={18} shell="#3a4250" top="#5a6473" edge="#5a6473" capRing={false} />
      {/* Side ladder with cage hint */}
      {(() => {
        const rungs = [];
        const rungCount = Math.floor((h - 30) / 14);
        for (let i = 0; i < rungCount; i++) {
          const zz = 28 + i * 14;
          const a = iso(x + r * 0.3, y - r * 0.5, zz);
          const b = iso(x + r * 0.3 + 3, y - r * 0.5, zz);
          rungs.push(<line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.5" />);
        }
        const sa = iso(x + r * 0.3, y - r * 0.5, 28), sb = iso(x + r * 0.3, y - r * 0.5, h - 24);
        return (
          <>
            <line x1={sa.X} y1={sa.Y} x2={sb.X} y2={sb.Y} stroke="#3a4250" strokeWidth="0.6" />
            {rungs}
          </>
        );
      })()}
      {(() => { const lp = iso(x, y - r - 12, h + 30); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8" fontFamily="'Source Sans 3'" fill="#7a8593">LIME SILO</text>
      );})()}
    </>
  );
}

// Bulk storage silo (smaller, no top cone — flat top with manhole).
function ProcessSilo({ x, y, h = 90, r = 18, label }) {
  return (
    <>
      <IsoVCylinder x={x} y={y} z={0} r={r + 3} h={6} shell="#1a1f28" top="#2a313b" edge="#5a6473" capRing={false} />
      <IsoCone x={x} y={y} z={6} r={r - 1} h={16} inverted light="#1c2128" dark="#0e131a" edge="#7a8593" />
      <IsoVCylinder x={x} y={y} z={22} r={r} h={h - 22} shell="#171c23" top="#262d36" edge="#7a8593" capRing={false} />
      {label && (() => { const lp = iso(x, y - r - 8, h + 14); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill="#7a8593">{label}</text>
      );})()}
    </>
  );
}

// Generic small building (closed box with door, windows, roof vent strip).
function Building({ x, y, w, d, h, label, color = "#252b34", glowEdge }) {
  return (
    <>
      {/* Concrete plinth */}
      <IsoBox x={x - 4} y={y - 4} z={0} w={w + 8} d={d + 8} h={5}
              top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.6} />
      {/* Building shell */}
      <IsoBox x={x} y={y} z={5} w={w} d={d} h={h}
              top={color} right="#1a1f28" front="#0d1218" edge={glowEdge || "#5a6473"} />
      {/* Roof vent ridge */}
      {(() => {
        const a = iso(x + 6, y + d / 2, 5 + h + 3), b = iso(x + w - 6, y + d / 2, 5 + h + 3);
        return <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="0.5" />;
      })()}
      {/* Door on front face (south side) */}
      <IsoBox x={x + 4} y={y + d - 1} z={5} w={10} d={1} h={20}
              top="#2a313b" right="#1a1f28" front="#0a0d12" edge={glowEdge || "#5a6473"} edgeWidth={0.4} />
      {/* Windows (small) */}
      {Array.from({ length: Math.max(2, Math.floor((w - 22) / 18)) }).map((_, i) => (
        <IsoBox key={i} x={x + 22 + i * 18} y={y + d - 1} z={5 + 20} w={10} d={1} h={6}
                top="#1a2028" right="#11161d" front="#0a0d12" edge="#3a4250" edgeWidth={0.4} />
      ))}
      {label && (() => { const lp = iso(x + w / 2, y + d + 6, 4); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">{label}</text>
      );})()}
    </>
  );
}

// Multi-pipe horizontal "spine" between two ends (varying colours per pipe).
function MultiPipeRun({ pts, colors = ['#7a8593', '#5a6473', '#3a4250'], baseWidth = 5, edge = "#5a6473" }) {
  return (
    <>
      {pts.slice(1).map((p, i) => {
        const a = pts[i], b = p;
        return colors.map((c, ci) => {
          const offset = (ci - (colors.length - 1) / 2) * 2.5;
          const aa = [a[0], a[1], a[2] + offset];
          const bb = [b[0], b[1], b[2] + offset];
          return <IsoPipe key={`${i}-${ci}`} a={aa} b={bb} color={c} width={baseWidth - 1} edge={edge} />;
        });
      })}
    </>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// EQUIPMENT — Comminution section
// ════════════════════════════════════════════════════════════════════════════

function Equip_ROM({ styleFor }) {
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        {/* Truck dump ramp + retaining walls */}
        <IsoBox x={-50} y={-30} z={0} w={140} d={120} h={6}
                top="#1f242c" right="#10141a" front="#0a0d12" edge="#3a4250" edgeWidth={0.6} />
        <IsoBox x={-50} y={-50} z={0} w={140} d={20} h={32}
                top="#1c2128" right="#11161d" front="#0a0d12" edge="#3a4250" edgeWidth={0.6} />
        {/* Side wall on left */}
        <IsoBox x={-72} y={-30} z={0} w={22} d={120} h={28}
                top="#1c2128" right="#11161d" front="#0a0d12" edge="#3a4250" edgeWidth={0.6} />
      </g>
      <g data-disc="bulk" style={styleFor('bulk')}>
        {/* Tipping bin */}
        <IsoBox x={10} y={-15} z={6} w={95} d={90} h={72} edge="#7a8593" edgeWidth={0.9} />
        {/* Grizzly bars */}
        {[12, 27, 42, 57, 72, 87].map((dx, i) => {
          const a = iso(10 + dx, -10, 78), b = iso(10 + dx, 70, 78);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="1" />;
        })}
        {/* Bin mouth shadow */}
        {(() => {
          const a = iso(15, -10, 78), b = iso(100, -10, 78), c = iso(100, 70, 78), d = iso(15, 70, 78);
          return <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${c.X},${c.Y} ${d.X},${d.Y}`}
                          fill="#04060a" stroke="#7a8593" strokeWidth="0.6" />;
        })()}
        {/* Apron feeder under bin */}
        <IsoBox x={70} y={0} z={0} w={70} d={60} h={12}
                top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" edgeWidth={0.7} />
        {(() => { const lp = iso(57, 30, 96); return (
          <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">ROM TIP</text>
        );})()}
      </g>
      {/* Haul truck silhouette on ramp (for scale) */}
      <g data-disc="bulk" style={styleFor('bulk')}>
        {(() => {
          const a = iso(-40, -40, 8), b = iso(-12, -40, 8);
          const c = iso(-12, -22, 8), d = iso(-40, -22, 8);
          const a2 = iso(-40, -40, 22), b2 = iso(-12, -40, 22);
          const c2 = iso(-12, -22, 22), d2 = iso(-40, -22, 22);
          return (
            <>
              <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${c.X},${c.Y} ${d.X},${d.Y}`} fill="#171c23" stroke="#3a4250" strokeWidth="0.5" />
              <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${b2.X},${b2.Y} ${a2.X},${a2.Y}`} fill="#1f2630" stroke="#3a4250" strokeWidth="0.5" />
              <polygon points={`${a2.X},${a2.Y} ${b2.X},${b2.Y} ${c2.X},${c2.Y} ${d2.X},${d2.Y}`} fill="#262d36" stroke="#3a4250" strokeWidth="0.5" />
              {/* Driver cab outline (raised box at front) */}
              <line x1={a2.X} y1={a2.Y - 8} x2={b2.X} y2={b2.Y - 8} stroke="#3a4250" strokeWidth="0.5" />
            </>
          );
        })()}
      </g>
      <g data-disc="electrical mechanical" style={styleFor('electrical')}>
        <IsoBox x={132} y={20} z={6} w={14} d={20} h={12}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.7} />
      </g>
    </>
  );
}

function Equip_CrusherHouse({ styleFor }) {
  const x0 = 175, y0 = -20, w = 130, d = 110;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={x0 - 6} y={y0 - 6} z={0} w={w + 12} d={d + 12} h={8}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
      </g>
      <g data-disc="bulk mechanical" style={styleFor('bulk')}>
        {(() => {
          // Crusher hopper visible inside the framed building
          const a = iso(x0 + 25, y0 + 10, 70), b = iso(x0 + 105, y0 + 10, 70);
          const c = iso(x0 + 105, y0 + 90, 70), d2 = iso(x0 + 25, y0 + 90, 70);
          const a2 = iso(x0 + 50, y0 + 35, 30), b2 = iso(x0 + 80, y0 + 35, 30);
          const c2 = iso(x0 + 80, y0 + 65, 30), d22 = iso(x0 + 50, y0 + 65, 30);
          return (
            <>
              <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${c.X},${c.Y} ${d2.X},${d2.Y}`}
                       fill="#0c1117" stroke="#7a8593" strokeWidth="0.9" />
              <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${b2.X},${b2.Y} ${a2.X},${a2.Y}`}
                       fill="#1f2630" stroke="#7a8593" strokeWidth="0.7" />
              <polygon points={`${b.X},${b.Y} ${c.X},${c.Y} ${c2.X},${c2.Y} ${b2.X},${b2.Y}`}
                       fill="#171c23" stroke="#7a8593" strokeWidth="0.7" />
              <polygon points={`${d2.X},${d2.Y} ${c.X},${c.Y} ${c2.X},${c2.Y} ${d22.X},${d22.Y}`}
                       fill="#0d1218" stroke="#7a8593" strokeWidth="0.7" />
            </>
          );
        })()}
        {/* Discharge belt under hopper */}
        <IsoBox x={x0 + 45} y={y0 + 95} z={8} w={75} d={20} h={6}
                top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" />
      </g>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoFrame x={x0} y={y0} z={8} w={w} d={d} h={130} edge="#5a6473" edgeWidth={1.1} intermediateBeams={1} />
        <IsoChevronRoof x={x0} y={y0} z={138} w={w} d={d} peakH={18}
                        top="#252b34" side="#171c23" edge="#5a6473" />
        {/* Side cladding strips */}
        {[20, 40, 60, 80].map((dz, i) => {
          const a = iso(x0 + w, y0, 8 + dz), b = iso(x0 + w, y0 + d, 8 + dz);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#2a313b" strokeWidth="0.4" />;
        })}
        {(() => { const lp = iso(x0 + w / 2, y0 + d + 12, 4); return (
          <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8" fontFamily="'Source Sans 3'" fill="#5a6473" letterSpacing="0.06em">PRIMARY CRUSHER</text>
        );})()}
      </g>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoStair x1={x0 - 30} x2={x0} z1={8} z2={70} y={y0 + d - 16} w={14} />
      </g>
    </>
  );
}

function Equip_Screen({ styleFor }) {
  return (
    <g data-disc="bulk mechanical" style={styleFor('bulk')}>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={325} y={130} z={0} w={70} d={42} h={14}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
      </g>
      <IsoBox x={328} y={134} z={28} w={64} d={34} h={22}
              top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" />
      {[34, 40, 46].map((dz, i) => {
        const a = iso(328, 134, 28 + dz), b = iso(392, 134, 28 + dz);
        return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke={SHADE.steelDim} strokeWidth="0.5" opacity="0.4" />;
      })}
      {[ [330, 138], [388, 138], [330, 164], [388, 164] ].map(([x, y], i) => {
        const a = iso(x, y, 14), b = iso(x, y, 28);
        return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="1" />;
      })}
      <g data-disc="electrical" style={styleFor('electrical')}>
        <IsoBox x={355} y={130} z={52} w={12} d={10} h={8}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.6} />
      </g>
    </g>
  );
}

function Equip_Conv1({ styleFor }) {
  return (
    <g data-disc="bulk" style={styleFor('bulk')}>
      <IsoConveyor x1={300} x2={600} z1={70} z2={230} y={30} w={26} covered />
      <IsoBox x={595} y={20} z={220} w={36} d={44} h={36}
              top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" />
      {(() => {
        const a = iso(615, 32, 220), b = iso(632, 42, 240);
        const c = iso(632, 56, 240), d = iso(615, 46, 220);
        return <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${c.X},${c.Y} ${d.X},${d.Y}`}
                        fill="#171c23" stroke="#7a8593" strokeWidth="0.6" />;
      })()}
    </g>
  );
}

function Equip_Stockpile({ styleFor }) {
  return (
    <>
      <g data-disc="bulk" style={styleFor('bulk')}>
        <IsoCone x={680} y={80} z={0} r={130} h={160}
                 light="#1c2128" dark="#10141a" edge="#7a8593" />
        {[110, 80, 50].map((rr, i) => {
          const cc = iso(680, 80, (160 / 130) * (130 - rr));
          const rx = rr * COS30, ry = rr * SIN30;
          return (
            <ellipse key={i} cx={cc.X} cy={cc.Y} rx={rx} ry={ry} fill="none"
                     stroke={SHADE.steelDim} strokeWidth="0.4" opacity="0.4" />
          );
        })}
      </g>
      <g data-disc="civils bulk" style={styleFor('civils')}>
        <IsoBox x={620} y={50} z={0} w={120} d={60} h={6}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
      </g>
      <g data-disc="bulk" style={styleFor('bulk')}>
        {[640, 680, 720].map((rx, i) => (
          <IsoBox key={i} x={rx} y={50} z={6} w={24} d={14} h={10}
                  top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" edgeWidth={0.6} />
        ))}
      </g>
      {/* Stacker conveyor discharge — material falls from the conveyor head
         straight down onto the cone, no swivelling boom. */}
      <g data-disc="bulk" style={styleFor('bulk')}>
        {(() => {
          const a = iso(680, 80, 240), b = iso(680, 80, 175);
          return <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#c97a4f" strokeWidth="2.4" strokeDasharray="4 6">
            <animate attributeName="stroke-dashoffset" from="0" to="-20" dur="1.4s" repeatCount="indefinite" />
          </line>;
        })()}
      </g>
    </>
  );
}

function Equip_Conv2({ styleFor }) {
  return (
    <g data-disc="bulk" style={styleFor('bulk')}>
      <IsoConveyor x1={745} x2={905} z1={20} z2={110} y={60} w={22} covered />
    </g>
  );
}

function Equip_MillHouse({ styleFor }) {
  const x0 = 880, y0 = -70, w = 290, d = 240, h = 200;
  return (
    <g data-disc="civils" style={styleFor('civils')}>
      <IsoBox x={x0 - 8} y={y0 - 8} z={0} w={w + 16} d={d + 16} h={10}
              top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
      <IsoFrame x={x0} y={y0} z={10} w={w} d={d} h={h} intermediateBeams={2} bracing edge="#5a6473" edgeWidth={1.2} />
      {[x0 + w * 0.33, x0 + w * 0.66].map((cx, i) => (
        <React.Fragment key={i}>
          {[y0, y0 + d].map((cy, j) => {
            const a = iso(cx, cy, 10), b = iso(cx, cy, 10 + h);
            return <line key={j} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="0.9" />;
          })}
        </React.Fragment>
      ))}
      {(() => {
        const a = iso(x0, y0 + 30, 10 + h - 20);
        const b = iso(x0 + w, y0 + 30, 10 + h - 20);
        const c = iso(x0, y0 + d - 30, 10 + h - 20);
        const d2 = iso(x0 + w, y0 + d - 30, 10 + h - 20);
        return (
          <>
            <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="0.7" />
            <line x1={c.X} y1={c.Y} x2={d2.X} y2={d2.Y} stroke="#5a6473" strokeWidth="0.7" />
          </>
        );
      })()}
      <IsoBox x={x0 + w * 0.5} y={y0 + 30} z={10 + h - 20} w={20} d={d - 60} h={8}
              top="#3a4250" right="#1f2630" front="#13181f" edge="#7a8593" edgeWidth={0.6} />
      <IsoChevronRoof x={x0} y={y0} z={10 + h} w={w} d={d} peakH={28}
                      top="#252b34" side="#171c23" edge="#5a6473" />
      {[0.25, 0.5, 0.75].map((t, i) => {
        const a = iso(x0 + w * t, y0, 10 + h);
        const b = iso(x0 + w * t, y0 + d / 2, 10 + h + 28);
        const c = iso(x0 + w * t, y0 + d, 10 + h);
        return (
          <React.Fragment key={i}>
            <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.4" />
            <line x1={b.X} y1={b.Y} x2={c.X} y2={c.Y} stroke="#3a4250" strokeWidth="0.4" />
          </React.Fragment>
        );
      })}
      {(() => { const lp = iso(x0 + w / 2, y0 + d + 14, 4); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#5a6473" letterSpacing="0.06em">MILL HOUSE</text>
      );})()}
    </g>
  );
}

function Equip_SAGMill({ styleFor }) {
  const xStart = 925, y = -15, z = 70;
  const length = 130, r = 48;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={xStart - 6} y={y - 4} z={10} w={20} d={r * 2 + 8} h={60}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
        <IsoBox x={xStart + length - 14} y={y - 4} z={10} w={20} d={r * 2 + 8} h={60}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoHCylinder x={xStart} y={y} z={z} length={length} r={r}
                      top="#262d36" shell="#171c23" end="#0c1117" edge="#7a8593" />
        {(() => {
          const cc = iso(xStart + length - 18, y, z + r);
          return (
            <g transform={`translate(${cc.X}, ${cc.Y}) rotate(-30)`}>
              <ellipse cx="0" cy="0" rx={r * COS30 + 2} ry={r + 2} fill="none" stroke="#7a8593" strokeWidth="1.2" />
              <ellipse cx="0" cy="0" rx={r * COS30} ry={r} fill="none" stroke="#5a6473" strokeWidth="0.6" />
            </g>
          );
        })()}
        {(() => {
          const a = iso(xStart - 14, y + 8, z + r + 12), b = iso(xStart + 4, y + 8, z + r + 4);
          const c = iso(xStart + 4, y + r * 2 - 8, z + r + 4), d = iso(xStart - 14, y + r * 2 - 8, z + r + 12);
          return <polygon points={`${a.X},${a.Y} ${b.X},${b.Y} ${c.X},${c.Y} ${d.X},${d.Y}`}
                          fill="#1c2128" stroke="#7a8593" strokeWidth="0.7" />;
        })()}
        <IsoBox x={xStart + length} y={y + r - 6} z={z + r - 14} w={16} d={12} h={20}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" edgeWidth={0.7} />
        <IsoBox x={xStart + length + 16} y={y + r - 10} z={z + r - 18} w={26} d={20} h={28}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" />
      </g>
      <g data-disc="electrical mechanical" style={styleFor('electrical')}>
        <IsoHCylinder x={xStart + length + 42} y={y + r - 8} z={z + r - 14} length={28} r={10}
                      top="#2a313b" shell="#1a1f28" end="#10141a" edge={SHADE.yellow} edgeWidth={0.8} ring={false} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoBox x={xStart + 30} y={y - 28} z={10} w={28} d={18} h={16}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" edgeWidth={0.6} />
        <IsoBox x={xStart + length - 24} y={y + r * 2 + 4} z={10} w={36} d={24} h={20}
                top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" />
      </g>
      {(() => { const lp = iso(xStart + length / 2, y + r * 2 + 4, z - 14); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#7a8593">SAG MILL</text>
      );})()}
    </>
  );
}

function Equip_BallMill({ styleFor }) {
  const xStart = 925, y = 110, z = 70;
  const length = 150, r = 40;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={xStart - 6} y={y - 4} z={10} w={20} d={r * 2 + 8} h={60}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
        <IsoBox x={xStart + length - 14} y={y - 4} z={10} w={20} d={r * 2 + 8} h={60}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoHCylinder x={xStart} y={y} z={z} length={length} r={r}
                      top="#262d36" shell="#171c23" end="#0c1117" edge="#7a8593" />
        {(() => {
          const cc = iso(xStart + length - 18, y, z + r);
          return (
            <g transform={`translate(${cc.X}, ${cc.Y}) rotate(-30)`}>
              <ellipse cx="0" cy="0" rx={r * COS30 + 2} ry={r + 2} fill="none" stroke="#7a8593" strokeWidth="1.2" />
            </g>
          );
        })()}
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoBox x={xStart + length} y={y + r - 6} z={z + r - 12} w={14} d={12} h={18}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" edgeWidth={0.7} />
        <IsoBox x={xStart + length + 14} y={y + r - 10} z={z + r - 16} w={22} d={20} h={24}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" />
      </g>
      <g data-disc="electrical mechanical" style={styleFor('electrical')}>
        <IsoHCylinder x={xStart + length + 36} y={y + r - 8} z={z + r - 12} length={24} r={9}
                      top="#2a313b" shell="#1a1f28" end="#10141a" edge={SHADE.yellow} edgeWidth={0.8} ring={false} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoBox x={xStart + 30} y={y + r * 2 + 6} z={10} w={28} d={18} h={16}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" edgeWidth={0.6} />
      </g>
      {(() => { const lp = iso(xStart + length / 2, y - 8, z - 14); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#7a8593">BALL MILL</text>
      );})()}
    </>
  );
}

// Pebble crusher (small vertical cone-shaped unit beside SAG mill)
function Equip_PebbleCrusher({ styleFor }) {
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={1075} y={30} z={10} w={50} d={50} h={8}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.6} />
      </g>
      <g data-disc="bulk mechanical" style={styleFor('bulk')}>
        {/* Cone crusher body */}
        <IsoVCylinder x={1100} y={55} z={18} r={20} h={36}
                      top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
        {/* Bottom feed inlet hopper (small inverted cone on top) */}
        <IsoCone x={1100} y={55} z={54} r={18} h={22} light="#262d36" dark="#171c23" edge="#7a8593" />
        {/* Discharge spout */}
        {(() => {
          const a = iso(1100, 55, 18), b = iso(1108, 70, 6);
          return <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="2.5" strokeLinecap="round" />;
        })()}
      </g>
      <g data-disc="electrical mechanical" style={styleFor('electrical')}>
        <IsoBox x={1093} y={47} z={76} w={14} d={10} h={8}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.6} />
      </g>
      {(() => { const lp = iso(1100, 90, 90); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill="#7a8593">PEBBLE CRUSHER</text>
      );})()}
    </>
  );
}

function Equip_MillPump({ styleFor }) {
  return (
    <>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoBox x={1070} y={170} z={10} w={36} d={26} h={22}
                top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" />
        <IsoVCylinder x={1112} y={184} z={10} r={10} h={20}
                      shell="#1a1f28" top="#2a3140" edge="#7a8593" capRing={false} />
        <g data-disc="electrical" style={styleFor('electrical')}>
          <IsoHCylinder x={1115} y={178} z={30} length={22} r={7}
                        top="#2a313b" shell="#1a1f28" end="#10141a" edge={SHADE.yellow} edgeWidth={0.6} ring={false} />
        </g>
      </g>
    </>
  );
}

function Equip_CycloneTower({ styleFor }) {
  const tx = 1210, ty = 60;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        {/* Simple 4-column tower under the cyclone cluster (was full lattice — too many elements) */}
        {[[tx - 22, ty - 22], [tx + 22, ty - 22], [tx + 22, ty + 22], [tx - 22, ty + 22]].map(([cx, cy], i) => {
          const a = iso(cx, cy, 0), b = iso(cx, cy, 140);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="1" />;
        })}
        {/* Ring ties at three levels */}
        {[40, 80, 120].map((zz, i) => {
          const ring = [[tx - 22, ty - 22], [tx + 22, ty - 22], [tx + 22, ty + 22], [tx - 22, ty + 22]].map(([cx, cy]) => iso(cx, cy, zz));
          return <polyline key={i} points={ring.map((p) => `${p.X},${p.Y}`).join(' ') + ` ${ring[0].X},${ring[0].Y}`} fill="none" stroke="#3a4250" strokeWidth="0.5" />;
        })}
        <IsoBox x={tx - 22} y={ty - 22} z={138} w={44} d={44} h={6}
                top="#1f2630" right="#13181f" front="#0a0d12" edge="#5a6473" edgeWidth={0.6} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoBox x={tx - 20} y={ty - 20} z={144} w={40} d={40} h={14}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" />
        {[
          [tx - 14, ty - 14], [tx, ty - 14], [tx + 14, ty - 14],
          [tx - 14, ty + 8],  [tx, ty + 8],  [tx + 14, ty + 8],
        ].map(([cx, cy], i) => (
          <IsoCone key={i} x={cx} y={cy} z={108} r={8} h={36} inverted
                   light="#1c2128" dark="#0e131a" edge="#7a8593" edgeWidth={0.6} />
        ))}
        {/* Feed pipe up from mill pump */}
        <IsoPipeRun pts={[
          [1118, 184, 50], [1118, 184, 130],
          [tx, ty - 20, 130], [tx, ty - 20, 144],
        ]} color="#3a4250" width={5} />
        {/* Overflow header going to pre-leach thickener feed */}
        <IsoPipeRun pts={[
          [tx + 14, ty - 20, 142],
          [tx + 50, ty - 20, 142],
          [tx + 50, ty + 12, 142],
          [1380, ty + 12, 142],
          [1380, ty + 12, 60],
        ]} color="#3a4250" width={4.5} />
        {/* Underflow return — to ball mill feed */}
        <IsoPipeRun pts={[
          [tx, ty + 4, 108],
          [tx - 80, ty + 4, 80],
          [tx - 80, 110, 80],
          [1080, 110, 80],
        ]} color="#3a4250" width={4} />
      </g>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoStair x1={tx - 36} x2={tx - 14} z1={0} z2={70} y={ty + 24} w={14} />
        <IsoStair x1={tx - 36} x2={tx - 14} z1={70} z2={140} y={ty + 24} w={14} />
      </g>
      {(() => { const lp = iso(tx, ty - 36, 168); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="9" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">CYCLONES</text>
      );})()}
    </>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// EQUIPMENT — Hydrometallurgy: pre-leach thickener, leach + CIL tanks
// ════════════════════════════════════════════════════════════════════════════

function Equip_PreLeachThickener({ styleFor }) {
  const tx = 1410, ty = 100;
  const r = 95;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoVCylinder x={tx} y={ty} z={0} r={r + 5} h={5}
                      top="#2a313b" shell="#1a1f28" edge="#5a6473" capRing={false} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        {/* Main tank shell */}
        <IsoVCylinder x={tx} y={ty} z={5} r={r} h={32}
                      top="#1f2630" shell="#141a22" edge="#7a8593" capRing={false} />
        {/* Liquid surface */}
        {(() => {
          const ct = iso(tx, ty, 37);
          const rx = r * COS30, ry = r * SIN30;
          return <ellipse cx={ct.X} cy={ct.Y} rx={rx - 4} ry={ry - 2} fill="#0e131a" stroke="#3a4250" strokeWidth="0.5" />;
        })()}
        {/* Bridge truss (simpler than tailings thickener) */}
        {(() => {
          const segs = 5;
          const yA = ty - 8;
          const xs = Array.from({ length: segs + 1 }, (_, i) => tx - r + (2 * r * i) / segs);
          const lines = [];
          for (let i = 0; i < segs; i++) {
            const aT = iso(xs[i], yA, 50);
            const bT = iso(xs[i + 1], yA, 50);
            const aB = iso(xs[i], yA, 42);
            const bB = iso(xs[i + 1], yA, 42);
            lines.push(<line key={`tT${i}`} x1={aT.X} y1={aT.Y} x2={bT.X} y2={bT.Y} stroke="#5a6473" strokeWidth="0.7" />);
            lines.push(<line key={`tB${i}`} x1={aB.X} y1={aB.Y} x2={bB.X} y2={bB.Y} stroke="#5a6473" strokeWidth="0.7" />);
            lines.push(<line key={`td${i}`} x1={aT.X} y1={aT.Y} x2={bB.X} y2={bB.Y} stroke={SHADE.steelDim} strokeWidth="0.4" />);
          }
          return lines;
        })()}
        {/* Drive head + motor at centre */}
        <IsoBox x={tx - 10} y={ty - 10} z={50} w={20} d={20} h={20}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" />
        <g data-disc="electrical mechanical" style={styleFor('electrical')}>
          <IsoBox x={tx - 6} y={ty - 6} z={70} w={12} d={10} h={8}
                  top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.5} />
        </g>
        {/* Feed well */}
        <IsoVCylinder x={tx} y={ty} z={33} r={18} h={10}
                      top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
        {/* Underflow piping (overflow goes to leach feed; underflow to recovery later) */}
        <IsoPipeRun pts={[ [tx + r, ty, 12], [tx + 60, ty, 12], [tx + 60, ty, 60] ]}
                    color="#3a4250" width={4.5} />
      </g>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoStair x1={tx - r - 28} x2={tx - r + 4} z1={5} z2={42} y={ty + 6} w={12} />
      </g>
      {(() => { const lp = iso(tx, ty - 30, 80); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">PRE-LEACH THICKENER</text>
      );})()}
    </>
  );
}

// Row of leach tanks (6) — large agitated tanks where cyanide dissolves gold
function Equip_LeachTanks({ styleFor }) {
  const tanks = [1560, 1640, 1720, 1800, 1880, 1960];
  const ty = 80;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={1540} y={ty - 40} z={0} w={450} d={80} h={5}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
      </g>
      {tanks.map((tx, i) => (
        <g key={i} data-disc="mechanical" style={styleFor('mechanical')}>
          <AgitatorTank x={tx} y={ty} z={5} r={32} h={86} />
          {/* Overflow weir to next tank */}
          {i < tanks.length - 1 && (() => {
            const a = iso(tx + 32, ty, 80), b = iso(tanks[i + 1] - 32, ty, 80);
            return <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#7a8593" strokeWidth="2" strokeLinecap="round" />;
          })()}
        </g>
      ))}
      {/* Common feed pipe along top (from pre-leach thickener overflow) */}
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoPipeRun pts={[ [1540, ty - 28, 100], [2000, ty - 28, 100] ]} color="#3a4250" width={5} />
        {/* Drops to each tank */}
        {tanks.map((tx, i) => {
          const a = iso(tx, ty - 28, 100), b = iso(tx, ty - 8, 92);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="3" />;
        })}
      </g>
      {/* Walkway around tanks */}
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoPlatform x={1538} y={ty + 36} z={70} w={460} d={18} thick={3}
                     top="#1f2630" side="#0d1218" edge="#5a6473" rH={10} rails={['front', 'back']} />
        <IsoStair x1={1518} x2={1538} z1={5} z2={70} y={ty + 42} w={14} />
      </g>
      {(() => { const lp = iso(1760, ty - 50, 122); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="9" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">LEACH TANKS</text>
      );})()}
    </>
  );
}

// CIL adsorption tanks (7 tanks, activated carbon adsorbs gold from pulp)
function Equip_CILTanks({ styleFor }) {
  const tanks = [2030, 2105, 2180, 2255];
  const ty = 80;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={2010} y={ty - 40} z={0} w={290} d={80} h={5}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
      </g>
      {tanks.map((tx, i) => (
        <g key={i} data-disc="mechanical" style={styleFor('mechanical')}>
          <AgitatorTank x={tx} y={ty} z={5} r={30} h={82} />
          {/* Inter-stage screens (smaller protrusion on side of tank) */}
          <IsoBox x={tx - 8} y={ty + 24} z={50} w={16} d={10} h={20}
                  top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" edgeWidth={0.5} />
          {i < tanks.length - 1 && (() => {
            const a = iso(tx + 30, ty, 76), b = iso(tanks[i + 1] - 30, ty, 76);
            return <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#7a8593" strokeWidth="2" strokeLinecap="round" />;
          })()}
        </g>
      ))}
      {/* Carbon transfer pipe (smaller diameter) running back along top to elution */}
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoPipeRun pts={[ [2030, ty - 26, 96], [2330, ty - 26, 96], [2330, ty - 26, 150] ]}
                    color="#5a4a35" width={3.5} edge="#7a8593" />
      </g>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoPlatform x={2008} y={ty + 36} z={68} w={300} d={18} thick={3}
                     top="#1f2630" side="#0d1218" edge="#5a6473" rH={10} rails={['front', 'back']} />
        <IsoStair x1={1988} x2={2008} z1={5} z2={68} y={ty + 42} w={14} />
      </g>
      {(() => { const lp = iso(2142, ty - 50, 116); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="9" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">CIL ADSORPTION</text>
      );})()}
    </>
  );
}

// Elution column — tall narrow vessel where gold is stripped from carbon.
function Equip_ElutionColumn({ styleFor }) {
  const ex = 2540, ey = 50;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={ex - 18} y={ey - 18} z={0} w={36} d={36} h={6}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
        {/* Simple steel-tubular support (4 corner posts + cross beams), not a full lattice */}
        {[[ex - 14, ey - 14], [ex + 14, ey - 14], [ex + 14, ey + 14], [ex - 14, ey + 14]].map(([cx, cy], i) => {
          const a = iso(cx, cy, 6), b = iso(cx, cy, 186);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="0.9" />;
        })}
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        {/* Column body — tall narrow cylinder */}
        <IsoVCylinder x={ex} y={ey} z={6} r={11} h={180}
                      top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
        {/* Top dome — half-sphere approximated as cone */}
        <IsoCone x={ex} y={ey} z={186} r={11} h={10} light="#262d36" dark="#171c23" edge="#7a8593" />
        {/* Bottom discharge cone */}
        <IsoCone x={ex} y={ey} z={-8} r={11} h={14} inverted light="#1c2128" dark="#0e131a" edge="#7a8593" />
        {/* Carbon inlet */}
        <IsoBox x={ex - 6} y={ey + 8} z={170} w={12} d={6} h={6}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" edgeWidth={0.5} />
        {/* Pregnant solution outlet */}
        <IsoPipeRun pts={[ [ex - 11, ey, 30], [ex - 30, ey, 30], [ex - 30, ey, 70] ]}
                    color="#3a4250" width={3.5} />
      </g>
      {/* Acid wash column (smaller, next to elution) */}
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoVCylinder x={ex + 20} y={ey} z={6} r={8} h={140}
                      top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
        <IsoCone x={ex + 20} y={ey} z={146} r={8} h={8} light="#262d36" dark="#171c23" edge="#7a8593" />
      </g>
      {/* Heat exchanger (small box at base) */}
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoHCylinder x={ex - 30} y={ey - 6} z={20} length={26} r={6}
                      top="#262d36" shell="#171c23" end="#0d1218" edge="#7a8593" edgeWidth={0.6} ring={false} />
      </g>
      {(() => { const lp = iso(ex, ey - 24, 210); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">ELUTION</text>
      );})()}
    </>
  );
}

// Electrowinning + gold room building
function Equip_GoldRoom({ styleFor }) {
  const gx = 2580, gy = 0;
  return (
    <>
      {/* Electrowinning house (open framed) */}
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={gx - 4} y={gy - 4} z={0} w={104} d={84} h={5}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
        <IsoBox x={gx} y={gy} z={5} w={96} d={76} h={80}
                top="#252b34" right="#1a1f28" front="#0d1218" edge="#5a6473" />
        <IsoChevronRoof x={gx} y={gy} z={85} w={96} d={76} peakH={14}
                        top="#262d36" side="#171c23" edge="#5a6473" />
        {/* Side cladding lines */}
        {[20, 40, 60].map((dz, i) => {
          const a = iso(gx + 96, gy, 5 + dz), b = iso(gx + 96, gy + 76, 5 + dz);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#2a313b" strokeWidth="0.4" />;
        })}
        {/* Door */}
        <IsoBox x={gx + 8} y={gy + 75} z={5} w={12} d={1} h={20}
                top="#2a313b" right="#1a1f28" front="#0a0d12" edge="#5a6473" edgeWidth={0.4} />
      </g>
      {/* Gold room (smaller secure building with no windows) */}
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={gx + 100} y={gy + 20} z={0} w={52} d={56} h={5}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
        <IsoBox x={gx + 104} y={gy + 24} z={5} w={44} d={48} h={50}
                top="#262d36" right="#171c23" front="#0d1218" edge={SHADE.yellow} edgeWidth={0.8} />
        <IsoChevronRoof x={gx + 104} y={gy + 24} z={55} w={44} d={48} peakH={10}
                        top="#2a313b" side="#171c23" edge="#5a6473" />
        {/* Secured door (single, no window) */}
        <IsoBox x={gx + 116} y={gy + 71} z={5} w={10} d={1} h={20}
                top="#3a4250" right="#1a1f28" front="#0a0d12" edge={SHADE.yellow} edgeWidth={0.5} />
        {(() => { const lp = iso(gx + 126, gy + 80, 4); return (
          <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill={SHADE.yellow} letterSpacing="0.08em">GOLD ROOM</text>
        );})()}
      </g>
      {(() => { const lp = iso(gx + 48, gy - 14, 4); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">ELECTROWINNING</text>
      );})()}
    </>
  );
}

// Tailings thickener (bigger than pre-leach; final solids removal before TSF)
function Equip_TailingsThickener({ styleFor }) {
  const tx = 2780, ty = 230;
  const r = 130;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoVCylinder x={tx} y={ty} z={0} r={r + 6} h={6}
                      top="#2a313b" shell="#1a1f28" edge="#5a6473" capRing={false} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <IsoVCylinder x={tx} y={ty} z={6} r={r} h={40}
                      top="#1f2630" shell="#141a22" edge="#7a8593" capRing={false} />
        {(() => {
          const ct = iso(tx, ty, 46);
          const rx = r * COS30, ry = r * SIN30;
          return (
            <>
              <ellipse cx={ct.X} cy={ct.Y} rx={rx - 6} ry={ry - 3} fill="#0e131a" stroke="#3a4250" strokeWidth="0.6" />
              <ellipse cx={ct.X} cy={ct.Y} rx={rx - 24} ry={ry - 10} fill="none" stroke="#3a4250" strokeWidth="0.4" opacity="0.6" />
            </>
          );
        })()}
        {/* Bridge truss */}
        {(() => {
          const segs = 6;
          const yA = ty - 10;
          const yB = ty + 10;
          const xs = Array.from({ length: segs + 1 }, (_, i) => tx - r + (2 * r * i) / segs);
          const lines = [];
          for (let i = 0; i < segs; i++) {
            const aT = iso(xs[i], yA, 60);   const bT = iso(xs[i + 1], yA, 60);
            const aB = iso(xs[i], yA, 50);   const bB = iso(xs[i + 1], yA, 50);
            lines.push(<line key={`tT${i}`} x1={aT.X} y1={aT.Y} x2={bT.X} y2={bT.Y} stroke="#5a6473" strokeWidth="0.8" />);
            lines.push(<line key={`tB${i}`} x1={aB.X} y1={aB.Y} x2={bB.X} y2={bB.Y} stroke="#5a6473" strokeWidth="0.8" />);
            lines.push(<line key={`tv${i}`} x1={aT.X} y1={aT.Y} x2={aB.X} y2={aB.Y} stroke={SHADE.steelDim} strokeWidth="0.5" />);
            lines.push(<line key={`td${i}`} x1={aT.X} y1={aT.Y} x2={bB.X} y2={bB.Y} stroke={SHADE.steelDim} strokeWidth="0.4" />);
          }
          for (let i = 0; i < segs; i++) {
            const aT = iso(xs[i], yB, 60);   const bT = iso(xs[i + 1], yB, 60);
            lines.push(<line key={`bkT${i}`} x1={aT.X} y1={aT.Y} x2={bT.X} y2={bT.Y} stroke="#5a6473" strokeWidth="0.8" opacity="0.7" />);
          }
          return lines;
        })()}
        <IsoBox x={tx - 12} y={ty - 12} z={60} w={24} d={24} h={24}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#7a8593" />
        <g data-disc="electrical mechanical" style={styleFor('electrical')}>
          <IsoBox x={tx - 8} y={ty - 8} z={84} w={16} d={12} h={10}
                  top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.6} />
        </g>
        <IsoVCylinder x={tx} y={ty} z={42} r={22} h={12}
                      top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
        {(() => {
          const c = iso(tx, ty, 46);
          const a = iso(tx - r + 6, ty, 46);
          const b = iso(tx + r - 6, ty, 46);
          return (
            <>
              <line x1={c.X} y1={c.Y} x2={a.X} y2={a.Y} stroke="#3a4250" strokeWidth="0.6" opacity="0.6" />
              <line x1={c.X} y1={c.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.6" opacity="0.6" />
            </>
          );
        })()}
        {/* Tailings underflow pipe going off to TSF */}
        <IsoPipeRun pts={[ [tx, ty, 6], [tx, ty + r + 20, 6], [tx + 200, ty + r + 20, 6] ]}
                    color="#3a4250" width={5} />
      </g>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoStair x1={tx - r - 36} x2={tx - r + 4} z1={6} z2={50} y={ty + 8} w={14} />
      </g>
      {(() => { const lp = iso(tx, ty - 40, 102); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="9.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.08em">TAILINGS THICKENER</text>
      );})()}
    </>
  );
}

// Carbon regen kiln (small horizontal rotary kiln near CIL)
function Equip_CarbonRegen({ styleFor }) {
  const cx = 2200, cy = 200;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={cx - 4} y={cy - 4} z={0} w={88} d={28} h={5}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.6} />
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        {/* Kiln drum (horizontal cylinder, slightly inclined) */}
        <IsoHCylinder x={cx} y={cy} z={20} length={80} r={9}
                      top="#262d36" shell="#171c23" end="#0d1218" edge="#7a8593" edgeWidth={0.7} ring={false} />
        {/* Trunnion supports */}
        {[cx + 16, cx + 64].map((sx, i) => (
          <IsoBox key={i} x={sx} y={cy + 5} z={5} w={6} d={10} h={16}
                  top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" edgeWidth={0.5} />
        ))}
      </g>
      <g data-disc="electrical mechanical" style={styleFor('electrical')}>
        <IsoBox x={cx + 76} y={cy + 6} z={22} w={14} d={8} h={10}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.5} />
      </g>
      {(() => { const lp = iso(cx + 40, cy + 22, 50); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill="#7a8593">CARBON REGEN</text>
      );})()}
    </>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// EQUIPMENT — Services & utilities
// ════════════════════════════════════════════════════════════════════════════

function Equip_LimeSilo({ styleFor }) {
  return (
    <g data-disc="bulk mechanical" style={styleFor('bulk')}>
      <LimeSilo x={870} y={250} h={180} r={22} />
    </g>
  );
}

function Equip_WaterTanks({ styleFor }) {
  // Cluster of three water tanks (process water + fire water + reclaim)
  return (
    <g data-disc="mechanical" style={styleFor('mechanical')}>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={1530} y={210} z={0} w={170} d={60} h={5}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.6} />
      </g>
      <IsoVCylinder x={1560} y={240} z={5} r={22} h={70}
                    top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
      <IsoVCylinder x={1620} y={240} z={5} r={22} h={70}
                    top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
      <IsoVCylinder x={1680} y={240} z={5} r={20} h={62}
                    top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
      {(() => { const lp = iso(1620, 282, 90); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="7.5" fontFamily="'Source Sans 3'" fill="#7a8593">WATER TANKS</text>
      );})()}
    </g>
  );
}

function Equip_ReagentStorage({ styleFor }) {
  return (
    <g data-disc="civils" style={styleFor('civils')}>
      <Building x={1960} y={250} w={120} d={70} h={36} label="REAGENTS" />
    </g>
  );
}

function Equip_AirCompressor({ styleFor }) {
  return (
    <g data-disc="civils" style={styleFor('civils')}>
      <Building x={1750} y={210} w={90} d={48} h={28} label="COMPRESSORS" />
    </g>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// EQUIPMENT — Substations, switchrooms, control room, support buildings
// ════════════════════════════════════════════════════════════════════════════

function Equip_Substation({ styleFor }) {
  const x0 = 580, y0 = 200, w = 240, d = 110;
  return (
    <>
      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={x0} y={y0} z={0} w={w} d={d} h={6}
                top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" edgeWidth={0.7} />
        {(() => {
          const posts = [];
          for (let xx = x0; xx <= x0 + w; xx += 20) {
            const a = iso(xx, y0, 6), b = iso(xx, y0, 22);
            const c = iso(xx, y0 + d, 6), d2 = iso(xx, y0 + d, 22);
            posts.push(<line key={`f1-${xx}`} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.5" />);
            posts.push(<line key={`f2-${xx}`} x1={c.X} y1={c.Y} x2={d2.X} y2={d2.Y} stroke="#3a4250" strokeWidth="0.5" />);
          }
          for (let yy = y0; yy <= y0 + d; yy += 20) {
            const a = iso(x0, yy, 6), b = iso(x0, yy, 22);
            const c = iso(x0 + w, yy, 6), d2 = iso(x0 + w, yy, 22);
            posts.push(<line key={`f3-${yy}`} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.5" />);
            posts.push(<line key={`f4-${yy}`} x1={c.X} y1={c.Y} x2={d2.X} y2={d2.Y} stroke="#3a4250" strokeWidth="0.5" />);
          }
          // Top rails
          [[[x0, y0], [x0 + w, y0]], [[x0, y0 + d], [x0 + w, y0 + d]], [[x0, y0], [x0, y0 + d]], [[x0 + w, y0], [x0 + w, y0 + d]]].forEach(([a, b], i) => {
            const pa = iso(a[0], a[1], 22), pb = iso(b[0], b[1], 22);
            posts.push(<line key={`rt${i}`} x1={pa.X} y1={pa.Y} x2={pb.X} y2={pb.Y} stroke="#3a4250" strokeWidth="0.5" />);
          });
          return posts;
        })()}
      </g>
      <g data-disc="electrical" style={styleFor('electrical')}>
        {/* HV gantry */}
        {(() => {
          const lines = [];
          [[x0 + 22, y0 + 22], [x0 + 22, y0 + 50]].forEach(([cx, cy], i) => {
            const a = iso(cx, cy, 6), b = iso(cx, cy, 90);
            lines.push(<line key={`g${i}`} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="1.2" />);
          });
          const t1 = iso(x0 + 22, y0 + 22, 90), t2 = iso(x0 + 22, y0 + 50, 90);
          lines.push(<line key="gt" x1={t1.X} y1={t1.Y} x2={t2.X} y2={t2.Y} stroke="#5a6473" strokeWidth="0.9" />);
          const la = iso(x0 + 22, y0 + 36, 90), lb = iso(x0 + 22, y0 + 36, 110);
          lines.push(<line key="larr" x1={la.X} y1={la.Y} x2={lb.X} y2={lb.Y} stroke={SHADE.yellow} strokeWidth="0.8" />);
          return lines;
        })()}
        {/* Transformer */}
        <IsoBox x={x0 + 70} y={y0 + 20} z={6} w={64} d={70} h={48}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={1} />
        {[ [x0 + 80, y0 + 30], [x0 + 100, y0 + 30], [x0 + 120, y0 + 30] ].map(([bx, by], i) => {
          const a = iso(bx, by, 54), b = iso(bx, by, 76);
          return (
            <g key={i}>
              <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#7a8593" strokeWidth="1.6" />
              <circle cx={b.X} cy={b.Y} r="2.2" fill="#3a4250" stroke="#7a8593" strokeWidth="0.6" />
            </g>
          );
        })}
        {[ [x0 + 80, y0 + 80], [x0 + 100, y0 + 80] ].map(([bx, by], i) => {
          const a = iso(bx, by, 50), b = iso(bx, by, 64);
          return (
            <g key={i}>
              <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#7a8593" strokeWidth="1.2" />
              <circle cx={b.X} cy={b.Y} r="1.6" fill="#3a4250" stroke="#7a8593" strokeWidth="0.5" />
            </g>
          );
        })}
        {[0, 1, 2, 3, 4].map((i) => {
          const px = x0 + 70 + 10 + i * 11;
          const a = iso(px, y0 + 88, 12), b = iso(px, y0 + 88, 48);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.5" />;
        })}
        <IsoHCylinder x={x0 + 76} y={y0 + 8} z={54} length={48} r={6}
                      top="#262d36" shell="#171c23" end="#0c1117" edge={SHADE.yellow} edgeWidth={0.6} ring={false} />
        <IsoBox x={x0 + 150} y={y0 + 30} z={6} w={20} d={40} h={32}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.6} />
        {[ [x0 + 156, y0 + 36], [x0 + 156, y0 + 60] ].map(([sx, sy], i) => {
          const a = iso(sx, sy, 38), b = iso(sx, sy, 56);
          return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#7a8593" strokeWidth="1" />;
        })}
        <IsoBox x={x0 + 184} y={y0 + 30} z={6} w={42} d={40} h={28}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.7} />
      </g>
      {(() => { const lp = iso(x0 + w / 2, y0 + d + 14, 8); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8.5" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">SUBSTATION YARD</text>
      );})()}
    </>
  );
}

function Equip_SwitchRoom({ styleFor }) {
  const x0 = 880, y0 = 220, w = 160, d = 90, h = 56;
  return (
    <g data-disc="civils electrical" style={styleFor('civils')}>
      <IsoBox x={x0 - 6} y={y0 - 6} z={0} w={w + 12} d={d + 12} h={6}
              top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
      <IsoBox x={x0} y={y0} z={6} w={w} d={d} h={h}
              top="#252b34" right="#1a1f28" front="#0d1218" edge="#5a6473" />
      {(() => {
        const a = iso(x0 + 20, y0 + d / 2, 6 + h + 4);
        const b = iso(x0 + w - 20, y0 + d / 2, 6 + h + 4);
        return (
          <g>
            <line x1={a.X} y1={a.Y - 2} x2={b.X} y2={b.Y - 2} stroke="#5a6473" strokeWidth="0.7" />
            <line x1={a.X} y1={a.Y + 2} x2={b.X} y2={b.Y + 2} stroke="#5a6473" strokeWidth="0.5" />
          </g>
        );
      })()}
      <IsoBox x={x0 + 14} y={y0 + d - 1} z={6} w={14} d={1} h={26}
              top="#2a313b" right="#1a1f28" front="#0a0d12" edge={SHADE.yellow} edgeWidth={0.5} />
      {[40, 70, 100, 130].map((dx, i) => (
        <IsoBox key={i} x={x0 + dx} y={y0 + d - 1} z={28} w={12} d={1} h={10}
                top="#1a2028" right="#11161d" front="#0a0d12" edge="#3a4250" edgeWidth={0.4} />
      ))}
      {[18, 32, 46, 60, 74, 88, 102, 116, 130].map((dx, i) => (
        <IsoBox key={`p${i}`} x={x0 + dx} y={y0 + 14} z={6} w={10} d={22} h={36}
                top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.4} />
      ))}
      {(() => { const lp = iso(x0 + w / 2, y0 + d + 8, 4); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">SWITCH ROOM · MCC</text>
      );})()}
    </g>
  );
}

function Equip_ControlRoom({ styleFor }) {
  return (
    <g data-disc="civils electrical" style={styleFor('civils')}>
      <Building x={1240} y={250} w={140} d={70} h={36} label="CONTROL ROOM" />
    </g>
  );
}

function Equip_LeachMCC({ styleFor }) {
  return (
    <g data-disc="civils electrical" style={styleFor('electrical')}>
      <Building x={1830} y={235} w={120} d={64} h={32} label="LEACH MCC" glowEdge={SHADE.yellow} />
    </g>
  );
}

function Equip_Lab({ styleFor }) {
  return (
    <g data-disc="civils" style={styleFor('civils')}>
      <Building x={1410} y={245} w={100} d={60} h={32} label="LABORATORY" />
    </g>
  );
}

function Equip_AdminOffice({ styleFor }) {
  return (
    <g data-disc="civils" style={styleFor('civils')}>
      <Building x={260} y={280} w={170} d={110} h={36} label="ADMIN" />
    </g>
  );
}

function Equip_Workshop({ styleFor }) {
  const x0 = -180, y0 = 270, w = 200, d = 130, h = 64;
  return (
    <g data-disc="civils" style={styleFor('civils')}>
      <IsoBox x={x0 - 6} y={y0 - 6} z={0} w={w + 12} d={d + 12} h={6}
              top="#2a313b" right="#1a1f28" front="#10141a" edge="#5a6473" />
      <IsoFrame x={x0} y={y0} z={6} w={w} d={d} h={h} intermediateBeams={1} edge="#5a6473" />
      <IsoChevronRoof x={x0} y={y0} z={6 + h} w={w} d={d} peakH={16}
                      top="#252b34" side="#171c23" edge="#5a6473" />
      {/* Roller door on front face */}
      <IsoBox x={x0 + 30} y={y0 + d - 1} z={6} w={36} d={1} h={50}
              top="#2a313b" right="#1a1f28" front="#0a0d12" edge="#5a6473" edgeWidth={0.5} />
      {(() => { const lp = iso(x0 + w / 2, y0 + d + 10, 4); return (
        <text x={lp.X} y={lp.Y} textAnchor="middle" fontSize="8" fontFamily="'Source Sans 3'" fill="#7a8593" letterSpacing="0.06em">WORKSHOP & STORES</text>
      );})()}
    </g>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// INFRASTRUCTURE — pipe rack, cable rack, lighting, fence, roads
// ════════════════════════════════════════════════════════════════════════════

function Equip_PipeRack({ styleFor }) {
  // Main pipe rack running across the plant carrying water, slurry, air, cyanide.
  // Two-level: lower at z=140, upper at z=170. Posts every ~400 units.
  const yRack = 155;
  const xStart = 100, xEnd = 2700;
  return (
    <g data-disc="mechanical" style={styleFor('mechanical')}>
      {/* Simple steel posts (not lattice — keeps element count down) */}
      {[200, 500, 900, 1250, 1600, 1950, 2300, 2600].map((x, i) => {
        const a = iso(x,     yRack,     0), b = iso(x,     yRack,     176);
        const c = iso(x,     yRack + 12, 0), d = iso(x,     yRack + 12, 176);
        return (
          <React.Fragment key={i}>
            <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="1.1" />
            <line x1={c.X} y1={c.Y} x2={d.X} y2={d.Y} stroke="#3a4250" strokeWidth="0.8" />
          </React.Fragment>
        );
      })}
      {/* Horizontal cross-beams supporting the pipes */}
      {[140, 156, 170].map((zz, i) => {
        const a = iso(xStart, yRack, zz), b = iso(xEnd, yRack, zz);
        return <line key={`b${i}`} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="0.7" />;
      })}
      {/* Pipes running along the rack */}
      {[
        { z: 140, color: '#3a4250' },
        { z: 145, color: '#3a4250' },
        { z: 158, color: '#5a4a35' },
        { z: 163, color: '#2a4a5a' },
        { z: 168, color: '#5a3a3a' },
        { z: 172, color: '#3a5a3a' },
      ].map((pipe, i) => {
        const a = iso(xStart, yRack + 6, pipe.z), b = iso(xEnd, yRack + 6, pipe.z);
        return <line key={`p${i}`} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke={pipe.color} strokeWidth="3" strokeLinecap="round" opacity="0.85" />;
      })}
    </g>
  );
}

function Equip_CableRack({ styleFor }) {
  const yRack = 165;
  const zRack = 215;
  const xStart = 130, xEnd = 2700;
  return (
    <g data-disc="electrical" style={styleFor('electrical')}>
      <IsoBox x={xStart} y={yRack} z={zRack} w={xEnd - xStart} d={12} h={5}
              top="#2a313b" right="#1a1f28" front="#10141a" edge={SHADE.yellow} edgeWidth={0.6} />
      {/* Support posts every 200 — these double as pipe-rack masts so are mostly hidden */}
      {[200, 400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600].map((x, i) => {
        const a = iso(x, yRack + 6, 0), b = iso(x, yRack + 6, zRack);
        return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#3a4250" strokeWidth="0.4" />;
      })}
      {/* Cable bundles on top */}
      {[0, 1, 2, 3].map((i) => {
        const a = iso(xStart, yRack + 2 + i * 2, zRack + 5);
        const b = iso(xEnd, yRack + 2 + i * 2, zRack + 5);
        const c = ['#7a8593', '#5a6473', '#3a4250', SHADE.yellow][i];
        return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke={c} strokeWidth={i === 3 ? 0.6 : 1.1} opacity="0.85" />;
      })}
      {/* Drop cables to equipment */}
      {[
        [225, 110, 80], [360, 152, 60], [620, 30,  240], [950, 33,  120], [950, 142, 120],
        [1118, 64, 50], [1210, 60, 180], [1410, 100, 50], [1640, 80, 90], [1840, 80, 90], [2030, 80, 90],
        [2255, 80, 90], [2480, 80, 90], [2540, 50, 100], [2628, 30, 80], [2780, 230, 90],
      ].map(([x, y, z], i) => {
        const a = iso(x, yRack + 6, zRack);
        const b = iso(x, y, z);
        return <line key={i} x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="0.7" />;
      })}
    </g>
  );
}

function Equip_Lighting({ styleFor }) {
  // Reduced number of perimeter masts — 4 simple posts (not lattice) to keep element count down
  const masts = [
    [-100, -80],  [1400, -80], [2700, -80], [2900, 380],
  ];
  return (
    <g data-disc="electrical" style={styleFor('electrical')}>
      {masts.map(([x, y], i) => {
        const a = iso(x, y, 0), b = iso(x, y, 200);
        return (
          <g key={i}>
            <line x1={a.X} y1={a.Y} x2={b.X} y2={b.Y} stroke="#5a6473" strokeWidth="1.2" />
            <IsoBox x={x - 8} y={y - 4} z={196} w={16} d={8} h={6}
                    top="#3a4250" right="#1a1f28" front="#0d1218" edge={SHADE.yellow} edgeWidth={0.5} />
          </g>
        );
      })}
    </g>
  );
}

Object.assign(window, {
  AgitatorTank, LimeSilo, ProcessSilo, Building, MultiPipeRun,
  Equip_ROM, Equip_CrusherHouse, Equip_Screen, Equip_Conv1, Equip_Stockpile, Equip_Conv2,
  Equip_MillHouse, Equip_SAGMill, Equip_BallMill, Equip_PebbleCrusher, Equip_MillPump,
  Equip_CycloneTower, Equip_PreLeachThickener, Equip_LeachTanks, Equip_CILTanks,
  Equip_ElutionColumn, Equip_GoldRoom, Equip_TailingsThickener, Equip_CarbonRegen,
  Equip_LimeSilo, Equip_WaterTanks, Equip_ReagentStorage, Equip_AirCompressor,
  Equip_Substation, Equip_SwitchRoom, Equip_ControlRoom, Equip_LeachMCC,
  Equip_Lab, Equip_AdminOffice, Equip_Workshop,
  Equip_PipeRack, Equip_CableRack, Equip_Lighting,
});