/* ============================================================
   DETAILED P&ID — SECTION SHEETS
   Reception / Tunnel / Percolate / Biogas / CHP+Heat / Air+Biofilter
   Each: detailed piping with line numbers, ISA valves/instruments,
   check/safety valves, fittings + live clickable devices.
   ============================================================ */
const ce = React.createElement;
const Dv = id => window.devById(id);
const PValve = window.PValve, PPump = window.PPump, PInst = window.PInst;
const { PLine, arrow, lineTag, pipeTag, elevFlag, checkV, psv, reducer, strainer, flameArr, sig, eqroom, vessel, txt, PIDSheet } = window;
const MD = window.MED;

/* manual gate (isolation) valve — svg only */
function gateV(x, y, c) {
  return ce("g", { key: "gv" + x + "-" + y },
    ce("polygon", { points: `${x - 8},${y - 6} ${x},${y} ${x - 8},${y + 6}`, fill: "none", stroke: c || "#6a86ad", strokeWidth: 1.4 }),
    ce("polygon", { points: `${x + 8},${y - 6} ${x},${y} ${x + 8},${y + 6}`, fill: "none", stroke: c || "#6a86ad", strokeWidth: 1.4 })
  );
}
/* tap dot where instrument connects to a line */
function tap(x, y) { return ce("circle", { key: "tp" + x + "-" + y, cx: x, cy: y, r: 2.4, fill: "#6a86ad" }); }

/* =====================================================================
   SHEET 10 — RECEPTION & PRETREATMENT
   ===================================================================== */
function PIDReception() {
  const { t } = useApp();
  const W = 1480, H = 600, C = MD.digestate;
  const svg = [];
  svg.push(eqroom(40, 56, 1400, 510, t("nav_reception").toUpperCase() + " · AREA 10", { dash: true }));
  // weighbridge
  svg.push(ce("rect", { key: "wb", x: 92, y: 360, width: 120, height: 44, rx: 3, fill: "rgba(122,160,209,0.08)", stroke: "rgba(122,160,209,0.4)" }));
  svg.push(txt(92, 352, "WEIGHBRIDGE", 8.5, "#8fb4e6"));
  // conveyor -> hopper
  svg.push(...PLine([[212, 372], [280, 372], [340, 230]], C, { flow: true }));
  svg.push(arrow(312, 300, "n", C));
  // hopper
  svg.push(vessel(340, 150, 130, 150, "FEED HOPPER", "10-HO-001", Dv("10LT01").v, C));
  // hopper outlet -> mixing auger -> suction
  svg.push(...PLine([[405, 300], [405, 380], [470, 380]], C, { flow: true }));
  svg.push(...PLine([[510, 380], [560, 380]], C, { flow: true }));
  // suction split to pumps
  svg.push(...PLine([[560, 380], [560, 330], [620, 330]], C, {}));
  svg.push(...PLine([[560, 380], [560, 430], [620, 430]], C, {}));
  svg.push(gateV(590, 330), gateV(590, 430));
  // pump discharge + check + iso -> common header
  svg.push(...PLine([[668, 330], [770, 330]], C, {}));
  svg.push(...PLine([[668, 430], [770, 430]], C, {}));
  svg.push(checkV(705, 330, "h", C), checkV(705, 430, "h", C));
  svg.push(gateV(745, 330), gateV(745, 430));
  svg.push(...PLine([[770, 330], [770, 430]], C, {}));
  svg.push(...PLine([[770, 380], [868, 380]], C, { flow: true }));
  svg.push(reducer(868, 380, C));
  // delivery line to tunnels
  svg.push(...PLine([[940, 380], [1380, 380]], C, { flow: true }));
  svg.push(pipeTag(1180, 380, { dn: 150, od: 214, fl: "P1", num: "L101a", mat: "SS304" }, { color: C, mid: true }));
  svg.push(arrow(1372, 380, "e", C));
  svg.push(txt(1300, 366, "→ AREA 20", 9, "#8fb4e6"));
  // diverter branch (reject)
  svg.push(...PLine([[405, 150], [405, 110], [300, 110]], C, {}));
  svg.push(txt(232, 108, "REJECT ←", 8.5, "#647a98"));
  // instrument signal lines
  svg.push(...sig([[470, 200], [512, 200]], "elec"), tap(470, 200));
  svg.push(...sig([[1050, 175], [1050, 130]], "elec"));
  svg.push(...sig([[145, 360], [145, 348]], "elec"));
  svg.push(txt(1010, 108, "HALL H₂S MONITOR", 8.5, "#647a98"));

  const overlays = [
    <PInst key="i1" d={Dv("10LT01")} x={545} y={200} />,
    <PInst key="i2" d={Dv("10WT01")} x={145} y={326} />,
    <PInst key="i3" d={Dv("10QT01")} x={1050} y={150} />,
    <PPump key="m1" d={Dv("10MC01")} x={255} y={350} kind="T" />,
    <PPump key="m2" d={Dv("10MX01")} x={490} y={380} kind="A" />,
    <PPump key="m3" d={Dv("10MP01")} x={645} y={330} />,
    <PPump key="m4" d={Dv("10MP02")} x={645} y={430} />,
    <PValve key="v1" d={Dv("10EV01")} x={905} y={380} vtype="control" lbl="FCV" />,
    <PValve key="v2" d={Dv("10EV02")} x={405} y={132} vtype="iso" lbl="DIV" />,
  ];
  return <PIDSheet titleKey="pid_rec" sub={t("reception_hall")} tag="P&ID 10-001 · DN" W={W} H={H} svg={svg} overlays={overlays} />;
}

