function DiagramTitle({ children }) {
  return <text x="450" y="35" textAnchor="middle" className="micro">{children}</text>;
}

function CuttingVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>MATERIAL ID → GRAIN DIRECTION → PANEL CUTTING → TRACEABILITY</DiagramTitle>
      <rect x="182" y="68" width="536" height="274" rx="5" fill="var(--copper-soft)" stroke="var(--copper)" strokeWidth="2"></rect>
      <path d="M450 68 V342 M182 205 H718" fill="none" stroke="var(--ink)" strokeWidth="2" strokeDasharray="9 7"></path>
      <g fill="none" stroke="var(--ink)" strokeWidth="1.5">
        <rect x="205" y="91" width="220" height="90" rx="4"></rect>
        <rect x="475" y="91" width="220" height="90" rx="4"></rect>
        <rect x="205" y="228" width="220" height="90" rx="4"></rect>
        <rect x="475" y="228" width="220" height="90" rx="4"></rect>
      </g>
      <g className="micro">
        <text x="315" y="140" textAnchor="middle">WORK PANEL A</text>
        <text x="585" y="140" textAnchor="middle">WORK PANEL B</text>
        <text x="315" y="277" textAnchor="middle">WORK PANEL C</text>
        <text x="585" y="277" textAnchor="middle">WORK PANEL D</text>
      </g>
      <path d="M744 100 h34 l-17 30z" fill="var(--ink)"></path>
      <path d="M761 130 V300" stroke="var(--ink)" strokeWidth="3"></path>
      <path d="M744 300 h34 l-17 30z" fill="var(--ink)"></path>
      <text x="800" y="207" className="label">절단선</text>
      <text x="800" y="225" className="micro">SIZE + DIRECTION</text>
      {defectMode ? (
        <g>
          <path d="M448 68 L488 342" className="danger-line"></path>
          <circle cx="467" cy="205" r="42" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <text x="90" y="315" className="label" style={{ fill: "var(--danger)" }}>비스듬한 재단</text>
          <text x="90" y="333" className="micro" style={{ fill: "var(--danger)" }}>DIMENSION / SQUARENESS</text>
        </g>
      ) : (
        <g>
          <path d="M182 90 L105 71" className="leader"></path>
          <text x="95" y="68" textAnchor="end" className="label">원판</text>
          <text x="95" y="86" textAnchor="end" className="micro">COPPER CLAD LAMINATE</text>
        </g>
      )}
      <text x="450" y="382" textAnchor="middle" className="label">재단의 핵심은 크기뿐 아니라 자재·방향·로트의 출발점을 맞추는 것</text>
    </g>
  );
}

function InnerCircuitVisual({ defectMode }) {
  const tracePath = "M530 118 H646 V153 H574 V191 H665 V226 H605 V270 H690";
  return (
    <g>
      <DiagramTitle>CLEAN → DRY FILM → EXPOSE → DEVELOP → ETCH → STRIP</DiagramTitle>
      <g>
        <text x="253" y="82" textAnchor="middle" className="micro">BEFORE · COPPER PLANE</text>
        <rect x="116" y="102" width="274" height="210" rx="5" fill="var(--resin)"></rect>
        <rect x="128" y="114" width="250" height="186" rx="3" fill="var(--copper)"></rect>
      </g>
      <path d="M414 205 H470" stroke="var(--ink)" strokeWidth="3"></path>
      <path d="M470 196 l17 9 -17 9z" fill="var(--ink)"></path>
      <g>
        <text x="622" y="82" textAnchor="middle" className="micro">AFTER · INNER CIRCUIT</text>
        <rect x="502" y="102" width="274" height="210" rx="5" fill="var(--resin)"></rect>
        <path d={tracePath} fill="none" stroke="var(--copper)" strokeWidth="18" strokeLinecap="round" strokeLinejoin="round"></path>
        <circle cx="530" cy="118" r="20" fill="var(--copper)"></circle>
        <circle cx="690" cy="270" r="20" fill="var(--copper)"></circle>
      </g>
      {defectMode ? (
        <g>
          <rect x="599" y="181" width="28" height="21" fill="var(--resin)"></rect>
          <circle cx="613" cy="191" r="34" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <path d="M613 191 L782 147" className="leader" style={{ stroke: "var(--danger)" }}></path>
          <text x="792" y="143" className="label" style={{ fill: "var(--danger)" }}>미세 단선</text>
          <text x="792" y="161" className="micro" style={{ fill: "var(--danger)" }}>OVER ETCH / LIFT</text>
        </g>
      ) : (
        <g>
          <path d="M558 155 L799 114" className="leader"></path>
          <text x="809" y="110" className="label">필요한 구리만 남음</text>
          <text x="809" y="128" className="micro">SIGNAL / POWER PATH</text>
        </g>
      )}
      <text x="450" y="370" textAnchor="middle" className="label">빛으로 남길 길을 정하고, 보호되지 않은 구리를 약품으로 제거</text>
    </g>
  );
}

function AOIVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>CAMERA SCAN → DESIGN COMPARISON → REVIEW → PASS / REPAIR / SCRAP</DiagramTitle>
      <rect x="175" y="95" width="550" height="225" rx="6" fill="var(--resin)"></rect>
      <g fill="none" stroke="var(--copper)" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round">
        <path d="M212 135 H350 V175 H458 V134 H688"></path>
        <path d="M212 215 H305 V260 H425 V218 H560 V275 H688"></path>
      </g>
      <rect x="150" y="72" width="600" height="16" rx="8" fill="var(--ink)"></rect>
      <path d="M190 88 L230 116 M710 88 L670 116" stroke="var(--chem)" strokeWidth="4"></path>
      <rect x="185" y="96" width="12" height="223" fill="var(--chem)" opacity="0.6" className="scan-line"></rect>
      {defectMode ? (
        <g>
          <rect x="394" y="208" width="38" height="20" fill="var(--resin)"></rect>
          <circle cx="413" cy="218" r="42" fill="none" stroke="var(--danger)" strokeWidth="3"></circle>
          <path d="M444 187 L778 123" className="leader" style={{ stroke: "var(--danger)" }}></path>
          <text x="788" y="119" className="label" style={{ fill: "var(--danger)" }}>설계와 다른 끊김</text>
          <text x="788" y="137" className="micro" style={{ fill: "var(--danger)" }}>DETECTED BEFORE LAMINATION</text>
        </g>
      ) : (
        <g>
          <circle cx="690" cy="287" r="30" fill="var(--green)"></circle>
          <path d="M676 287 l10 10 19-24" fill="none" stroke="white" strokeWidth="6" strokeLinecap="round"></path>
          <text x="778" y="277" className="label">적층 투입 가능</text>
          <text x="778" y="295" className="micro">VERIFIED INNER LAYER</text>
        </g>
      )}
      <text x="450" y="370" textAnchor="middle" className="label">벽을 닫기 전에 내부 회로의 단선·합선을 마지막으로 확인</text>
    </g>
  );
}

function OuterCircuitVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>OUTER IMAGING → PATTERN PLATING → ETCH → OUTER AOI</DiagramTitle>
      <rect x="173" y="104" width="554" height="212" rx="5" fill="var(--resin)"></rect>
      <g fill="var(--copper)">
        <rect x="173" y="104" width="160" height="17" rx="7"></rect>
        <rect x="390" y="104" width="150" height="17" rx="7"></rect>
        <rect x="594" y="104" width="133" height="17" rx="7"></rect>
        <rect x="173" y="299" width="122" height="17" rx="7"></rect>
        <rect x="355" y="299" width="180" height="17" rx="7"></rect>
        <rect x="590" y="299" width="137" height="17" rx="7"></rect>
        <circle cx="365" cy="210" r="52"></circle>
        <circle cx="365" cy="210" r="25" fill="var(--paper-2)"></circle>
        <circle cx="565" cy="210" r="52"></circle>
        <circle cx="565" cy="210" r="25" fill="var(--paper-2)"></circle>
      </g>
      <path d="M188 202 H313 M417 202 H513 M617 202 H704" stroke="var(--copper)" strokeWidth="16" strokeLinecap="round"></path>
      {defectMode ? (
        <g>
          <path d="M470 202 H492" stroke="var(--danger)" strokeWidth="20" strokeLinecap="round"></path>
          <circle cx="480" cy="202" r="35" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <path d="M480 202 L787 145" className="leader" style={{ stroke: "var(--danger)" }}></path>
          <text x="797" y="141" className="label" style={{ fill: "var(--danger)" }}>잔동·브리지</text>
          <text x="797" y="159" className="micro" style={{ fill: "var(--danger)" }}>SHORT RISK</text>
        </g>
      ) : (
        <g>
          <path d="M565 155 L777 103" className="leader"></path>
          <text x="787" y="99" className="label">부품 패드·외부 배선</text>
          <text x="787" y="117" className="micro">FINAL OUTER CONNECTION</text>
        </g>
      )}
      <text x="450" y="370" textAnchor="middle" className="label">도금홀과 부품 패드를 바깥 회로로 연결해 조립 인터페이스 완성</text>
    </g>
  );
}

function MaskVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>COAT → PRE-DRY → EXPOSE → DEVELOP → FINAL CURE</DiagramTitle>
      <rect x="165" y="125" width="570" height="170" rx="5" fill="var(--resin)"></rect>
      <rect x="165" y="125" width="570" height="12" fill="var(--copper)"></rect>
      <rect x="165" y="283" width="570" height="12" fill="var(--copper)"></rect>
      <g fill="var(--mask-color)">
        <path d="M165 108 H310 V122 H376 V108 H524 V122 H590 V108 H735 V125 H165z"></path>
        <path d="M165 295 H310 V312 H376 V298 H524 V312 H590 V298 H735 V314 H165z"></path>
      </g>
      <g fill="var(--copper)">
        <rect x="310" y="117" width="66" height="20" rx="8"></rect>
        <rect x="524" y="117" width="66" height="20" rx="8"></rect>
        <rect x="310" y="283" width="66" height="20" rx="8"></rect>
        <rect x="524" y="283" width="66" height="20" rx="8"></rect>
      </g>
      {defectMode ? (
        <g>
          <rect x="292" y="104" width="51" height="24" rx="7" fill="var(--mask-color)"></rect>
          <circle cx="326" cy="121" r="35" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <path d="M326 121 L790 88" className="leader" style={{ stroke: "var(--danger)" }}></path>
          <text x="800" y="84" className="label" style={{ fill: "var(--danger)" }}>패드 일부 덮임</text>
          <text x="800" y="102" className="micro" style={{ fill: "var(--danger)" }}>MASK MISREGISTRATION</text>
        </g>
      ) : (
        <g>
          <path d="M557 116 L786 85" className="leader"></path>
          <text x="796" y="81" className="label">접촉할 패드만 개방</text>
          <text x="796" y="99" className="micro">OPEN ONLY WHERE NEEDED</text>
        </g>
      )}
      <text x="450" y="362" textAnchor="middle" className="label">보호할 회로는 덮고, 납땜·접촉할 패드만 정확히 열어 둠</text>
    </g>
  );
}

function FinishVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>CLEAN → ACTIVATE → SURFACE FINISH → RINSE → THICKNESS CHECK</DiagramTitle>
      <rect x="165" y="132" width="570" height="160" rx="5" fill="var(--resin)"></rect>
      <path d="M165 115 H300 V132 H390 V115 H510 V132 H600 V115 H735 V142 H165z" fill="var(--mask-color)"></path>
      <g fill="var(--copper)">
        <rect x="300" y="122" width="90" height="20" rx="8"></rect>
        <rect x="510" y="122" width="90" height="20" rx="8"></rect>
      </g>
      <g fill="var(--gold)">
        <rect x="300" y="115" width="90" height="9" rx="4"></rect>
        <rect x="510" y="115" width="90" height="9" rx="4"></rect>
      </g>
      <path d="M345 94 V55 M555 94 V55" stroke="var(--chem)" strokeWidth="3" strokeDasharray="6 6"></path>
      <path d="M337 68 l8-14 8 14 M547 68 l8-14 8 14" fill="none" stroke="var(--chem)" strokeWidth="3"></path>
      {defectMode ? (
        <g>
          <rect x="542" y="115" width="20" height="9" fill="var(--copper)"></rect>
          <circle cx="552" cy="119" r="33" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <path d="M552 119 L785 89" className="leader" style={{ stroke: "var(--danger)" }}></path>
          <text x="795" y="85" className="label" style={{ fill: "var(--danger)" }}>부분 미도금</text>
          <text x="795" y="103" className="micro" style={{ fill: "var(--danger)" }}>OXIDATION / CONTACT RISK</text>
        </g>
      ) : (
        <g>
          <path d="M600 118 L786 88" className="leader"></path>
          <text x="796" y="84" className="label">산화 방지 접점</text>
          <text x="796" y="102" className="micro">SOLDER / CONTACT SURFACE</text>
        </g>
      )}
      <text x="450" y="350" textAnchor="middle" className="label">솔더마스크로 열린 구리 패드만 목적에 맞는 금속으로 마감</text>
    </g>
  );
}

function RoutingVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>PROFILE DATA → FIX → ROUTE / V-CUT → CLEAN → DIMENSION CHECK</DiagramTitle>
      <rect x="154" y="72" width="592" height="280" rx="6" fill="var(--copper-soft)" stroke="var(--faint)" strokeWidth="2"></rect>
      <rect x="225" y="110" width="450" height="205" rx="18" fill="var(--resin)" stroke="var(--copper)" strokeWidth="3"></rect>
      <g fill="var(--copper)">
        <circle cx="305" cy="170" r="28"></circle><circle cx="305" cy="170" r="12" fill="var(--paper-2)"></circle>
        <circle cx="595" cy="170" r="28"></circle><circle cx="595" cy="170" r="12" fill="var(--paper-2)"></circle>
        <path d="M275 255 H625" stroke="var(--copper)" strokeWidth="13" strokeLinecap="round"></path>
      </g>
      <rect x="210" y="95" width="480" height="235" rx="27" fill="none" stroke={defectMode ? "var(--danger)" : "var(--chem)"} strokeWidth="3" strokeDasharray="10 8"></rect>
      <g transform="translate(690 271)">
        <circle r="23" fill="var(--ink)"></circle>
        <path d="M-8 -14 L8 14 M8 -14 L-8 14" stroke="var(--paper-2)" strokeWidth="3"></path>
      </g>
      {defectMode ? (
        <g>
          <path d="M210 217 Q190 240 227 258" className="danger-line"></path>
          <circle cx="214" cy="237" r="34" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <text x="791" y="119" className="label" style={{ fill: "var(--danger)" }}>외형 경로 이탈</text>
          <text x="791" y="137" className="micro" style={{ fill: "var(--danger)" }}>DIMENSION / CRACK RISK</text>
        </g>
      ) : (
        <g>
          <path d="M676 300 L790 319" className="leader"></path>
          <text x="800" y="316" className="label">고객 도면 외곽</text>
          <text x="800" y="334" className="micro">FINAL PRODUCT SHAPE</text>
        </g>
      )}
      <text x="450" y="389" textAnchor="middle" className="label">생산용 패널에서 고객이 사용할 개별 보드 형상으로 분리</text>
    </g>
  );
}

