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

export function OceanInputPanel() {
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div style={labelStyle('var(--fg-default)')}>해양환경 입력 데이터 체계</div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          유출유 확산 예측의 정확도는{' '}
          <b className="text-color-accent">입력 해양·기상 데이터의 품질</b>에 크게 좌우됩니다. WING
          시스템은 국내외 수치예보 모델과 실시간 관측 데이터를 연동하여 모델 정확도를 향상시킵니다.
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-info)')}>기상 입력</div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            {[
              { label: 'KMA RDAPS', desc: '동아시아 12km 해상도 · 24h 예보' },
              { label: 'ECMWF ERA5', desc: '전지구 0.25° 재분석 데이터' },
              { label: 'AWS 자동기상관측', desc: '실시간 10분 단위 풍향·풍속' },
            ].map((t) => (
              <div
                key={t.label}
                className="rounded-md"
                style={{
                  padding: '7px 10px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="font-medium mb-0.5">{t.label}</div>
                <div className="text-fg-default">{t.desc}</div>
              </div>
            ))}
          </div>
        </div>
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>해양 입력</div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            {[
              { label: 'NIFS ROMS', desc: '한국 근해 1km 해류·수온 예보' },
              { label: 'HYCOM', desc: '전지구 1/12° 해양 순환 모델' },
              { label: 'TPXO9 조화분석', desc: '15개 분조 기반 조류 예측' },
            ].map((t) => (
              <div
                key={t.label}
                className="rounded-md"
                style={{
                  padding: '7px 10px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="font-medium mb-0.5">{t.label}</div>
                <div className="text-fg-default">{t.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
