export function FluidDynamicsPanel() {
  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">🌊 오일펜스 주변 유동 수치 모델</div>
        <div className="grid grid-cols-2 gap-3.5">
          <div>
            <div className="text-label-2 font-bold mb-2 text-color-info">① 오일펜스 항력 모델</div>
            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
              오일펜스에 작용하는 항력은 조류속도의 제곱에 비례합니다. 오일펜스 구조
              변형(catenary형태)을 고려한 동적 항력 계산.
            </div>
            <div
              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
              style={{ border: '1px solid rgba(59,130,246,.2)' }}
            >
              F<sub>D</sub> = ½ · ρ · C<sub>D</sub> · A · U<sub>n</sub>²<br />T = F<sub>D</sub> · L
              / (2·sin(α))
              <br />
              <span className="text-caption text-fg-default">
                C<sub>D</sub>: 항력계수(≈1.2), A: 수중 투영면적
              </span>
              <br />
              <span className="text-caption text-fg-default">T: 연결부 장력, α: 체인각도</span>
            </div>
          </div>
          <div>
            <div className="text-label-2 font-bold mb-2 text-color-accent">
              ② 기름 통과(Splash-over) 조건
            </div>
            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
              조류 유속이 임계값을 초과하면 기름이 파도를 타고 오일펜스를 넘어가는 Splash-over가
              발생합니다.
            </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)' }}
            >
              Fr = U<sub>n</sub> / √(g·Δρ/ρ·h)
              <br />
              Splash-over: Fr &gt; 0.5~0.6
              <br />
              <span className="text-caption text-fg-default">
                Fr: 수정 Froude수, h: 오일펜스 수중깊이
              </span>
              <br />
              <span className="text-caption text-fg-default">Δρ/ρ: 기름-해수 밀도비 (~0.15)</span>
            </div>
          </div>
        </div>
      </div>

      {/* Catenary 변형 모델 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3">🔗 오일펜스 현수선(Catenary) 변형 모델</div>
        <div className="grid grid-cols-2 gap-3.5">
          <div className="text-label-2 leading-[1.8] text-fg-sub">
            조류와 바람에 의해 오일펜스는 현수선(Catenary) 형태로 변형됩니다. 실제 차단 길이가 설계
            길이보다 짧아지며, 최적화 알고리즘에서 <b>변형 후 유효 차단 길이</b> L<sub>eff</sub>를
            계산합니다.
            <div className="mt-2 rounded-[5px] p-[9px] leading-[2] bg-bg-base font-mono">
              y(x) = a·cosh(x/a) − a<br />L<sub>arc</sub> = 2a·sinh(L<sub>span</sub>/(2a))
              <br />L<sub>eff</sub> = L<sub>span</sub> · cos(φ<sub>max</sub>)<br />
              <span className="text-caption text-fg-default">
                a: catenary 파라미터, φ: 최대 편향각
              </span>
            </div>
          </div>
          <div className="flex flex-col gap-1.5 text-caption text-fg-sub">
            <div className="text-label-2 font-bold mb-1 text-fg-sub">
              변형 단계별 유효 차단 길이 보정
            </div>
            {[
              {
                cond: 'U < 0.3 knot',
                result: 'L_eff ≈ L (직선 유지)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
              },
              {
                cond: '0.3~0.7 knot',
                result: 'L_eff = 0.8~0.95 L (경미 변형)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
              },
              {
                cond: '0.7~1.0 knot',
                result: 'L_eff = 0.5~0.8 L (Catenary 현저)',
                bg: 'rgba(6,182,212,.05)',
                bd: 'rgba(6,182,212,.12)',
              },
              {
                cond: 'U > 1.0 knot',
                result: '기름 통과 위험 · 배치 재계산',
                bg: 'rgba(59,130,246,.05)',
                bd: 'rgba(59,130,246,.12)',
                danger: true,
              },
            ].map((item, i) => (
              <div
                key={i}
                className="px-[9px] py-1.5 rounded-[5px]"
                style={{
                  background: item.bg,
                  border: `1px solid ${item.bd}`,
                  color: item.danger ? 'var(--color-info)' : 'var(--fg-sub)',
                }}
              >
                {item.cond} → {item.result}
              </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">🛢️ 오일펜스 내 유막 포집 동역학</div>
        <div className="grid grid-cols-2 gap-3 text-label-2 text-fg-sub">
          <div>
            <div className="font-bold mb-1.5 text-color-accent">포집 기름 체적 변화율</div>
            <div className="rounded-[5px] p-[9px] leading-[2] bg-bg-base font-mono">
              dV<sub>oil</sub>/dt = Q<sub>in</sub> − Q<sub>out</sub> − Q<sub>loss</sub>
              <br />Q<sub>in</sub> = U<sub>oil</sub>·h<sub>oil</sub>·L<sub>eff</sub>
              <br />Q<sub>out</sub> = Q<sub>skim</sub> (회수기 흡입량)
              <br />Q<sub>loss</sub> = 증발+소산 손실
            </div>
          </div>
          <div>
            <div className="font-bold mb-1.5 text-color-accent">최적 회수 타이밍</div>
            <div className="text-label-2 leading-[1.7] text-fg-sub">
              포집 기름 체적이 오일펜스 저장 용량의 70~80%에 도달하면 Skimmer 회수 작업을
              개시합니다. 이를 초과하면 오일 overflow 발생. WING이 실시간 체적 모니터링 후 회수 알람
              발령.
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