/* =====================================================================
   SHEET 20 — FERMENTATION TUNNEL (typical 1 of 7)
   ===================================================================== */
function PIDTunnel() {
  const { t } = useApp();
  const W = 1480, H = 640;
  const svg = [];
  svg.push(eqroom(40, 56, 1400, 550, t("nav_tunnels").toUpperCase() + " · AREA 20", { dash: true }));
  // tunnel chamber
  svg.push(ce("rect", { key: "tn", x: 360, y: 300, width: 760, height: 190, rx: 4, fill: "rgba(13,31,60,0.6)", stroke: "rgba(122,160,209,0.45)", strokeWidth: 1.6 }));
  svg.push(ce("rect", { key: "tnm", x: 364, y: 360, width: 752, height: 126, fill: "url(#mass2)", opacity: 0.5 }));
  svg.push(txt(372, 290, "FERMENTATION TUNNEL  TF-01", 11, "#9db2cc"));
  svg.push(txt(372, 330, t("typical_note").toUpperCase(), 9, "#caa05a"));
  // gate door left
  svg.push(ce("rect", { key: "door", x: 350, y: 320, width: 10, height: 170, fill: "rgba(122,160,209,0.25)" }));
  // sprayers row inside top
  for (let i = 0; i < 6; i++) svg.push(ce("path", { key: "spr" + i, d: `M ${470 + i * 110} 310 l -5 10 l 10 0 z`, fill: MD.percolate, opacity: 0.7 }));
  // percolate spray supply (top)
  svg.push(...PLine([[120, 170], [700, 170]], MD.percolate, { flow: true }));
  svg.push(gateV(300, 170), strainer(360, 170, MD.percolate));
  svg.push(pipeTag(540, 170, { dn: 65, od: 177, fl: "P1", num: "L101b", mat: "SS304" }, { color: MD.percolate, mid: true }));
  svg.push(...PLine([[700, 184], [700, 300]], MD.percolate, { flow: true }));
  svg.push(txt(70, 168, "← PR / PPM", 8.5, "#8fb4e6"));
  // biogas extraction (top)
  svg.push(...PLine([[900, 300], [900, 150]], MD.biogas, { flow: true }));
  svg.push(flameArr(900, 250, MD.biogas));
  svg.push(...PLine([[900, 135], [1340, 135]], MD.biogas, { flow: true }));
  svg.push(pipeTag(1130, 135, { dn: 150, od: 270, fl: "P2", num: "L201a", mat: "SS304" }, { color: MD.biogas, mid: true }));
  svg.push(arrow(1332, 135, "e", MD.biogas));
  svg.push(txt(1255, 120, "→ AREA 40", 9, "#caa05a"));
  svg.push(psv(1040, 135, MD.biogas));
  // aeration / start-up air (bottom)
  svg.push(...PLine([[120, 560], [640, 560]], MD.air, { flow: true }));
  svg.push(pipeTag(360, 560, { dn: 100, fl: "AA", num: "L301a", mat: "SS304" }, { color: MD.air, mid: true }));
  svg.push(...PLine([[660, 546], [660, 490]], MD.air, { flow: true }));
  svg.push(txt(70, 558, "← AIR 70", 8.5, "#8fb4e6"));
  // percolate drain (bottom)
  svg.push(...PLine([[470, 490], [470, 580], [1300, 580]], MD.percolate, { flow: true }));
  svg.push(gateV(900, 580, MD.percolate));
  svg.push(pipeTag(1130, 580, { dn: 150, fl: "P1", num: "L121a", mat: "PVCSN8" }, { color: MD.percolate, mid: true }));
  svg.push(arrow(1292, 580, "e", MD.percolate));
  svg.push(txt(1210, 568, "→ SAND TRAP", 9, "#8fb4e6"));
  // floor heating serpentine
  let hp = "M 380 470 ";
  for (let i = 0; i < 7; i++) hp += `L ${420 + i * 100} 470 L ${420 + i * 100} ${i % 2 ? 470 : 478} `;
  svg.push(ce("path", { key: "heatcoil", d: "M 380 472 H 1100", stroke: MD.heat_s, strokeWidth: 2, fill: "none", opacity: 0.5, strokeDasharray: "10 5" }));
  svg.push(txt(380, 462, "FLOOR HEATING · DN50 - WM - L601a - CS", 8, "#c98a8a"));
  // signal lines
  svg.push(...sig([[1000, 135], [1000, 110]], "elec"), tap(1000, 135));
  svg.push(...sig([[600, 490], [600, 530]], "elec"), tap(600, 490));
  svg.push(...sig([[1120, 360], [1180, 360]], "elec"), tap(1120, 360));
  // elevation flags (mm) — as on the master P&ID
  svg.push(elevFlag(140, 170, "+5300"));
  svg.push(elevFlag(912, 150, "+6350"));
  svg.push(elevFlag(140, 560, "+5900"));
  svg.push(elevFlag(486, 575, "+200"));

  const overlays = [
    <PInst key="i1" d={Dv("20TT01")} x={600} y={548} />,
    <PInst key="i2" d={Dv("20AT01")} x={1000} y={86} />,
    <PInst key="i3" d={Dv("20PT01")} x={1210} y={360} />,
    <PValve key="v1" d={Dv("20GV01")} x={900} y={120} vtype="motor" lbl="GAS" />,
    <PValve key="v2" d={Dv("20SV01")} x={700} y={170} vtype="control" lbl="FCV" />,
    <PValve key="v3" d={Dv("20AV01")} x={660} y={560} vtype="control" lbl="AIR" />,
  ];
  return <PIDSheet titleKey="pid_tun" sub={t("fermentation_tunnel") + " TF-01"} tag="P&ID 20-101" W={W} H={H} svg={svg} overlays={overlays} />;
}

