import { useState } from 'react';

const boomTabs = [
  { id: 0, label: '개요' },
  { id: 1, label: '배치 이론' },
  { id: 2, label: '최적화 알고리즘' },
  { id: 3, label: '유체역학 모델' },
  { id: 4, label: '현장 적용' },
  { id: 5, label: '참고문헌' },
];

export function BoomDeploymentTheoryView() {
  const [activePanel, setActivePanel] = useState(0);

  const handleExportPDF = () => {
    window.print();
  };

  return (
    <div className="flex flex-col h-full overflow-hidden bg-bg-base">
      <div className="flex-1 overflow-y-auto scrollbar-thin p-5">
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-3">
            <div className="w-[42px] h-[42px] rounded-[10px] bg-bg-elevated border border-stroke flex items-center justify-center text-heading-3">
              🛡️
            </div>
            <div>
              <div className="text-title-2 font-bold">오일펜스 배치 최적화 알고리즘 이론</div>
              <div className="text-label-2 mt-0.5 text-fg-disabled">
                Oil Boom Deployment Optimization · 유출유 확산예측 연동 · 방제효율 최대화
              </div>
            </div>
          </div>
          <button
            onClick={handleExportPDF}
            className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
            style={{
              border: '1px solid rgba(6,182,212,.3)',
              background: 'rgba(6,182,212,.08)',
            }}
          >
            📤 PDF 내보내기
          </button>
        </div>

        {/* 내부 네비게이션 */}
        <div className="mb-5">
          <div className="flex gap-0.5 rounded-lg p-1 bg-bg-card border border-stroke">
            {boomTabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActivePanel(tab.id)}
                className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
                  activePanel === tab.id
                    ? 'border-stroke-light bg-bg-elevated text-fg'
                    : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        {/* ═══ PANEL 0: 개요 ═══ */}
        {activePanel === 0 && <OverviewPanel />}
        {activePanel === 1 && <DeploymentTheoryPanel />}
        {activePanel === 2 && <OptimizationPanel />}
        {activePanel === 3 && <FluidDynamicsPanel />}
        {activePanel === 4 && <FieldApplicationPanel />}
        {activePanel === 5 && <ReferencesPanel />}
      </div>
    </div>
  );
}

