export function PanelOverview() {
  return (
    <div>
      {/* 개요 카드 */}
      <div className="rounded-xl p-5 mb-4 bg-bg-card border border-stroke">
        <div className="grid grid-cols-2 gap-5">
          <div>
            <div className="flex items-center gap-2 mb-2.5">
              <div
                className="w-[30px] h-[30px] rounded-lg flex items-center justify-center text-base bg-bg-elevated border border-stroke"
                // style={{ backgroundColor: 'var(--bg-base)' }}
              >
                📋
              </div>
              <span className="text-label-1 font-bold text-fg font-korean">항공탐색이란?</span>
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.8]">
              해양 유류오염 발생 시{' '}
              <b style={{ color: 'var(--color-accent)' }}>드론·유인항공기·위성</b>을 활용하여
              유출유의 위치·면적·오염형태를 실시간으로 탐지하고, 방제정보지도(ESI)와 연계하여{' '}
              <b style={{ color: 'var(--color-accent)' }}>확산예측 모델의 검증·보정 입력자료</b>로
              활용하는 통합 탐색 체계입니다.
            </div>
          </div>
          <div>
            <div className="flex items-center gap-2 mb-2.5">
              <div
                className="w-[30px] h-[30px] rounded-lg flex items-center justify-center text-base  bg-bg-elevated border border-stroke"
                // style={{ background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)' }}
              >
                🎯
              </div>
              <span className="text-label-1 font-bold text-fg font-korean">WING 항공탐색 목적</span>
            </div>
            <div className="flex flex-col gap-[5px] text-caption text-fg-sub font-korean">
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>①</span>  */}
                유출유 <b>실시간 위치·면적</b> 파악 → 확산예측 초기조건 보정
              </div>
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>②</span>{' '} */}
                <b>수온(SST) 위성자료</b> 실시간 수신 → 유출유 풍화모델 입력
              </div>
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>③</span>{' '} */}
                <b>ESI 환경민감자원</b> 현장 확인 → 방제 우선순위 결정
              </div>
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>④</span>  */}
                드론 <b>3D 재구성</b> → 선박 식별·오염원 정밀 분석
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 통합 흐름 카드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-4">
        <div className="text-label-2 font-bold text-fg font-korean mb-[14px]">
          ⚙️ 항공탐색 → 방제대응 통합 흐름
        </div>
        <div className="flex items-center justify-center gap-0 flex-wrap py-2">
          {[
            { title: '탐지 플랫폼', desc: '드론·항공기·위성' },
            { title: '센서 데이터', desc: '광학·IR·SAR·SST' },
            { title: '영상 처리', desc: '좌표변환·면적산정' },
            { title: '확산모델 입력', desc: '유출위치·유출량·SST' },
            { title: '방제 의사결정', desc: 'ESI 연계·자원 배치' },
          ].map((step, i) => (
            <div key={i} className="contents">
              {i > 0 && (
                <div className="flex items-center gap-0.5 text-fg-disabled">
                  <div className="w-4 h-[1px] bg-stroke-light" />
                  <span className="text-caption leading-none">▶</span>
                </div>
              )}
              <div className="px-4 py-3 rounded-lg text-center text-caption font-korean bg-bg-base border border-stroke">
                <div className="font-bold text-fg">{step.title}</div>
                <div className="text-fg-disabled">{step.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 플랫폼 3종 카드 */}
      <div className="grid grid-cols-3 gap-3">
        <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">드론 (UAV)</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            현장 즉시 투입·저고도 정밀 촬영. 광학·적외선 카메라 탑재, 실시간 영상 전송, 3D 재구성.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              고도: 30~500m · 속도: 15~25m/s
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              GSD: 1~5cm/px (100m 고도 기준)
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              운용반경: 5~30km · 체공: 30~90분
            </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="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            광역 탐색·장시간 체공. 광학·IR·SAR·SLAR·UV 형광 센서 복합 탑재. 해경 해양오염 감시
            항공기.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              고도: 300~3,000m · 속도: 60~150m/s
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              탐색폭: 5~50km · 체공: 4~8시간
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              야간·악기상 SAR 탐지 가능
            </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="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            광역·반복 관측. SST(NOAA AVHRR·NGSST)·SAR(Sentinel-1)·광학(KOMPSAT) 활용. 구름 문제
            존재.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              NGSST: 5km 해상도 · 일 1회 갱신
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              SAR: 5~25m 해상도 · 구름 무관
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              KOMPSAT-5: X-band SAR 1m급
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
