import { card, cardBg, codeBox, labelStyle } from '../OilSpillTheoryView';

export function LagrangianPanel() {
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div style={labelStyle('var(--fg-default)')}>
          🧭 라그랑지안 입자추적법(Lagrangian Particle Tracking)
        </div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          유출유를 수많은 <b className="text-color-accent">가상 입자(Virtual Particle)</b>로
          표현하여, 각 입자의 이동 경로를 시간 단계마다 추적하는 방법입니다.
          KOSPS·POSEIDON·OpenDrift 3종 모두 이 방식을 채택합니다.
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>입자 이동 지배방정식</div>
          <div className={`${codeBox} mb-2.5`}>
            dx/dt = U_c + α·U_w + U_stokes + U&apos;
            <br />
            dy/dt = V_c + α·V_w + V_stokes + V&apos;
          </div>
          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
            <div className="flex gap-2">
              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                U_c, V_c
              </span>
              <span className="text-fg-sub">표층 해류·조류 속도 (m/s)</span>
            </div>
            <div className="flex gap-2">
              <span style={{ color: 'var(--color-info)', fontWeight: 700, width: '60px' }}>
                α·U_w
              </span>
              <span className="text-fg-sub">풍류 기여 (α ≈ 0.03)</span>
            </div>
            <div className="flex gap-2">
              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                U_stokes
              </span>
              <span className="text-fg-sub">스토크스 표류 (파랑 영향)</span>
            </div>
            <div className="flex gap-2">
              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                U&apos;
              </span>
              <span className="text-fg-sub">난류 확산 (랜덤워크)</span>
            </div>
          </div>
        </div>
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-info)')}>난류 확산 (랜덤워크)</div>
          <div className={`${codeBox} mb-2.5`}>
            U&apos; = R · √(2K_h / Δt)
            <br />
            V&apos; = R · √(2K_h / Δt)
          </div>
          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
            <div className="flex gap-2">
              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                R
              </span>
              <span className="text-fg-sub">[-1, 1] 균등분포 난수</span>
            </div>
            <div className="flex gap-2">
              <span style={{ color: 'var(--color-info)', fontWeight: 700, width: '60px' }}>
                K_h
              </span>
              <span className="text-fg-sub">수평 확산 계수 (m²/s)</span>
            </div>
            <div className="flex gap-2">
              <span style={{ color: 'var(--fg-sub)', fontWeight: 700, width: '60px' }}>Δt</span>
              <span className="text-fg-sub">시간 스텝 (일반 1시간)</span>
            </div>
          </div>
        </div>
      </div>

      {/* Fay(1971) 중력-점성 체제 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--color-info)')}>
          🛢️ 표면 유막 확산 — Fay(1971) 중력-점성 체제
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <div className={`${codeBox} mb-2`}>
              <span className="text-fg-default text-label-2">/* 중력-관성 체제 (초기) */</span>
              <br />
              R(t) = <span className="text-color-accent">K₁</span> · (
              <span className="text-color-accent">ΔρgV²</span> /{' '}
              <span className="text-color-info">ρw</span>)<sup>¼</sup> · t<sup>½</sup>
            </div>
            <div className={codeBox}>
              <span className="text-fg-default text-label-2">/* 중력-점성 체제 (후기) */</span>
              <br />
              R(t) = <span className="text-color-accent">K₂</span> · (
              <span className="text-color-accent">ΔρgV²</span> /{' '}
              <span className="text-color-accent">νw</span>)<sup>⅙</sup> · t<sup>¾</sup>
            </div>
          </div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            <div
              className="px-2.5 py-1.5 rounded-md"
              style={{
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(59,130,246,.15)',
              }}
            >
              <span className="text-color-accent font-bold">Δρ</span> : 유류-해수 밀도차 (kg/m³)
            </div>
            <div
              className="px-2.5 py-1.5 rounded-md"
              style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)' }}
            >
              <span className="text-color-accent font-bold">g</span> : 중력가속도 9.81 m/s²
            </div>
            <div
              className="px-2.5 py-1.5 rounded-md"
              style={{
                background: 'rgba(59,130,246,.05)',
                border: '1px solid rgba(59,130,246,.15)',
              }}
            >
              <span style={{ color: 'var(--color-info)', fontWeight: 700 }}>V</span> : 유출 체적
              (m³)
            </div>
            <div
              className="px-2.5 py-1.5 rounded-md"
              style={{
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.15)',
              }}
            >
              <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>νw</span> : 해수
              동점성계수 (m²/s)
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