/* ──────────── PANEL 0: 개요 ──────────── */
function OverviewPanel() {
  return (
    <>
      {/* 인트로 카드 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="grid grid-cols-2 gap-5">
          <div>
            <div className="text-title-4 font-bold mb-2">오일펜스 배치 최적화란?</div>
            <div className="text-label-2 leading-[1.8] text-fg-sub">
              해양 유류오염 발생 시 <b className="text-color-accent">유출유 확산 예측 결과</b>와
              실시간 해양환경(조류·풍향·파고)을 연동하여, 제한된 방제자원(오일펜스 길이·방제정
              수)으로 <b className="text-color-accent">오염 확산 차단 효율을 최대화</b>하는 최적
              배치 지점·형태·순서를 자동 산출하는 수치 알고리즘 체계입니다.
            </div>
          </div>
          <div>
            <div className="text-title-4 font-bold mb-2">WING 최적화 목표</div>
            <div className="flex flex-col gap-[5px] text-label-2 text-fg-sub">
              {[
                {
                  num: '①',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '차단 면적 최대화 — 예측 유출유 확산 경계와 오일펜스 교차 면적 극대화',
                },
                {
                  num: '②',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '도달시간 최소화 — 유출유 해안·ESI 민감구역 도달 전 선제적 차단선 구축',
                },
                {
                  num: '③',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '자원 효율 최적화 — 가용 오일펜스 길이·방제정 수·이동시간 제약 충족',
                },
                {
                  num: '④',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '실패 안전성 확보 — 조류 초과 시 오일펜스 이탈 방지 방향각 자동 보정',
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="px-2.5 py-1.5 rounded-md"
                  style={{ background: item.bg, border: `1px solid ${item.bd}` }}
                >
                  <span className="font-bold" style={{ color: item.color }}>
                    {item.num}
                  </span>{' '}
                  <b>{item.text}</b>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 전체 흐름도 */}
      <div className="rounded-md p-4 mb-4 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3.5">WING 오일펜스 배치 최적화 전체 흐름</div>
        <div className="flex items-center justify-center gap-0 flex-nowrap overflow-x-auto py-2">
          {[
            {
              icon: '🌊',
              label: '확산예측',
              sub: 'KOSPS/POSEIDON\nOpenDrift',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '📡',
              label: '환경입력',
              sub: '조류·풍향\n파고·수심',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '🗺️',
              label: '차단선 후보',
              sub: '격자탐색\n후보지점 생성',
              color: 'var(--color-caution)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '⚙️',
              label: '최적화 엔진',
              sub: '다목적\n유전알고리즘',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.3)',
              bold: true,
            },
            {
              icon: '✅',
              label: '배치안 출력',
              sub: '좌표·형태\n방향·순서',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '🗺️',
              label: '지도 표시',
              sub: 'ESI 중첩\n방제자원 연계',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.08)',
              bd: 'rgba(59,130,246,.2)',
            },
          ].map((step, i) => (
            <div key={i} className="flex items-center">
              <div
                className="text-center min-w-[80px] rounded-lg px-3 py-2.5 text-caption"
                style={{
                  background: step.bg,
                  border: `${step.bold ? '2px' : '1px'} solid ${step.bd}`,
                }}
              >
                <div className="text-title-2 mb-1">{step.icon}</div>
                <div className="font-bold" style={{ color: step.color }}>
                  {step.label}
                </div>
                <div className="text-fg-disabled" style={{ whiteSpace: 'pre-line' }}>
                  {step.sub}
                </div>
              </div>
              {i < 5 && <div className="px-1.5 text-fg-disabled text-title-3">▶</div>}
            </div>
          ))}
        </div>
      </div>

      {/* 오일펜스 종류 */}
      <div className="grid grid-cols-3 gap-3 mb-4">
        {[
          {
            icon: '⛽',
            title: '고형 오일펜스',
            color: 'var(--color-accent)',
            desc: '단단한 부체와 수중커튼으로 구성. 정적 배치. 항구·좁은 수로에 적합.',
            specs: [
              '내조류 한계: 0.5~1.0 knot',
              '높이: 30~60cm · 수중 30~60cm',
              '전개속도: 30~60m/hr',
            ],
          },
          {
            icon: '🌊',
            title: '공기충전식 오일펜스',
            color: 'var(--color-info)',
            desc: '공기로 부력 확보. 이동·보관 편리. 해상 광역 차단에 주로 사용.',
            specs: [
              '내조류 한계: 0.7~1.5 knot',
              '높이: 45~90cm · 수중 45~90cm',
              '전개속도: 100~300m/hr',
            ],
          },
          {
            icon: '🔄',
            title: '자항식 오일펜스',
            color: 'var(--color-accent)',
            desc: '방제정 예인 또는 자체 추진. U형·V형 동적 배치. 강조류 해역 적합.',
            specs: ['운용수심: 5m 이상', 'U형·V형·J형 동적 형태', '내조류: 조류각도 보정으로 극복'],
          },
        ].map((boom, i) => (
          <div key={i} className="rounded-md p-3.5 bg-bg-card border border-stroke">
            <div className="text-label-2 font-bold mb-2" style={{ color: boom.color }}>
              {boom.icon} {boom.title}
            </div>
            <div className="text-label-2 mb-2 leading-[1.7] text-fg-sub">{boom.desc}</div>
            <div className="flex flex-col gap-[3px] text-caption text-fg-sub">
              {boom.specs.map((spec, j) => (
                <div
                  key={j}
                  className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
                  style={{ background: `${boom.color}11` }}
                >
                  {spec}
                </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 text-color-caution">
          ⚠️ 최적화 핵심 제약조건
        </div>
        <div className="grid grid-cols-3 gap-2.5 text-label-2 text-fg-sub">
          {[
            {
              icon: '🌊',
              title: '조류 제약',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.05)',
              bd: 'rgba(59,130,246,.15)',
              lines: [
                '조류속도 > 임계유속 시',
                '오일펜스 하단 통과 발생',
                'U<0.7 knot 유지 필수',
                '임계각도 자동 계산 적용',
              ],
            },
            {
              icon: '📏',
              title: '자원 제약',
              color: 'var(--color-caution)',
              bg: 'rgba(6,182,212,.05)',
              bd: 'rgba(6,182,212,.15)',
              lines: [
                '가용 오일펜스 총 길이',
                '방제정 척수·이동시간',
                '앵커링 가능 수심 조건',
                '연결부 허용 장력',
              ],
            },
            {
              icon: '⏱️',
              title: '시간 제약',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.05)',
              bd: 'rgba(59,130,246,.15)',
              lines: [
                '유출유 도달 예측시간',
                '오일펜스 전개 소요시간',
                '방제정 현장 도착시간',
                '조석 변환 주기 고려',
              ],
            },
          ].map((c, i) => (
            <div
              key={i}
              className="p-2.5 rounded-[7px]"
              style={{ background: c.bg, border: `1px solid ${c.bd}` }}
            >
              <div className="font-bold mb-[5px]" style={{ color: c.color }}>
                {c.icon} {c.title}
              </div>
              <div className="leading-[1.7] text-fg-sub">
                {c.lines.map((l, j) => (
                  <span key={j}>
                    {j > 0 && <br />}
                    {l}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

/* ──────────── PANEL 1: 배치 이론 ──────────── */
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-disabled">(법선방향 유속)</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-disabled">
                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-disabled">(임계조건)</span>
              <br />θ<sub>opt</sub> = argmax [A<sub>block</sub>(θ) · E(θ,U)]
              <br />
              실용범위: 15° ≤ θ ≤ 60°
              <br />
              <span className="text-caption text-fg-disabled">
                단, θ &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-disabled">α: 반개각, 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-disabled">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-disabled">δ: 안전여유각(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-disabled">
                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>
    </>
  );
}

/* ──────────── PANEL 2: 최적화 알고리즘 ──────────── */
function OptimizationPanel() {
  return (
    <>
      {/* 다목적 최적화 개요 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="text-title-4 font-bold mb-2">
          다목적 최적화 문제 (Multi-Objective Optimization)
        </div>
        <div className="text-label-2 leading-[1.8] text-fg-sub">
          오일펜스 배치 최적화는 <b className="text-color-accent">상충하는 복수 목적함수</b>를
          동시에 만족해야 하는 전형적인 다목적 최적화 문제입니다. 차단 효율 최대화와 자원 사용
          최소화는 서로 트레이드오프 관계를 가지며,{' '}
          <b className="text-color-accent">파레토 최적(Pareto Optimal) 해집합</b>에서 의사결정자가
          선택합니다.
        </div>
      </div>

      {/* 목적함수 정의 */}
      <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 mb-3">
          <div
            className="rounded-lg p-3 bg-bg-base"
            style={{ border: '1px solid rgba(6,182,212,.2)' }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-accent">🎯 목적함수 F(x)</div>
            <div
              className="rounded-[5px] p-[9px] text-label-2 leading-[2.2] font-mono"
              style={{ background: 'rgba(6,182,212,.04)' }}
            >
              <b className="text-color-accent">최대화:</b>
              <br />
              f₁(x) = Σ A<sub>blocked,i</sub> · w<sub>ESI,i</sub>{' '}
              <span className="text-caption text-fg-disabled">(가중 차단면적)</span>
              <br />
              f₂(x) = T<sub>deadline</sub> − T<sub>deploy</sub>{' '}
              <span className="text-caption text-fg-disabled">(여유시간)</span>
              <br />
              <b className="text-color-info">최소화:</b>
              <br />
              f₃(x) = Σ L<sub>boom,j</sub>{' '}
              <span className="text-caption text-fg-disabled">(총 오일펜스 사용량)</span>
              <br />
              f₄(x) = Σ D<sub>vessel,k</sub>{' '}
              <span className="text-caption text-fg-disabled">(방제정 총 이동거리)</span>
            </div>
          </div>
          <div
            className="rounded-lg p-3 bg-bg-base"
            style={{ border: '1px solid rgba(59,130,246,.2)' }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-caution">🚫 제약조건 G(x)</div>
            <div
              className="rounded-[5px] p-[9px] text-label-2 leading-[2.2] font-mono"
              style={{ background: 'rgba(59,130,246,.04)' }}
            >
              g₁: U·sin(θ<sub>i</sub>) ≤ U<sub>c</sub> ∀i{' '}
              <span className="text-caption text-fg-disabled">(임계유속)</span>
              <br />
              g₂: Σ L<sub>j</sub> ≤ L<sub>max</sub>{' '}
              <span className="text-caption text-fg-disabled">(자원 한계)</span>
              <br />
              g₃: T<sub>deploy,i</sub> ≤ T<sub>arrive,i</sub>{' '}
              <span className="text-caption text-fg-disabled">(시간 제약)</span>
              <br />
              g₄: d(p<sub>i</sub>, shore) ≥ d<sub>min</sub>{' '}
              <span className="text-caption text-fg-disabled">(연안 이격)</span>
              <br />
              g₅: h(p<sub>i</sub>) ≥ h<sub>min</sub>{' '}
              <span className="text-caption text-fg-disabled">(수심 조건)</span>
            </div>
          </div>
        </div>

        {/* ESI 가중치 */}
        <div
          className="rounded-lg p-3 bg-bg-base"
          style={{ border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-label-2 font-bold mb-2 text-color-caution">
            🏖️ ESI 가중치 w<sub>ESI</sub> 설계
          </div>
          <div className="grid grid-cols-5 gap-[5px] text-caption text-fg-sub">
            {[
              {
                grade: 'ESI 1~2',
                desc: '노출암반',
                w: 'w = 0.2',
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 3~4',
                desc: '모래해변',
                w: 'w = 0.4',
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 5~6',
                desc: '자갈·조약',
                w: 'w = 0.6',
                color: 'var(--color-caution)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 7~8',
                desc: '갯벌·조간대',
                w: 'w = 0.85',
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 9~10',
                desc: '맹그로브·습지',
                w: 'w = 1.0',
                color: 'var(--color-info)',
                bg: 'rgba(59,130,246,.08)',
                bd: 'rgba(59,130,246,.2)',
              },
            ].map((esi, i) => (
              <div
                key={i}
                className="p-1.5 rounded text-center"
                style={{ background: esi.bg, border: esi.bd ? `1px solid ${esi.bd}` : undefined }}
              >
                <div className="font-bold" style={{ color: esi.color }}>
                  {esi.grade}
                </div>
                <div className="text-fg-disabled">{esi.desc}</div>
                <div className="font-bold">{esi.w}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* NSGA-II 알고리즘 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3 text-color-accent">
          🧬 NSGA-II (Non-dominated Sorting Genetic Algorithm II)
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
              WING의 오일펜스 배치 최적화는 다목적 유전알고리즘{' '}
              <b className="text-color-accent">NSGA-II</b>(Deb et al., 2002)를 핵심 엔진으로
              사용합니다. 파레토 전면(Pareto Front)을 탐색하여 차단 효율과 자원 효율의 최적 해집합을
              제공합니다.
            </div>
            <div className="flex flex-col gap-1 text-caption text-fg-sub">
              {[
                '염색체 구조 : [배치지점 좌표, 방향각θ, 길이L, 형태, 배치순서]',
                '집단 크기 : 100~200개체 · 세대수 50~200',
                '교배 연산 : SBX(Simulated Binary Crossover) · ηc=20',
                '변이 연산 : 다항식 변이(Polynomial Mutation) · ηm=20',
                '선택 방식 : 비지배 정렬 + 혼잡도 거리(Crowding Distance)',
              ].map((item, i) => (
                <div
                  key={i}
                  className="px-2 py-[5px] rounded text-fg-sub"
                  style={{
                    background: 'rgba(6,182,212,.05)',
                    border: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <b className="text-color-accent">{item.split(' : ')[0]}</b> :{' '}
                  {item.split(' : ')[1]}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="text-label-2 font-bold mb-[7px] text-fg-sub">
              NSGA-II 5단계 진화 루프
            </div>
            <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
              {[
                {
                  step: '①',
                  title: '초기 집단 생성',
                  desc: '확산예측 결과 기반 랜덤 + 휴리스틱 배치안 혼합 초기화',
                },
                {
                  step: '②',
                  title: '적합도 평가',
                  desc: '유출유 확산 시뮬레이터로 각 배치안의 차단면적·도달시간 계산',
                },
                {
                  step: '③',
                  title: '비지배 정렬',
                  desc: '목적함수 공간에서 파레토 전면 계층(F₁, F₂, F₃…) 분류',
                },
                {
                  step: '④',
                  title: '교배·변이',
                  desc: 'SBX + 다항식 변이로 자식 세대 생성. 제약조건 위반 수리(repair)',
                },
                {
                  step: '⑤',
                  title: '엘리트 선택',
                  desc: '부모+자식 2N 집단에서 비지배 정렬+혼잡도 기준으로 N개 선택 → 수렴까지 반복',
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="flex gap-2 px-[9px] py-1.5 rounded-[5px]"
                  style={{
                    background: i === 4 ? 'rgba(6,182,212,.05)' : 'rgba(6,182,212,.04)',
                    border: i === 4 ? '1px solid rgba(6,182,212,.12)' : undefined,
                  }}
                >
                  <span className="min-w-[20px] font-extrabold text-color-accent">{item.step}</span>
                  <div className="leading-[1.6] text-fg-sub">
                    <b>{item.title}</b> : {item.desc}
                  </div>
                </div>
              ))}
            </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="overflow-x-auto">
          <table className="w-full text-label-2 border-collapse">
            <thead>
              <tr
                style={{
                  background: 'rgba(255,255,255,.03)',
                  borderBottom: '1px solid var(--stroke-light)',
                }}
              >
                {['알고리즘', '유형', '장점', '단점', 'WING 활용'].map((h) => (
                  <th
                    key={h}
                    className="py-[7px] px-2.5 font-semibold text-fg-disabled"
                    style={{ textAlign: h === '알고리즘' ? 'left' : 'center' }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                {
                  name: 'NSGA-II',
                  color: 'var(--color-accent)',
                  type: '다목적 GA',
                  pros: '파레토 전면 탐색\n다양성 유지 우수',
                  cons: '계산비용 높음\n수렴 느림',
                  wing: '메인 엔진',
                  wingColor: 'var(--color-accent)',
                },
                {
                  name: 'PSO',
                  color: 'var(--color-accent)',
                  type: '입자군집',
                  pros: '빠른 수렴\n구현 단순',
                  cons: '조기수렴\n다목적 취약',
                  wing: '단일목적 빠른 배치',
                  wingColor: 'var(--fg-sub)',
                },
                {
                  name: 'SA',
                  color: 'var(--color-info)',
                  type: '모의담금질',
                  pros: '전역 탈출 우수\n국소최적 회피',
                  cons: '매개변수 민감\n느린 수렴',
                  wing: '긴급 단순 배치',
                  wingColor: 'var(--fg-sub)',
                },
                {
                  name: 'Greedy+휴리스틱',
                  color: 'var(--color-accent)',
                  type: '결정론적',
                  pros: '즉시 결과\n해석 용이',
                  cons: '전역최적 미보장',
                  wing: '실시간 초기 제안',
                  wingColor: 'var(--color-accent)',
                },
              ].map((row, i) => (
                <tr
                  key={i}
                  style={{
                    borderBottom: '1px solid rgba(255,255,255,.04)',
                    background: i % 2 === 1 ? 'rgba(255,255,255,.01)' : undefined,
                  }}
                >
                  <td className="py-[7px] px-2.5 font-bold" style={{ color: row.color }}>
                    {row.name}
                  </td>
                  <td className="py-[7px] px-2.5 text-center text-fg-sub">{row.type}</td>
                  <td className="py-[7px] px-2.5 text-center text-fg-sub whitespace-pre-line">
                    {row.pros}
                  </td>
                  <td className="py-[7px] px-2.5 text-center text-fg-sub whitespace-pre-line">
                    {row.cons}
                  </td>
                  <td className="py-[7px] px-2.5 text-center" style={{ color: row.wingColor }}>
                    {row.wing}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

/* ──────────── PANEL 3: 유체역학 모델 ──────────── */
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-disabled">
                C<sub>D</sub>: 항력계수(≈1.2), A: 수중 투영면적
              </span>
              <br />
              <span className="text-caption text-fg-disabled">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-disabled">
                Fr: 수정 Froude수, h: 오일펜스 수중깊이
              </span>
              <br />
              <span className="text-caption text-fg-disabled">Δρ/ρ: 기름-해수 밀도비 (~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-disabled">
                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>
    </>
  );
}

/* ──────────── PANEL 4: 현장 적용 ──────────── */
function FieldApplicationPanel() {
  const steps = [
    {
      num: 1,
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.05)',
      bd: 'rgba(6,182,212,.15)',
      numBg: 'rgba(6,182,212,.15)',
      numBd: 'rgba(6,182,212,.3)',
      title: '확산예측 결과 분석 — 위협 구역 및 도달시간 산출',
      desc: 'KOSPS·POSEIDON·OpenDrift 앙상블 예측 결과에서 유출유 확산 경계선(Pollution Boundary)과 각 ESI 구역별 도달 예상시간(T_arrive)을 산출합니다. 신뢰도 70% 이상 예측 경계를 기준으로 차단 전략 영역을 설정합니다.',
    },
    {
      num: 2,
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.05)',
      bd: 'rgba(6,182,212,.15)',
      numBg: 'rgba(6,182,212,.15)',
      numBd: 'rgba(6,182,212,.3)',
      title: '해양환경 조건 확인 — 조류·파고·수심·기상 입력',
      desc: 'CHARRY 채리모델 조류예측값, KMA UM 풍속·풍향, 수심격자, NGSST 수온을 자동 연계하여 각 후보 배치지점의 U_n(법선방향 유속)을 계산합니다. 임계유속 0.7 knot를 초과하는 지점은 자동으로 J형·다단 배치로 변환합니다.',
    },
    {
      num: 3,
      color: 'var(--color-caution)',
      bg: 'rgba(6,182,212,.05)',
      bd: 'rgba(6,182,212,.15)',
      numBg: 'rgba(6,182,212,.15)',
      numBd: 'rgba(6,182,212,.3)',
      title: '후보 차단선 격자 탐색 — 배치 가능지점 생성',
      desc: '확산 예측 경계를 따라 500m 간격 격자로 후보 배치지점을 생성합니다. 각 지점에서 조류 조건·수심·해안선 이격·방제정 접근 가능성을 동시 검토합니다. ESI 고등급 구역 전방 2km 이내 지점에 우선 가중치를 부여합니다.',
    },
    {
      num: 4,
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.05)',
      bd: 'rgba(6,182,212,.15)',
      numBg: 'rgba(6,182,212,.15)',
      numBd: 'rgba(6,182,212,.3)',
      title: 'NSGA-II 최적화 실행 — 파레토 최적 배치안 산출',
      desc: '후보 배치지점·방향각·형태 조합을 염색체로 인코딩하여 NSGA-II 다목적 유전알고리즘을 실행합니다. 수렴 후 파레토 전면에서 3~5개 추천 배치안을 제시하며, 의사결정자가 차단 효율과 자원 사용량의 트레이드오프를 보고 선택합니다.',
    },
    {
      num: 5,
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.05)',
      bd: 'rgba(6,182,212,.15)',
      numBg: 'rgba(6,182,212,.15)',
      numBd: 'rgba(6,182,212,.3)',
      title: '실시간 재최적화 — 조석 변환·조류 변화 대응',
      desc: '창조→낙조 전환 시(약 6시간 주기) 조류 방향 역전에 따른 오일펜스 재배치 알람을 발령합니다. 확산 예측이 갱신될 때마다 배치 최적화를 자동 재실행하여 방제대응 체계를 동적으로 업데이트합니다.',
    },
  ];

  return (
    <>
      {/* 배치 5단계 절차 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3">🗺️ WING 오일펜스 배치 의사결정 5단계</div>
        <div className="flex flex-col gap-2">
          {steps.map((step) => (
            <div
              key={step.num}
              className="flex gap-3 items-start p-3 rounded-lg"
              style={{ background: step.bg, border: `1px solid ${step.bd}` }}
            >
              <div
                className="min-w-[36px] h-[36px] rounded-[9px] flex items-center justify-center font-extrabold text-body-2 flex-shrink-0"
                style={{
                  background: step.numBg,
                  border: `1px solid ${step.numBd}`,
                  color: step.color,
                }}
              >
                {step.num}
              </div>
              <div className="text-label-2 text-fg-sub">
                <div className="font-bold mb-1">{step.title}</div>
                <div className="leading-[1.7] text-fg-sub">{step.desc}</div>
              </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-3 gap-2.5 text-caption text-fg-sub">
          {[
            {
              icon: '🌊',
              title: '서해 (조차 대형)',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.05)',
              bd: 'rgba(59,130,246,.12)',
              desc: '최대 조차 9m (인천), 조류 최대 3~5 knot. J형 배치 주력. 조석 전환 재배치 필수. 앵커링 수심 급변화 주의.',
            },
            {
              icon: '🌿',
              title: '남해 (다도해)',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.05)',
              bd: 'rgba(6,182,212,.12)',
              desc: '복잡한 해안선·섬. 조류 1~2 knot. V형·U형 복합 배치. 좁은 수로 통제 우선. ESI 고등급 갯벌 보호.',
            },
            {
              icon: '🏔️',
              title: '동해 (심해형)',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.05)',
              bd: 'rgba(6,182,212,.12)',
              desc: '조차 소(0.3m), 너울·파고 높음. 조류 0.5~1 knot. V형 집중. 고파랑 시 배치 제한. 수온약층 고려.',
            },
          ].map((area, i) => (
            <div
              key={i}
              className="p-2.5 rounded-[7px]"
              style={{ background: area.bg, border: `1px solid ${area.bd}` }}
            >
              <div className="font-bold mb-[5px]" style={{ color: area.color }}>
                {area.icon} {area.title}
              </div>
              <div className="leading-[1.7] text-fg-sub">{area.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

/* ──────────── PANEL 5: 참고문헌 ──────────── */
function ReferencesPanel() {
  const categories = [
    {
      title: '⚙️ 최적화 알고리즘',
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.1)',
      bd: 'rgba(6,182,212,.25)',
      refs: [
        {
          title: 'A Fast and Elitist Multiobjective Genetic Algorithm: NSGA-II',
          author:
            'Deb, K., Pratap, A., Agarwal, S., & Meyarivan, T. | IEEE Trans. Evol. Comput. 6(2):182–197, 2002',
          desc: 'NSGA-II 원전 · 비지배 정렬 + 혼잡도 거리 · 파레토 전면 탐색 알고리즘 · WING 다목적 최적화 엔진의 핵심 이론 기반',
        },
        {
          title:
            'An Emergency Scheduling Model for Oil Containment Boom in Dynamically Changing Marine Oil Spills',
          author:
            'Xu, Y., Zhang, L., Zheng, P., Liu, G., & Zhao, D. | Ningbo University | Systems 2025, 13, 716',
          desc: 'IMOGWO 다목적 최적화 · 오일필름 동적 모델 · 경제·생태 손실 정량화 · 주산해역 케이스 스터디',
          highlight: true,
        },
        {
          title: '등록특허 10-1567431 기반 유출유 확산예측-방제 연동 시스템',
          author: '이문진 외 | 한국해양과학기술원 | 2015',
          desc: 'KOSPS 기반 확산예측-오일펜스 배치 연동 체계 원전 · ESI 방제정보지도 연동 · 취송류 경험식 기반 방향각 산정 근거',
        },
      ],
    },
    {
      title: '🌊 유체역학 이론',
      color: 'var(--color-info)',
      bg: 'rgba(59,130,246,.1)',
      bd: 'rgba(59,130,246,.25)',
      refs: [
        {
          title: 'Oil Boom Failure: Critical Velocity and Boom Design',
          author: 'Leibovich, S. | Annual Review of Fluid Mechanics 8:177–197, 1976',
          desc: '오일펜스 임계유속 이론 원전 · Froude수 기반 Splash-over 조건 · 방향각-차단효율 관계식',
        },
        {
          title: 'Dynamic Behavior of Oil Containment Booms in Currents',
          author: 'Delvigne, G.A.L. | Spill Science & Technology Bulletin 5(3-4):181–196, 1999',
          desc: '조류 중 오일펜스 항력·변형 동역학 · Catenary 형태 해석 · 실용 배치 설계 기준',
        },
        {
          title: 'Oil Boom Containment Efficiency in Waves and Currents',
          author:
            'Wicks, M. | Proceedings of the Joint Conference on Prevention and Control of Oil Spills, 1969',
          desc: '파랑+조류 복합 환경에서 오일펜스 효율 실험 · V형·U형 성능 비교 기초 자료',
        },
        {
          title: 'Experimental, Numerical and Optimisation Study of Oil Spill Containment Boom',
          author:
            'Muttin, F., Guyot, F., Nouchi, S. & Variot, B. | Coastal Environment V, WIT Press, 2004',
          desc: '유체-구조 상호작용 · 1.5D/2.5D 구조모델 · 유전알고리즘 최적화 · SPH 수치해법 · ERIKA·PRESTIGE 사고 검증',
          highlight: true,
        },
      ],
    },
    {
      title: '📐 오일펜스 배치 설계',
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.1)',
      bd: 'rgba(6,182,212,.25)',
      refs: [
        {
          title: 'Optimization of an Oil Boom Arrangement',
          author:
            'Fang, J. & Wong, K.-F.V. | Department of Mechanical Engineering, University of Miami',
          desc: '오일펜스 배치 형태(V형·U형·J형) 최적화 연구 · 조류 방향각과 차단효율 관계 수치 분석 · 방제정 예인각도별 성능 비교',
        },
      ],
    },
    {
      title: '🗺️ 방제 운용 기준',
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.1)',
      bd: 'rgba(6,182,212,.25)',
      refs: [
        {
          title: '기름오염방제시 오일펜스 사용지침 (ITOPF 방제기술정보문서 3)',
          author: 'ITOPF | 해양경찰청·해양환경관리공단 번역 | © 2011 ITOPF Ltd.',
          desc: '커튼형·펜스형·해안용 분류 · 6가지 기름 유실 메커니즘 · 힘 계산 공식 F=100·A·V² · 유속별 최대 설치각도 표',
          highlight: true,
        },
        {
          title: 'NOAA ESI 방제정보지도 기반 오일펜스 우선 배치 전략',
          author:
            'NOAA Office of Response and Restoration | Open Water Oil Identification Manual, 2013',
          desc: 'ESI 1~10 등급별 방제 우선순위 · 오일펜스 가중 배치 전략 · 취수원·어항 보호 기준',
        },
        {
          title: '해양경찰청 해양오염방제 업무매뉴얼 — 오일펜스 전개 절차',
          author: '해양경찰청 해양오염대응국 | 방제업무 기본지침, 최신판',
          desc: '국내 해역 오일펜스 운용 법적 기준 · 방제정 연계 전개 절차 · 서해/남해/동해 해역별 운용 특성',
        },
      ],
    },
  ];

  return (
    <>
      <div className="text-label-1 font-bold mb-1">📚 오일펜스 배치 최적화 이론 근거 문헌</div>
      <div className="text-label-2 mb-3.5 text-fg-disabled">총 12편 · 4개 카테고리</div>

      {categories.map((cat, ci) => (
        <div key={ci} className="mb-4">
          <div
            className="text-label-2 font-bold mb-[7px] flex items-center gap-1.5"
            style={{ color: cat.color }}
          >
            <span
              className="px-[7px] py-0.5 rounded"
              style={{ background: cat.bg, border: `1px solid ${cat.bd}` }}
            >
              {cat.title}
            </span>
          </div>
          <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
            {cat.refs.map((ref, ri) => (
              <div
                key={ri}
                className="p-[9px] px-3 rounded-[7px] grid gap-2"
                style={{
                  gridTemplateColumns: '24px 1fr',
                  background: 'var(--bg-card)',
                  border: ref.highlight ? `1px solid ${cat.bd}` : '1px solid var(--stroke-default)',
                }}
              >
                <div
                  className="w-[22px] h-[22px] rounded flex items-center justify-center text-label-2 flex-shrink-0"
                  style={{
                    background: ref.highlight ? `${cat.bg}` : `${cat.bg.replace('.1', '.12')}`,
                    fontWeight: ref.highlight ? 700 : undefined,
                    color: ref.highlight ? cat.color : undefined,
                  }}
                >
                  {ri + 1 === 1 ? '①' : ri + 1 === 2 ? '②' : ri + 1 === 3 ? '③' : '④'}
                </div>
                <div>
                  <div className="font-bold mb-0.5">{ref.title}</div>
                  <div className="leading-[1.6] text-fg-disabled">{ref.author}</div>
                  <div className="mt-0.5 text-fg-sub">{ref.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </>
  );
}