function ETestVisual({ defectMode }) {
  return (
    <g>
      <DiagramTitle>TEST DATA → PROBE CONTACT → CONTINUITY → ISOLATION → JUDGEMENT</DiagramTitle>
      <rect x="168" y="96" width="564" height="220" rx="8" fill="var(--resin)"></rect>
      <g fill="none" stroke="var(--copper)" strokeWidth="13" strokeLinecap="round" strokeLinejoin="round">
        <path d="M223 151 H355 V206 H512 V151 H677"></path>
        <path d="M223 267 H390 V244 H677"></path>
      </g>
      <g fill="var(--copper)">
        <circle cx="223" cy="151" r="23"></circle><circle cx="677" cy="151" r="23"></circle>
        <circle cx="223" cy="267" r="23"></circle><circle cx="677" cy="244" r="23"></circle>
      </g>
      <path d="M223 56 V126 M677 56 V126" stroke="var(--ink)" strokeWidth="5"></path>
      <path d="M211 56 h24 l-12 25z M665 56 h24 l-12 25z" fill="var(--ink)"></path>
      <path d="M223 151 H355 V206 H512 V151 H677" fill="none" stroke={defectMode ? "var(--danger)" : "var(--green)"} strokeWidth="4" strokeDasharray="7 6" className="test-flow"></path>
      {defectMode ? (
        <g>
          <rect x="421" y="196" width="28" height="20" fill="var(--resin)"></rect>
          <circle cx="435" cy="206" r="35" className="pulse-ring" style={{ stroke: "var(--danger)" }}></circle>
          <text x="788" y="123" className="label" style={{ fill: "var(--danger)" }}>OPEN</text>
          <text x="788" y="141" className="micro" style={{ fill: "var(--danger)" }}>CONTINUITY FAIL</text>
        </g>
      ) : (
        <g>
          <circle cx="785" cy="112" r="28" fill="var(--green)"></circle>
          <path d="M772 112 l9 9 18-22" fill="none" stroke="white" strokeWidth="5" strokeLinecap="round"></path>
          <text x="825" y="108" className="label">연결·절연 합격</text>
          <text x="825" y="126" className="micro">ELECTRICALLY VERIFIED</text>
        </g>
      )}
      <text x="450" y="370" textAnchor="middle" className="label">이어질 곳은 이어지고, 분리될 곳은 분리됐음을 전기로 증명</text>
    </g>
  );
}

function ShippingVisual({ defectMode }) {
  const checks = ["외관", "치수", "표기", "수량", "성적서", "포장"];
  return (
    <g>
      <DiagramTitle>VISUAL → DIMENSION → ID → DOCUMENT → PACK → RELEASE</DiagramTitle>
      <rect x="132" y="94" width="400" height="225" rx="14" fill="var(--resin)"></rect>
      <g fill="var(--copper)">
        <circle cx="222" cy="164" r="28"></circle><circle cx="222" cy="164" r="12" fill="var(--paper-2)"></circle>
        <circle cx="442" cy="164" r="28"></circle><circle cx="442" cy="164" r="12" fill="var(--paper-2)"></circle>
        <path d="M190 250 H472" stroke="var(--copper)" strokeWidth="14" strokeLinecap="round"></path>
      </g>
      <g>
        <rect x="578" y="77" width="220" height="272" rx="6" fill="var(--surface-solid)" stroke="var(--hair)" strokeWidth="2"></rect>
        <text x="608" y="112" className="label">FINAL RELEASE</text>
        {checks.map((item, index) => (
          <g key={item} transform={`translate(607 ${143 + index * 31})`}>
            <rect width="18" height="18" rx="3" fill={defectMode && index === 2 ? "var(--danger-soft)" : "var(--chem-soft)"} stroke={defectMode && index === 2 ? "var(--danger)" : "var(--green)"}></rect>
            {!(defectMode && index === 2) && <path d="M4 9 l4 4 7-9" fill="none" stroke="var(--green)" strokeWidth="2.5" strokeLinecap="round"></path>}
            {defectMode && index === 2 && <path d="M4 4 l10 10 M14 4 L4 14" stroke="var(--danger)" strokeWidth="2"></path>}
            <text x="30" y="14" className="label">{item}</text>
          </g>
        ))}
      </g>
      {defectMode ? (
        <g>
          <path d="M618 205 L496 173" className="leader" style={{ stroke: "var(--danger)" }}></path>
          <text x="88" y="340" className="label" style={{ fill: "var(--danger)" }}>품번·라벨 불일치</text>
          <text x="88" y="358" className="micro" style={{ fill: "var(--danger)" }}>MIX-UP RISK</text>
        </g>
      ) : (
        <g>
          <path d="M532 280 L566 300" className="leader"></path>
          <text x="450" y="373" textAnchor="middle" className="label">제품·문서·수량·보호 상태가 모두 맞아야 출하 완료</text>
        </g>
      )}
    </g>
  );
}

Object.assign(window, {
  CuttingVisual,
  InnerCircuitVisual,
  AOIVisual,
  OuterCircuitVisual,
  MaskVisual,
  FinishVisual,
  RoutingVisual,
  ETestVisual,
  ShippingVisual
});