/* =====================================================================
   SHEET 30 — PERCOLATE MANAGEMENT
   ===================================================================== */
function PIDPercolate() {
  const { t } = useApp();
  const W = 1480, H = 620, C = MD.percolate;
  const svg = [];
  svg.push(eqroom(40, 56, 1400, 530, t("nav_percolate").toUpperCase() + " · AREA 30", { dash: true }));
  // tanks
  svg.push(vessel(120, 180, 180, 240, "PERCOLATE RESERVOIR PR1", "30-PR-001", Dv("30LT01").v, C));
  svg.push(vessel(360, 220, 150, 200, "PR2", "30-PR-002", Dv("30LT02").v, C));
  // transfer PR1 -> PR2
  svg.push(...PLine([[300, 300], [360, 300]], C, { flow: true }));
  // recirc return from tunnels into PR1 top
  svg.push(...PLine([[1340, 230], [210, 230], [210, 180]], C, {}));
  svg.push(txt(1230, 222, "← from tunnels", 8.5, "#647a98"));
  svg.push(pipeTag(1000, 218, { dn: 200, fl: "P1", num: "L141a", mat: "SS304" }, { color: C, mid: true }));
  // suction header
  svg.push(...PLine([[210, 420], [210, 520], [930, 520]], C, {}));
  svg.push(strainer(640, 520, C));
  // pumps
  const px = [710, 800, 890];
  px.forEach((x, i) => {
    svg.push(...PLine([[x, 506], [x, 520]], C, {}));
    svg.push(gateV(x, 512));
    svg.push(...PLine([[x, 454], [x, 405]], C, {}));
    svg.push(checkV(x, 430, "v", C));
    svg.push(gateV(x, 418));
  });
  // discharge header
  svg.push(...PLine([[710, 405], [890, 405]], C, {}));
  svg.push(...PLine([[800, 405], [800, 365], [1010, 365]], C, { flow: true }));
  // flow meter + distribution control valve
  svg.push(...sig([[1040, 365], [1040, 335]], "elec"), tap(1040, 365));
  svg.push(reducer(1095, 365, C));
  svg.push(...PLine([[1150, 365], [1380, 365]], C, { flow: true }));
  svg.push(pipeTag(1265, 365, { dn: 150, od: 214, fl: "P1", num: "L141c", mat: "SS304" }, { color: C, mid: true }));
  svg.push(arrow(1372, 365, "e", C));
  svg.push(txt(1300, 351, "→ AREA 20", 9, "#8fb4e6"));
  // sand trap drain
  svg.push(...PLine([[210, 520], [210, 580], [110, 580]], C, {}));
  svg.push(txt(60, 578, "← SAND", 8, "#647a98"));
  // signal lines
  svg.push(...sig([[120, 240], [70, 240]], "elec"));
  svg.push(...sig([[120, 320], [70, 320]], "elec"));
  svg.push(...sig([[120, 380], [70, 380]], "elec"));
  svg.push(...sig([[510, 280], [560, 280]], "elec"));

  const overlays = [
    <PInst key="i1" d={Dv("30LT01")} x={70} y={210} showVal={false} />,
    <PInst key="i2" d={Dv("30TT01")} x={70} y={320} />,
    <PInst key="i3" d={Dv("30QT01")} x={70} y={390} />,
    <PInst key="i4" d={Dv("30LT02")} x={560} y={260} showVal={false} />,
    <PInst key="i5" d={Dv("30FT01")} x={1040} y={305} />,
    <PPump key="m0" d={Dv("30MX01")} x={210} y={158} kind="A" />,
    <PPump key="m1" d={Dv("30MP01")} x={710} y={478} />,
    <PPump key="m2" d={Dv("30MP02")} x={800} y={478} />,
    <PPump key="m3" d={Dv("30MP03")} x={890} y={478} />,
    <PValve key="v1" d={Dv("30EV01")} x={1115} y={365} vtype="control" lbl="FCV" />,
    <PValve key="v2" d={Dv("30EV02")} x={330} y={300} vtype="iso" lbl="TRF" />,
    <PValve key="v3" d={Dv("30EV03")} x={210} y={555} vtype="iso" lbl="DRN" />,
  ];
  return <PIDSheet titleKey="pid_per" sub="PR1 · PR2" tag="P&ID 30-001" W={W} H={H} svg={svg} overlays={overlays} />;
}

