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

export function EnsemblePanel() {
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div style={labelStyle('var(--fg-default)')}>앙상블 예측(Ensemble Prediction)</div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          WING 시스템은 3종의 유출유 확산 모델(KOSPS·POSEIDON·OpenDrift)을 동시 운용하여{' '}
          <b className="text-color-accent">앙상블 결과</b>를 생산합니다. 단일 모델 대비 불확실성을
          정량화하고 신뢰 구간을 제공합니다.
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>앙상블 가중 평균</div>
          <div className={`${codeBox} mb-2`}>
            P_ens(x,t) = w₁·P_KOSPS + w₂·P_POSEIDON + w₃·P_OpenDrift
          </div>
          <div className={bodyText}>
            과거 사고 재현 정확도 기반으로 각 모델별 가중치를 동적으로 산정합니다. 기본값: 각 1/3
            균등 가중.
          </div>
        </div>
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>최악 시나리오(Worst Case)</div>
          <div className={bodyText}>
            방제 전략 수립을 위해 3종 모델 중{' '}
            <b className="text-color-accent">가장 넓은 오염 범위</b>를 예측한 결과를 최악 시나리오로
            별도 표시합니다. 의사결정자에게 보수적 방제 계획 수립 근거를 제공합니다.
          </div>
        </div>
      </div>
    </div>
  );
}
