export function DeploymentTheoryPanel() {
  return (
    <>
      {/* 차단 효율 이론 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3">
          📐 오일펜스 차단 효율 이론 (Boom Containment Efficiency)
        </div>
        <div className="grid grid-cols-2 gap-3.5">
          <div>
            <div className="text-label-2 font-bold mb-2 text-color-accent">
              ① 차단 효율 함수 E(θ, U)
            </div>
            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
              오일펜스의 차단 효율은 <b>조류 유속(U)</b>과 <b>오일펜스 방향각(θ)</b>의 함수입니다.
              조류가 오일펜스에 수직으로 입사할수록 차단 효율이 낮아지며, 임계유속 초과 시 기름이
              오일펜스 하부로 통과합니다.
            </div>
            <div
              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              E(θ,U) = 1 −{' '}
              <span className="text-color-info">
                F<sub>loss</sub>(U<sub>n</sub>)
              </span>
              <br />U<sub>n</sub> = U · sin(θ){' '}
              <span className="text-caption text-fg-default">(법선방향 유속)</span>
              <br />E = 1 (U<sub>n</sub> ≤ U<sub>c</sub>)<br />E = max(0, 1 − (U<sub>n</sub>/U
              <sub>c</sub>)²) (U<sub>n</sub> &gt; U<sub>c</sub>)<br />
              <span className="text-caption text-fg-default">
                U<sub>c</sub>: 임계유속(약 0.35m/s = 0.7 knot)
              </span>
            </div>
          </div>
          <div>
            <div className="text-label-2 font-bold mb-2 text-color-accent">
              ② 최적 방향각 θ* 산정
            </div>
            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
              오일펜스 방향각은 조류 방향에 따라 최적화됩니다. 차단 면적과 오일 수집 효율의{' '}
              <b>트레이드오프</b>를 고려하여, 일반적으로 조류에 대해{' '}
              <b className="text-color-accent">30°~45° 예각 배치</b>가 최적입니다.
            </div>
            <div
              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              θ* = arcsin(U<sub>c</sub> / U){' '}
              <span className="text-caption text-fg-default">(임계조건)</span>
              <br />θ<sub>opt</sub> = argmax [A<sub>block</sub>(θ) · E(θ,U)]
              <br />
              실용범위: 15° ≤ θ ≤ 60°
              <br />
              <span className="text-caption text-fg-default">
                단, θ &lt; arcsin(U<sub>c</sub>/U) 이면 기름 통과 발생
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* V형·U형·J형 배치 패턴 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3">🔷 오일펜스 배치 형태별 이론</div>
        <div className="grid grid-cols-3 gap-3">
          {/* V형 */}
          <div
            className="rounded-lg p-3.5 bg-bg-base"
            style={{
              border: '1px solid rgba(6,182,212,.2)',
            }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-accent">V형 (Chevron)</div>
            <div
              className="flex items-center justify-center p-4 rounded-md mb-2"
              style={{ background: 'rgba(6,182,212,.04)' }}
            >
              <svg width="180" height="120" viewBox="0 0 100 65" className="overflow-visible">
                <defs>
                  <marker
                    id="arr1"
                    markerWidth="6"
                    markerHeight="6"
                    refX="3"
                    refY="3"
                    orient="auto"
                  >
                    <path d="M0,0 L0,6 L6,3 z" fill="rgba(6,182,212,.7)" />
                  </marker>
                </defs>
                <line
                  x1="10"
                  y1="15"
                  x2="50"
                  y2="55"
                  stroke="rgba(6,182,212,.8)"
                  strokeWidth="2.5"
                />
                <line
                  x1="90"
                  y1="15"
                  x2="50"
                  y2="55"
                  stroke="rgba(6,182,212,.8)"
                  strokeWidth="2.5"
                />
                <circle cx="50" cy="10" r="4" fill="rgba(6,182,212,.5)" />
                <text
                  x="50"
                  y="7"
                  textAnchor="middle"
                  fill="rgba(6,182,212,.8)"
                  fontSize="7"
                  fontFamily="monospace"
                >
                  집유점
                </text>
                <line
                  x1="50"
                  y1="58"
                  x2="50"
                  y2="65"
                  stroke="rgba(6,182,212,.7)"
                  strokeWidth="1.5"
                  markerEnd="url(#arr1)"
                />
                <text x="58" y="64" fill="rgba(6,182,212,.7)" fontSize="6">
                  조류
                </text>
              </svg>
            </div>
            <div className="text-label-2 leading-[1.7] mb-[7px] text-fg-sub">
              조류 방향 정면에서 양측으로 펼친 V형. 기름을 중앙 집유점으로 유도. 회수선 배치 용이.
            </div>
            <div
              className="rounded-[5px] p-[7px] text-caption leading-[1.9] font-mono"
              style={{ background: 'rgba(6,182,212,.05)' }}
            >
              A<sub>V</sub> = L²·sin(2α)/2
              <br />
              <span className="text-fg-default">α: 반개각, L: 편측 길이</span>
              <br />
              최적 α = 30°~45°
            </div>
          </div>

          {/* U형 */}
          <div
            className="rounded-lg p-3.5 bg-bg-base"
            style={{
              border: '1px solid rgba(6,182,212,.2)',
            }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-accent">U형 (Horseshoe)</div>
            <div
              className="flex items-center justify-center p-4 rounded-md mb-2"
              style={{ background: 'rgba(6,182,212,.04)' }}
            >
              <svg width="180" height="120" viewBox="0 0 100 65" className="overflow-visible">
                <defs>
                  <marker
                    id="arr2"
                    markerWidth="6"
                    markerHeight="6"
                    refX="3"
                    refY="3"
                    orient="auto"
                  >
                    <path d="M0,0 L0,6 L6,3 z" fill="rgba(6,182,212,.7)" />
                  </marker>
                </defs>
                <path
                  d="M15,10 L15,45 Q50,65 85,45 L85,10"
                  fill="none"
                  stroke="rgba(6,182,212,.8)"
                  strokeWidth="2.5"
                />
                <circle cx="50" cy="52" r="4" fill="rgba(6,182,212,.5)" />
                <text
                  x="50"
                  y="62"
                  textAnchor="middle"
                  fill="rgba(6,182,212,.8)"
                  fontSize="7"
                  fontFamily="monospace"
                >
                  회수선
                </text>
                <line
                  x1="50"
                  y1="0"
                  x2="50"
                  y2="7"
                  stroke="rgba(6,182,212,.7)"
                  strokeWidth="1.5"
                  markerEnd="url(#arr2)"
                />
                <text x="58" y="5" fill="rgba(6,182,212,.7)" fontSize="6">
                  조류
                </text>
              </svg>
            </div>
            <div className="text-label-2 leading-[1.7] mb-[7px] text-fg-sub">
              말굽형으로 기름을 완전 포위. 폐쇄형 구조로 회수 효율 최고. 저조류 해역 적합.
            </div>
            <div
              className="rounded-[5px] p-[7px] text-caption leading-[1.9] font-mono"
              style={{ background: 'rgba(6,182,212,.05)' }}
            >
              A<sub>U</sub> = π·r²/2 + 2r·h
              <br />
              <span className="text-fg-default">r: 반경, h: 직선부 길이</span>
              <br />
              전제: U &lt; 0.5 knot
            </div>
          </div>

          {/* J형 */}
          <div
            className="rounded-lg p-3.5 bg-bg-base"
            style={{
              border: '1px solid rgba(6,182,212,.2)',
            }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-accent">J형 (Skimming)</div>
            <div
              className="flex items-center justify-center p-4 rounded-md mb-2"
              style={{ background: 'rgba(6,182,212,.04)' }}
            >
              <svg width="180" height="120" viewBox="0 0 100 65" className="overflow-visible">
                <defs>
                  <marker
                    id="arr3"
                    markerWidth="6"
                    markerHeight="6"
                    refX="3"
                    refY="3"
                    orient="auto"
                  >
                    <path d="M0,0 L0,6 L6,3 z" fill="rgba(6,182,212,.7)" />
                  </marker>
                </defs>
                <line
                  x1="80"
                  y1="8"
                  x2="80"
                  y2="48"
                  stroke="rgba(6,182,212,.8)"
                  strokeWidth="2.5"
                />
                <path
                  d="M80,48 Q55,60 30,35"
                  fill="none"
                  stroke="rgba(6,182,212,.8)"
                  strokeWidth="2.5"
                />
                <circle cx="79" cy="48" r="4" fill="rgba(6,182,212,.5)" />
                <text x="67" y="43" fill="rgba(6,182,212,.8)" fontSize="7" fontFamily="monospace">
                  회수
                </text>
                <line
                  x1="50"
                  y1="0"
                  x2="50"
                  y2="7"
                  stroke="rgba(6,182,212,.7)"
                  strokeWidth="1.5"
                  markerEnd="url(#arr3)"
                />
                <text x="58" y="5" fill="rgba(6,182,212,.7)" fontSize="6">
                  조류
                </text>
              </svg>
            </div>
            <div className="text-label-2 leading-[1.7] mb-[7px] text-fg-sub">
              직선+곡선 조합. 기름을 한쪽으로 편향 유도하여 집유. 강조류·연안 배치에 최적.
            </div>
            <div
              className="rounded-[5px] p-[7px] text-caption leading-[1.9] font-mono"
              style={{ background: 'rgba(6,182,212,.05)' }}
            >
              θ<sub>J</sub> = arcsin(U<sub>c</sub>/U) + δ<br />
              <span className="text-fg-default">δ: 안전여유각(5°~10°)</span>
              <br />
              활용: U &gt; 0.7 knot
            </div>
          </div>
        </div>
      </div>

      {/* 다단 배치 이론 */}
      <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
        <div className="text-label-2 font-bold mb-2.5">🔢 다단계 차단선(Multi-Boom) 배치 이론</div>
        <div className="grid grid-cols-2 gap-3">
          <div className="text-label-2 leading-[1.8] text-fg-sub">
            단일 오일펜스로 차단 불가한 경우 <b>직렬 다단 배치</b>로 누적 차단 효율을 향상합니다.
            n개 직렬 배치 시 누적 차단 효율:
            <div className="mt-2 rounded-[5px] p-[9px] leading-[2] bg-bg-base font-mono">
              E<sub>total</sub> = 1 − ∏(1−E<sub>i</sub>)<br />
              <span className="text-caption text-fg-default">
                E<sub>i</sub>: i번째 오일펜스 단독 차단효율
              </span>
            </div>
          </div>
          <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
            {[
              {
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
                label: '2단 직렬',
                text: ': E_total = E₁+E₂−E₁·E₂ (예: 70%+70% → 91%)',
              },
              {
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
                label: '단간 거리',
                text: ': 부표 집적 방지를 위해 ≥ 200m 이격 권장',
              },
              {
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
                label: '배치 우선순위',
                text: ': ESI 고등급 구역 보호 → 취수원 → 어항 순',
              },
              {
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
                label: '조석 변화',
                text: ': 창조·낙조 전환 시 오일펜스 방향 재조정 필요',
              },
            ].map((item, i) => (
              <div
                key={i}
                className="px-[9px] py-1.5 rounded-[5px] text-fg-sub"
                style={{ background: item.bg, border: `1px solid ${item.bd}` }}
              >
                <b style={{ color: item.color }}>{item.label}</b>
                {item.text}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}
