export 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>
    </>
  );
}