/* =====================================================================
   SHEET 40 — BIOGAS STORAGE & TREATMENT
   ===================================================================== */
function PIDBiogas() {
  const { t } = useApp();
  const W = 1480, H = 640;
  const svg = [];
  svg.push(eqroom(40, 56, 1400, 550, t("nav_biogas").toUpperCase() + " · AREA 40", { dash: true }));
  // gas holder dome
  const cx = 430, base = 330, r = 150, fill = Dv("40LT01").v;
  svg.push(ce("clipPath", { key: "gc", id: "ghc40" }, ce("path", { d: `M ${cx - r} ${base} A ${r} ${r} 0 0 1 ${cx + r} ${base} Z` })));
  svg.push(ce("path", { key: "dome", d: `M ${cx - r} ${base} A ${r} ${r} 0 0 1 ${cx + r} ${base} Z`, fill: "rgba(42,157,224,0.08)", stroke: "rgba(122,160,209,0.5)", strokeWidth: 1.6 }));
  svg.push(ce("rect", { key: "df", x: cx - r, y: base - r * fill / 100, width: r * 2, height: r * fill / 100, fill: "#2A9DE0", opacity: 0.25, clipPath: "url(#ghc40)" }));
  svg.push(ce("path", { key: "dome2", d: `M ${cx - r} ${base} A ${r} ${r} 0 0 1 ${cx + r} ${base}`, fill: "none", stroke: MD.biogas, strokeWidth: 2, opacity: 0.5 }));
  svg.push(txt(cx, base - 40, "BIOGAS HOLDER 40-GH-001", 10, "#bcdcff", "middle"));
  // inlet from tunnels
  svg.push(...PLine([[60, 300], [280, 300]], MD.biogas, { flow: true }));
  svg.push(flameArr(170, 300, MD.biogas));
  svg.push(pipeTag(200, 282, { dn: 300, od: 425, fl: "P2", num: "L210a", mat: "SS304" }, { color: MD.biogas, mid: true }));
  svg.push(txt(60, 290, "← AREA 20", 8.5, "#caa05a"));
  // desulph air dosing
  svg.push(...PLine([[210, 430], [210, 300]], MD.air, { flow: true }));
  svg.push(txt(170, 448, "AIR (O₂ dosing)", 8, "#5b9fd0"));
  // outlet -> booster -> CHP
  svg.push(...PLine([[560, 300], [660, 300]], MD.biogas, { flow: true }));
  svg.push(checkV(770, 300, "h", MD.biogas));
  svg.push(...PLine([[730, 300], [920, 300]], MD.biogas, { flow: true }));
  svg.push(...PLine([[960, 300], [1380, 300]], MD.biogas, { flow: true }));
  svg.push(pipeTag(1180, 300, { dn: 250, od: 320, fl: "P2", num: "L240a", mat: "SS304" }, { color: MD.biogas, mid: true }));
  svg.push(arrow(1372, 300, "e", MD.biogas));
  svg.push(txt(1295, 286, "→ AREA 50", 9, "#caa05a"));
  // flare line
  svg.push(...PLine([[610, 300], [610, 140], [760, 140]], MD.biogas, {}));
  svg.push(psv(800, 140, MD.biogas));
  svg.push(flameArr(880, 140, MD.biogas));
  svg.push(txt(905, 144, "→ FLARE", 9, "#f08478"));
  svg.push(pipeTag(685, 126, { dn: 150, fl: "P2", num: "L260a", mat: "SS304" }, { color: MD.biogas, mid: true }));
  // condensate trap + drain
  svg.push(ce("rect", { key: "cp", x: 545, y: 350, width: 30, height: 30, rx: 3, fill: "rgba(42,157,224,0.12)", stroke: "rgba(122,160,209,0.4)" }));
  svg.push(...PLine([[560, 380], [560, 450]], MD.water, {}));
  svg.push(...PLine([[592, 470], [680, 470]], MD.water, {}));
  svg.push(txt(690, 474, "→ DRAIN", 8.5, "#647a98"));
  svg.push(pipeTag(636, 458, { dn: 25, fl: "P3", num: "L901a", mat: "SS304" }, { color: MD.water, mid: true }));
  // analyser house + sample line
  svg.push(...PLine([[1000, 300], [1000, 450]], "#9aa6b2", { dash: "5 3" }));
  svg.push(eqroom(880, 470, 300, 110, "GAS ANALYSER · 40-AT", { stroke: "rgba(122,160,209,0.35)" }));
  svg.push(txt(60, 470, t("sec_sample").toUpperCase(), 8, "#647a98"));
  // signal lines
  svg.push(...sig([[cx, base - 130], [cx, 160]], "elec"));
  svg.push(...sig([[cx + 60, base - 110], [cx + 90, 200]], "elec"));
  svg.push(...sig([[940, 300], [940, 270]], "elec"), tap(940, 300));

  const overlays = [
    <PInst key="i1" d={Dv("40LT01")} x={cx + 95} y={200} showVal={false} />,
    <PInst key="i2" d={Dv("40PT01")} x={cx} y={160} />,
    <PInst key="i3" d={Dv("40FT01")} x={940} y={245} />,
    <PInst key="a1" d={Dv("40AT01")} x={930} y={520} />,
    <PInst key="a2" d={Dv("40AT02")} x={1000} y={520} />,
    <PInst key="a3" d={Dv("40AT03")} x={1070} y={520} />,
    <PInst key="a4" d={Dv("40AT04")} x={1140} y={520} />,
    <PPump key="m1" d={Dv("40MB01")} x={695} y={300} kind="B" />,
    <PPump key="m2" d={Dv("40MP01")} x={560} y={485} />,
    <PValve key="v1" d={Dv("40EV01")} x={300} y={300} vtype="motor" lbl="IN" />,
    <PValve key="v2" d={Dv("40EV02")} x={620} y={300} vtype="motor" lbl="OUT" />,
    <PValve key="v3" d={Dv("40EV03")} x={610} y={210} vtype="iso" lbl="FLR" />,
    <PValve key="v4" d={Dv("40EV04")} x={210} y={385} vtype="control" lbl="O₂" />,
    <PValve key="v5" d={Dv("40EV05")} x={610} y={470} vtype="iso" lbl="DRN" />,
  ];
  return <PIDSheet titleKey="pid_gas" sub={t("gas_holder") + " · " + t("desulph")} tag="P&ID 40-201" W={W} H={H} svg={svg} overlays={overlays} />;
}

