export function PanelSpreadModel() {
  return (
    <div>
      {/* 헤더 카드 */}
      <div className="rounded-xl p-4 mb-[14px] bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold text-fg font-korean mb-2">
          🔗 항공탐색 데이터 → 유출유 확산예측 연계 체계
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          이문진 박사 특허(등록특허 10-1567431)는{' '}
          <b style={{ color: 'var(--color-accent)' }}>위성영상수신시스템(SST)</b>을
          기상예측시스템·검조소와 함께 인터넷으로 연결하여, 항공탐색 데이터가 실시간 확산 예측의
          핵심 입력자료가 되는 통합 네트워크를 구성합니다.
        </div>
      </div>

      {/* 입력/피드백 2열 카드 */}
      <div className="grid grid-cols-2 gap-3 mb-[14px]">
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            📡 항공탐색 → 모델 입력
          </div>
          <div className="flex flex-col gap-[5px] text-caption font-korean">
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">📍 유출 위치 보정</div>
              <div className="text-fg-disabled">드론·위성 영상 → GPS 좌표 → 모델 유출지점 갱신</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🛢️ 유출량 역산</div>
              <div className="text-fg-disabled">면적×두께 → 유량 추정 → 확산모델 유출량 보정</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🌡️ SST 수온 입력</div>
              <div className="text-fg-disabled">NGSST FTP 수신 → Akima 보간 → 풍화모델 수온값</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🎨 풍화 상태 확인</div>
              <div className="text-fg-disabled">색상 분류 → 증발비 추정 → 풍화모델 초기값 보정</div>
            </div>
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            🔄 모델 → 항공탐색 피드백
          </div>
          <div className="flex flex-col gap-[5px] text-caption font-korean">
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🗺️ 탐색 우선구역 제공</div>
              <div className="text-fg-disabled">확산 예측 결과 → 다음 탐색 집중구역 자동 생성</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">📊 모델 검증 자료</div>
              <div className="text-fg-disabled">
                실측 유출유 위치 ↔ 예측값 오차 분석 → 정확도 평가
              </div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🏖️ ESI 피해 위험구역</div>
              <div className="text-fg-disabled">
                확산경로×ESI 중첩 → 항공탐색 ESI 현장확인 우선순위
              </div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🚢 방제자원 배치안</div>
              <div className="text-fg-disabled">
                예측 도달시간 → 오일펜스·방제정 최적 배치 좌표 제공
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 네트워크 다이어그램 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-3">
          📡 특허 10-1567431 실시간 자료 연계 네트워크 (도면 9)
        </div>
        <div className="flex items-center justify-center gap-0 py-2">
          <div className="flex flex-col gap-[6px] items-start">
            <div
              className="px-3 py-2 rounded-[7px] text-left text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">기상예측시스템</div>
              <div className="text-fg-disabled">바람·기온·기압 · 국립환경과학원</div>
            </div>
            <div
              className="px-3 py-2 rounded-[7px] text-left text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">위성영상수신시스템</div>
              <div className="text-fg-disabled">SST(NGSST) · 토호쿠대학 FTP</div>
            </div>
            <div
              className="px-3 py-2 rounded-[7px] text-left text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">검조소</div>
              <div className="text-fg-disabled">실시간 조위 · 조석정보</div>
            </div>
          </div>
          <div className="flex flex-col items-center justify-center self-stretch px-3 gap-[2px]">
            <div className="flex-1" />
            <div className="w-[30px] h-[1px] bg-stroke-light" />
            <div className="flex-1" />
            <div className="w-[30px] h-[1px] bg-stroke-light" />
            <div className="flex-1" />
            <div className="w-[30px] h-[1px] bg-stroke-light" />
            <div className="flex-1" />
          </div>
          <div
            className="px-5 py-4 rounded-[10px] text-center text-caption font-korean self-center"
            style={{
              background: 'color-mix(in srgb, var(--color-tertiary) 8%, transparent)',
              border: '2px solid color-mix(in srgb, var(--color-tertiary) 30%, transparent)',
            }}
          >
            <div className="text-base mb-1">🖥️</div>
            <div className="font-bold text-fg">서버(WING)</div>
            <div className="text-fg-disabled">
              데이터 수신·처리
              <br />
              모델 구동
            </div>
          </div>
          <div className="w-[30px] h-[1px] bg-stroke-light self-center" />
          <div className="flex flex-col gap-[6px] items-center self-center">
            <div
              className="px-3 py-2 rounded-[7px] text-center text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">클라이언트</div>
              <div className="text-fg-disabled">
                유출지점·유출량
                <br />
                입력 및 결과 수령
              </div>
            </div>
          </div>
        </div>
        <div className="text-caption text-fg-disabled font-korean text-center mt-2">
          기상자료·수온자료·조석정보 실시간 수신 → CHARRY 조류 + 취송류 예측 → 유출유 확산 예측
          (S10→S20→S30)
        </div>
      </div>
    </div>
  );
}
