export function PanelRemoteSensing() {
  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-[10px]">
          🛰️ 위성 원격탐사 — 유출유 탐지 원리
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          해양 유출유는 해수면에 유막을 형성하여 전자기파 반사·방출·산란 특성을 변화시킵니다. 이
          물리적 특성 변화를 위성·항공 센서로 감지하여 유막의 위치·범위·두께를 추정합니다.
        </div>
      </div>

      {/* 원리 4종 그리드 */}
      <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="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            해수면 위 유막은 해수보다 <b style={{ color: 'var(--color-accent)' }}>방사율이 낮아</b>{' '}
            동일 온도에서도 적외선 방출량이 다릅니다. 파장 10~12μm 열적외선 밴드에서 유막과 주변
            해수의{' '}
            <b style={{ color: 'var(--color-accent)' }}>밝기온도(Brightness Temperature) 차이</b>로
            유막을 탐지합니다.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            ⚠️ 구름은 열적외선을 완전 차단 → 마이크로파 보조 필요 (NGSST 융합 이유)
          </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">
            SAR 브래그 산란 원리
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            해수면 위 유막은 <b style={{ color: 'var(--color-accent)' }}>표면장력을 증가</b>시켜
            소파를 억제합니다. SAR에서 해수면 산란의 주원인인{' '}
            <b style={{ color: 'var(--color-accent)' }}>브래그(Bragg) 후방산란이 감소</b>하여 유막
            영역이 어둡게 나타납니다.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            활용: Sentinel-1(C-band) · KOMPSAT-5(X-band) · ALOS PALSAR(L-band)
          </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">UV 형광 탐지 원리</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            석유계 탄화수소에 자외선(310~400nm)을 조사하면{' '}
            <b style={{ color: 'var(--color-accent)' }}>형광 발광</b>합니다. 주야간 모두 활용
            가능하나 야간 효과가 우수합니다. 수μm 수준의 매우 얇은 유막도 탐지 가능한 고감도
            센서입니다.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            적용: 해경 감시 항공기 야간 탐색 · 비정상 유출 신고 확인
          </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">
            수동 마이크로파 복사계는 지구 방출 마이크로파를 수신합니다. 유막이 있으면{' '}
            <b style={{ color: 'var(--color-accent)' }}>방사율 변화</b>로 밝기온도가 달라집니다.
            파장이 길어 구름 완전 투과·야간 관측 가능.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            해상도 한계(50km)로 단독 사용 불가 → 열적외선과 융합 (NGSST 방식)
          </div>
        </div>
      </div>

      {/* 전자해도 카드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div
          className="text-label-2 font-bold font-korean mb-[10px]"
          // style={{ color: 'var(--color-accent)' }}
        >
          🗺️ 전자해도(ENC) 수심자료 처리 — 특허 10-1567431 기반
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="text-caption text-fg-sub font-korean leading-[1.8]">
            항공탐색 좌표 데이터는 <b>전자해도(ENC) 수심격자</b>와 중첩되어 유출유의 수심환경,
            조간대 분포, 해안선 형태를 분석합니다. 수심자료는 국립해양조사원 전자해도 약 300종에서
            추출 후 <b>Akima 보간</b>으로 15초 등간격 격자에 정규화합니다.
          </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-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                원본
              </span>{' '}
              : ENC 전자해도 무작위 측심점
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                삼각망
              </span>{' '}
              : TIN(Triangulated Irregular Network) 구성
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                보간
              </span>{' '}
              : Akima 2차원 5차다항식 (21개 계수)
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                결과
              </span>{' '}
              : 15초(463m) 등간격 · 3,225,600 격자
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