/* =====================================================================
   SHEET 50/60 — COGENERATION & HEAT RECOVERY
   ===================================================================== */
function PIDChp() {
  const { t } = useApp();
  const W = 1500, H = 620;
  const svg = [];
  svg.push(eqroom(40, 56, 700, 530, t("nav_chp").toUpperCase() + " · AREA 50", { dash: true }));
  svg.push(eqroom(760, 56, 700, 530, t("nav_heat").toUpperCase() + " · AREA 60", { dash: true, stroke: "rgba(211,58,44,0.3)" }));
  // gas train double block
  svg.push(...PLine([[60, 300], [200, 300]], MD.biogas, { flow: true }));
  svg.push(txt(60, 290, "← AREA 40", 8.5, "#caa05a"));
  svg.push(...PLine([[260, 300], [400, 300]], MD.biogas, { flow: true }));
  svg.push(...PLine([[300, 300], [300, 250]], MD.biogas, {}));
  svg.push(txt(305, 250, "VENT", 7.5, "#647a98"));
  svg.push(strainer(360, 300, MD.biogas));
  svg.push(pipeTag(150, 282, { dn: 200, od: 320, fl: "P2", num: "L240b", mat: "SS304" }, { color: MD.biogas, mid: true }));
  // genset
  svg.push(eqroom(410, 250, 230, 150, "CHP GENSET 50-GG-001", { fill: "rgba(19,49,92,0.5)", stroke: "rgba(95,217,154,0.4)" }));
  // exhaust
  svg.push(...PLine([[560, 250], [560, 150], [690, 150]], MD.heat_s, { flow: true }));
  svg.push(txt(640, 144, "→ EXH", 8, "#f08478"));
  svg.push(pipeTag(625, 130, { dn: 300, fl: "EG", num: "L1301a", mat: "CS" }, { color: MD.heat_s, mid: true }));
  // electrical export
  svg.push(...PLine([[640, 360], [820, 360]], "#5fd99a", { flow: true }));
  svg.push(ce("circle", { key: "gen", cx: 700, cy: 360, r: 16, fill: "rgba(6,15,31,0.85)", stroke: "#5fd99a", strokeWidth: 1.6 }));
  svg.push(txt(700, 364, "G", 11, "#5fd99a", "middle"));
  svg.push(txt(745, 350, "→ GRID 15kV", 8.5, "#5fd99a"));
  // jacket water to HX (area 60)
  svg.push(...PLine([[640, 290], [900, 290]], MD.heat_s, { flow: true }));
  svg.push(eqroom(900, 250, 90, 150, "HX 60-HE-001", { fill: "rgba(19,49,92,0.5)" }));
  for (let i = 0; i < 4; i++) svg.push(ce("line", { key: "hx" + i, x1: 912, y1: 280 + i * 25, x2: 978, y2: 280 + i * 25, stroke: MD.heat_s, strokeWidth: 1.2, opacity: 0.5 }));
  // heating loop pumps + mixing + supply/return
  svg.push(...PLine([[990, 320], [1010, 320], [1010, 360]], MD.heat_s, {}));
  svg.push(...PLine([[1064, 360], [1100, 360], [1100, 330], [1180, 330]], MD.heat_s, { flow: true }));
  svg.push(checkV(1075, 360, "h", MD.heat_s));
  // supply to tunnels
  svg.push(...PLine([[1214, 330], [1440, 330]], MD.heat_s, { flow: true }));
  svg.push(pipeTag(1330, 330, { dn: 150, od: 250, fl: "WM", num: "L654a", mat: "CS" }, { color: MD.heat_s, mid: true }));
  svg.push(arrow(1432, 330, "e", MD.heat_s));
  svg.push(txt(1360, 316, "→ AREA 20", 9, "#8fb4e6"));
  // return
  svg.push(...PLine([[1440, 430], [1010, 430], [1010, 400]], MD.heat_r, { flow: true }));
  svg.push(pipeTag(1240, 430, { dn: 150, od: 250, fl: "WM", num: "L654b", mat: "CS" }, { color: MD.heat_r, mid: true }));
  svg.push(txt(1360, 446, "← AREA 20", 9, "#6E97C4"));
  // dry cooler dump
  svg.push(...PLine([[1050, 320], [1050, 200], [1180, 200]], MD.heat_s, {}));
  svg.push(txt(1190, 204, "→ DRY COOLER", 8.5, "#647a98"));
  svg.push(pipeTag(1095, 192, { dn: 150, fl: "WM", num: "L656c", mat: "CS" }, { color: MD.heat_s, mid: true }));
  // signal lines
  svg.push(...sig([[560, 250], [560, 230]], "elec"));
  svg.push(...sig([[525, 250], [525, 220]], "elec"));
  svg.push(...sig([[1280, 330], [1280, 300]], "elec"), tap(1280, 330));
  svg.push(...sig([[1280, 430], [1280, 470]], "elec"), tap(1280, 430));

  const overlays = [
    <PInst key="i1" d={Dv("50TT01")} x={525} y={196} />,
    <PInst key="i2" d={Dv("50ST01")} x={460} y={230} />,
    <PInst key="i3" d={Dv("50TT02")} x={470} y={430} />,
    <PInst key="i4" d={Dv("50TT03")} x={560} y={430} />,
    <PInst key="i5" d={Dv("50JT01")} x={820} y={330} />,
    <PInst key="i6" d={Dv("60TT01")} x={1280} y={300} />,
    <PInst key="i7" d={Dv("60TT02")} x={1280} y={500} />,
    <PInst key="i8" d={Dv("60FT01")} x={1150} y={296} />,
    <PInst key="i9" d={Dv("60PT01")} x={1150} y={470} />,
    <PPump key="m0" d={Dv("50GG01")} x={525} y={330} kind="G" />,
    <PPump key="m1" d={Dv("60MP01")} x={1035} y={385} />,
    <PValve key="v1" d={Dv("50EV02")} x={225} y={300} vtype="motor" lbl="ESD" />,
    <PValve key="v2" d={Dv("50EV01")} x={300} y={300} vtype="motor" lbl="GAS" />,
    <PValve key="v3" d={Dv("60EV01")} x={1197} y={330} vtype="control" lbl="MIX" />,
    <PValve key="v4" d={Dv("50EV03")} x={1050} y={250} vtype="control" lbl="DUMP" />,
    <PValve key="v5" d={Dv("60EV02")} x={930} y={420} vtype="iso" lbl="ISO" />,
  ];
  return <PIDSheet titleKey="pid_chp" sub={t("chp_engine") + " · " + t("heat_exch")} tag="P&ID 50/60" W={W} H={H} svg={svg} overlays={overlays} />;
}

