// Equip_Underground3D — Integrated 3D iso cutaway of the mine
// (inserted into plant-extras.jsx)

function Equip_Underground3D({ styleFor }) {
  const X1 = -180, X2 = 2800;
  const Y1 = 20,  Y2 = 280;
  // Depth compression — squashes the mine vertically so the diagram is shorter
  // overall. Surface plant geometry is unaffected; only underground z's scale.
  const DZ = 0.6;
  const ZT = 0,   ZB = -1500 * DZ;
  const shaftX = -120, shaftY = 80;

  const lvls = [
    { z: -190,  label: '+100 mRL', zone: 'UPPER LEVELS' },
    { z: -360,  label: '-70 mRL' },
    { z: -560,  label: '-270 mRL', zone: 'MAIN ORE ZONES' },
    { z: -780,  label: '-490 mRL' },
    { z: -1000, label: '-710 mRL' },
    { z: -1220, label: '-930 mRL', zone: 'DEEP LEVELS' },
    { z: -1430, label: '-1140 mRL' },
  ].map((l) => ({ ...l, z: l.z * DZ }));

  const strata = [
    { zT: 0,     zB: -60,   c: '#3d3526' },
    { zT: -60,   zB: -200,  c: '#2f2a1f' },
    { zT: -200,  zB: -600,  c: '#241f17' },
    { zT: -600,  zB: -1100, c: '#1f1a14' },
    { zT: -1100, zB: -1500, c: '#1a1410' },
  ].map((s) => ({ ...s, zT: s.zT * DZ, zB: s.zB * DZ }));

  const W = (pts, fill, stroke, sw) => (
    <polygon points={pts.map((p) => pt.apply(null, p)).join(' ')}
             fill={fill} stroke={stroke || '#3a3020'} strokeWidth={sw || 0.6} />
  );
  const L = (a, b, stroke, sw) => {
    const pa = iso(a[0], a[1], a[2]);
    const pb = iso(b[0], b[1], b[2]);
    return <line x1={pa.X} y1={pa.Y} x2={pb.X} y2={pb.Y} stroke={stroke} strokeWidth={sw || 0.6} />;
  };

  return (
    <g>
      <g data-disc="civils" style={styleFor('civils')}>
        {W([[X1,Y2,ZT],[X2,Y2,ZT],[X2,Y2,ZB],[X1,Y2,ZB]], '#1f1a14', '#3a3020', 0.5)}
        {strata.map((s, i) => (
          <React.Fragment key={'st'+i}>
            {W([[X1,Y2,s.zT],[X2,Y2,s.zT],[X2,Y2,s.zB],[X1,Y2,s.zB]], s.c, 'none', 0)}
          </React.Fragment>
        ))}
        {strata.slice(1).map((s, i) => (
          <React.Fragment key={'sl'+i}>
            {L([X1,Y2,s.zT], [X2,Y2,s.zT], '#0e0c08', 0.4)}
          </React.Fragment>
        ))}
        {W([[X1,Y1,ZT],[X1,Y2,ZT],[X1,Y2,ZB],[X1,Y1,ZB]], '#181410', '#3a3020', 0.5)}
        {W([[X2,Y1,ZT],[X2,Y2,ZT],[X2,Y2,ZB],[X2,Y1,ZB]], '#181410', '#3a3020', 0.5)}
        {W([[X1,Y1,ZB],[X2,Y1,ZB],[X2,Y2,ZB],[X1,Y2,ZB]], '#15110d', '#3a3020', 0.5)}
        {L([X1,Y1,0], [X2,Y1,0], '#5a4a30', 1.6)}
        {(() => {
          const dots = [];
          for (let i = 0; i < 70; i++) {
            const fx = X1 + ((i * 271) % (X2 - X1 - 60)) + 30;
            const fz = -10 - ((i * 419) % 1480);
            const p = iso(fx, Y2, fz);
            dots.push(<circle key={i} cx={p.X} cy={p.Y} r="0.7" fill="#0a0807" opacity="0.55" />);
          }
          return dots;
        })()}
        {W([[X1+200,Y2,-1400*DZ],[X2-200,Y2,-1300*DZ],[X2-200,Y2,-1260*DZ],[X1+200,Y2,-1360*DZ]],
           '#c97a4f', '#3a2010', 0.4)}
      </g>

      <g data-disc="civils" style={styleFor('civils')}>
        {lvls.filter((l) => l.zone).map((l, i) => {
          const p = iso(X2 + 30, Y2, l.z + 60);
          return <text key={i} x={p.X} y={p.Y} fontSize="11" fontFamily="'Source Sans 3'"
                       fill="#5a4a30" letterSpacing="0.18em" fontWeight="600">{l.zone}</text>;
        })}
        {(() => { const p = iso(X2 + 30, Y2, 30); return (
          <text x={p.X} y={p.Y} fontSize="10" fontFamily="'Source Sans 3'"
                fill="#7a6a4a" letterSpacing="0.14em" fontWeight="600">SURFACE</text>
        );})()}
      </g>

      {lvls.map((lvl, li) => (
        <g key={'lvl'+li}>
          <g data-disc="civils" style={styleFor('civils')}>
            <IsoBox x={X1 + 40} y={Y1 + 30} z={lvl.z - 8}
                    w={X2 - X1 - 100} d={Y2 - Y1 - 60} h={8}
                    top="#1a1410" right="#13100a" front="#0c0a06" edge="#3a3020" edgeWidth={0.4} />
          </g>
          {(() => { const p = iso(X2 + 10, Y2 - 20, lvl.z + 4); return (
            <text x={p.X} y={p.Y} fontSize="8" fontFamily="'Source Sans 3'"
                  fill="#7a6a4a" letterSpacing="0.06em">{lvl.label}</text>
          );})()}
        </g>
      ))}

      <g data-disc="civils" style={styleFor('civils')}>
        <IsoBox x={shaftX - 8} y={shaftY - 8} z={ZB + 30}
                w={16} d={16} h={Math.abs(ZB) - 30}
                top="#0a0807" right="#0e0c08" front="#06040a" edge="#5a4a2a" edgeWidth={0.5} />
        {Array.from({ length: 18 }).map((_, i) => {
          const zz = -75 - i * 75;
          if (zz < ZB) return null;
          return <React.Fragment key={i}>
            {L([shaftX - 8, shaftY + 8, zz], [shaftX + 8, shaftY + 8, zz], '#3a3020', 0.3)}
          </React.Fragment>;
        })}
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        <ShaftCage x={shaftX - 4} y={shaftY} zTop={-20} zBot={ZB + 80} w={8} d={10} h={16} dur={20} />
        <ShaftCage x={shaftX + 4} y={shaftY} zTop={ZB + 80} zBot={-20} w={8} d={10} h={14} dur={20} color="#c97a4f" />
      </g>
      <g data-disc="bulk mechanical" style={styleFor('bulk')}>
        {/* Ore is hoisted UP inside the skip (the orange ShaftCage above), not
           as a free-floating vertical particle stream — so just a label. */}
        {(() => { const p = iso(shaftX + 22, shaftY + 16, -60); return (
          <text x={p.X} y={p.Y} fontSize="9" fontFamily="'Source Sans 3'" fill="#c97a4f"
                letterSpacing="0.12em" fontWeight="600">↑ ORE UP (SKIP)</text>
        );})()}
      </g>

      <g data-disc="civils" style={styleFor('civils')}>
        {/* (Removed) Decline ramp zig-zag — cleaner without it. Ore travels up
           the shaft; the decline isn't shown as a switchback in this view. */}
      </g>

      {/* (Removed) Vertical ore passes & vent shafts — visually they read as
          extra material conduits between surface and depth. The shaft hoist
          is the only vertical link to surface in this diagram. */}

      <g data-disc="electrical civils" style={styleFor('electrical')}>
        <IsoBox x={shaftX + 80} y={50} z={lvls[0].z} w={44} d={28} h={28}
                top="#262d36" right="#171c23" front="#0d1218" edge="#fbbf24" edgeWidth={0.5} />
        <IsoBox x={shaftX + 80} y={50} z={lvls[4].z} w={44} d={28} h={28}
                top="#262d36" right="#171c23" front="#0d1218" edge="#fbbf24" edgeWidth={0.5} />
      </g>
      <g data-disc="civils mechanical" style={styleFor('civils')}>
        {[1, 5].map((idx) => (
          <IsoBox key={idx} x={1200} y={50} z={lvls[idx].z} w={90} d={32} h={26}
                  top="#3a4250" right="#1f2630" front="#10141a" edge="#7a8593" edgeWidth={0.5} />
        ))}
      </g>
      <g data-disc="mechanical" style={styleFor('mechanical')}>
        {[3, 6].map((idx) => (
          <React.Fragment key={idx}>
            {[0, 1, 2].map((j) => (
              <IsoVCylinder key={j} x={1700 + j * 36} y={70} z={lvls[idx].z} r={11} h={22}
                            top="#262d36" shell="#171c23" edge="#7a8593" capRing={false} />
            ))}
          </React.Fragment>
        ))}
      </g>
      <g data-disc="mechanical bulk" style={styleFor('mechanical')}>
        {[2, 3, 4].map((idx) => (
          <IsoBox key={idx} x={2300} y={60} z={lvls[idx].z}
                  w={120} d={50} h={Math.abs(lvls[idx-1].z - lvls[idx].z) * 0.5}
                  top="#3a2818" right="#2a1d10" front="#1a1208" edge="#5a3a20" edgeWidth={0.5} />
        ))}
      </g>
      <g data-disc="bulk mechanical" style={styleFor('bulk')}>
        {[0, 2, 4, 6].map((idx) => (
          <IsoBox key={idx} x={shaftX + 30} y={60} z={lvls[idx].z} w={28} d={20} h={16}
                  top="#262d36" right="#171c23" front="#0d1218" edge="#7a8593" edgeWidth={0.5} />
        ))}
      </g>
      <g data-disc="bulk" style={styleFor('bulk')}>
        <IsoConveyor x1={shaftX + 60} x2={2400} z1={lvls[6].z + 8} z2={lvls[6].z + 8}
                     y={120} w={14} trestles={false} color="#1c1812" />
        <BeltMaterial a={[2400, 127, lvls[6].z + 14]} b={[shaftX + 60, 127, lvls[6].z + 14]}
                      dur={3.5} color="#c97a4f" width={2.6} />
        {(() => { const p = iso(1400, 80, lvls[6].z + 36); return (
          <text x={p.X} y={p.Y} fontSize="8" fontFamily="'Source Sans 3'" fill="#7a6a4a"
                letterSpacing="0.08em" textAnchor="middle" fontWeight="600">DEEP CONVEYOR — TO SHAFT</text>
        );})()}
      </g>

    </g>
  );
}

Object.assign(window, { Equip_Underground3D });