/* =====================================================================
   SHEET 70/80 — COMPRESSED AIR & BIOFILTER
   ===================================================================== */
function PIDAir() {
  const { t } = useApp();
  const W = 1500, H = 620;
  const svg = [];
  svg.push(eqroom(40, 56, 820, 530, t("nav_air").toUpperCase() + " · AREA 70", { dash: true }));
  svg.push(eqroom(880, 56, 580, 530, t("nav_biofilter").toUpperCase() + " · AREA 80", { dash: true, stroke: "rgba(95,180,120,0.35)" }));
  // ---- compressed air ----
  svg.push(...PLine([[150, 300], [250, 300]], MD.air, { flow: true }));
  svg.push(...PLine([[150, 400], [250, 400]], MD.air, { flow: true }));
  svg.push(checkV(195, 300, "h", MD.air), checkV(195, 400, "h", MD.air));
  svg.push(...PLine([[250, 300], [250, 400]], MD.air, {}));
  svg.push(...PLine([[250, 350], [300, 350]], MD.air, { flow: true }));
  svg.push(ce("rect", { key: "ac", x: 300, y: 332, width: 38, height: 36, rx: 3, fill: "rgba(42,157,224,0.12)", stroke: "rgba(122,160,209,0.4)" }));
  svg.push(txt(300, 326, "AFTERCOOL", 7, "#5b9fd0"));
  svg.push(...PLine([[338, 350], [360, 350]], MD.air, {}));
  svg.push(vessel(360, 270, 90, 160, "AIR RECEIVER", "70-AR-001", null));
  svg.push(...PLine([[450, 350], [490, 350]], MD.air, { flow: true }));
  svg.push(eqroom(490, 310, 80, 80, "DRYER", { fill: "rgba(19,49,92,0.5)" }));
  svg.push(...PLine([[570, 350], [640, 350]], MD.air, { flow: true }));
  svg.push(reducer(660, 350, MD.air));
  svg.push(...PLine([[720, 350], [840, 350]], MD.air, { flow: true }));
  svg.push(pipeTag(770, 332, { dn: 50, fl: "AS", num: "L510a", mat: "GS" }, { color: MD.air, mid: true }));
  svg.push(arrow(832, 350, "e", MD.air));
  svg.push(txt(745, 392, "→ INSTR. AIR / EV", 8.5, "#8fb4e6"));
  // receiver drain
  svg.push(...PLine([[405, 430], [405, 490]], MD.water, {}));
  svg.push(txt(415, 492, "PURGE", 7.5, "#647a98"));
  // signal lines
  svg.push(...sig([[405, 270], [405, 240]], "elec"));
  svg.push(...sig([[530, 310], [530, 280]], "elec"));
  svg.push(...sig([[700, 350], [700, 320]], "elec"), tap(700, 350));
  // ---- biofilter ----
  svg.push(...PLine([[900, 300], [945, 300]], "#9aa6b2", { flow: true }));
  svg.push(...PLine([[900, 400], [945, 400]], "#9aa6b2", { flow: true }));
  svg.push(txt(900, 290, "← FOUL AIR", 8, "#9aa6b2"));
  svg.push(pipeTag(1012, 338, { dn: 400, fl: "AA", num: "L350a", mat: "GS" }, { color: "#9aa6b2", mid: true }));
  svg.push(...PLine([[980, 300], [980, 400]], "#9aa6b2", {}));
  svg.push(...PLine([[980, 350], [1060, 350]], "#9aa6b2", { flow: true }));
  svg.push(eqroom(1060, 250, 280, 210, "BIOFILTER BED 80-BF-001", { fill: "rgba(30,90,50,0.2)", stroke: "rgba(95,180,120,0.4)", lc: "#7fc99a" }));
  svg.push(ce("path", { key: "media", d: "M 1075 420 q 18 -14 36 0 q 18 -14 36 0 q 18 -14 36 0 q 18 -14 36 0 q 18 -14 36 0 q 18 -14 36 0", stroke: "#5fb478", strokeWidth: 2, fill: "none", opacity: 0.5 }));
  // irrigation
  svg.push(...PLine([[1200, 200], [1200, 250]], MD.water, { flow: true }));
  svg.push(txt(1160, 196, "WATER", 8, "#5b9fd0"));
  // stack
  svg.push(...PLine([[1200, 250], [1200, 150], [1380, 150]], "#cfe0d6", { flow: true }));
  svg.push(arrow(1372, 150, "e", "#cfe0d6"));
  svg.push(txt(1300, 144, "→ STACK", 9, "#8fb4e6"));
  svg.push(pipeTag(1300, 130, { dn: 500, fl: "AA", num: "L351a", mat: "GS" }, { color: "#cfe0d6", mid: true }));
  // bypass
  svg.push(...PLine([[1060, 300], [1010, 300], [1010, 180], [1200, 180]], "#9aa6b2", { dash: "5 3" }));
  // signal lines
  svg.push(...sig([[1100, 460], [1100, 490]], "elec"), tap(1100, 460));
  svg.push(...sig([[1200, 360], [1240, 360]], "elec"));
  svg.push(...sig([[1280, 150], [1280, 110]], "elec"), tap(1280, 150));

  const overlays = [
    <PInst key="i1" d={Dv("70PT01")} x={405} y={236} />,
    <PInst key="i2" d={Dv("70TT01")} x={530} y={262} />,
    <PInst key="i3" d={Dv("70FT01")} x={700} y={296} />,
    <PPump key="m1" d={Dv("70MC01")} x={120} y={300} kind="C" />,
    <PPump key="m2" d={Dv("70MC02")} x={120} y={400} kind="C" />,
    <PValve key="v1" d={Dv("70EV01")} x={690} y={350} vtype="control" lbl="DIST" />,
    <PValve key="v2" d={Dv("70EV02")} x={405} y={510} vtype="iso" lbl="PRG" />,
    <PInst key="i4" d={Dv("80PT01")} x={1100} y={510} />,
    <PInst key="i5" d={Dv("80MT01")} x={1270} y={360} />,
    <PInst key="i6" d={Dv("80TT01")} x={1190} y={360} />,
    <PInst key="i7" d={Dv("80QT01")} x={1280} y={86} />,
    <PPump key="m3" d={Dv("80MF01")} x={960} y={300} kind="V" />,
    <PPump key="m4" d={Dv("80MF02")} x={960} y={400} kind="V" />,
    <PValve key="v3" d={Dv("80EV01")} x={1200} y={230} vtype="control" lbl="IRR" />,
    <PValve key="v4" d={Dv("80EV02")} x={1010} y={240} vtype="motor" lbl="BYP" />,
  ];
  return <PIDSheet titleKey="pid_air" sub={t("compressor") + " · " + t("biofilter")} tag="P&ID 70/80" W={W} H={H} svg={svg} overlays={overlays} />;
}

Object.assign(window.PAGES, {
  pid_rec: PIDReception, pid_tun: PIDTunnel, pid_per: PIDPercolate,
  pid_gas: PIDBiogas, pid_chp: PIDChp, pid_air: PIDAir,
});