export function PanelDetection() {
  return (
    <div>
      {/* 센서 비교표 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-3">
          🔬 유출유 탐지 센서 종류 및 특성 비교
        </div>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse font-korean text-caption">
            <thead>
              <tr className="bg-white/[0.03] border-b border-stroke-light">
                <th className="px-[10px] py-[7px] text-left text-fg-disabled font-semibold">
                  센서
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  파장대
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  탐지 원리
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  강점
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  한계
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  탑재 플랫폼
                </th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-white/[0.04]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">광학(EO)</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">0.4~0.7μm</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  반사 휘도 차이
                  <br />
                  유막 광택·색조
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  고해상도
                  <br />
                  직관적 식별
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">야간·구름 불가</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">드론·항공기·위성</td>
              </tr>
              <tr className="border-b border-white/[0.04] bg-white/[0.01]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">열적외선(IR)</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">8~14μm</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유막 열방사 차이
                  <br />
                  해수면 온도 대비
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  야간 탐지
                  <br />
                  두께 추정 가능
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  구름 투과 불가
                  <br />
                  얇은 유막 한계
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  드론·항공기
                  <br />
                  NOAA AVHRR
                </td>
              </tr>
              <tr className="border-b border-white/[0.04]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">SAR</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  1~10cm
                  <br />
                  (마이크로파)
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유막 표면장력 증가
                  <br />→ 브래그 후방산란 감소
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  구름·야간 무관
                  <br />
                  광역 탐지
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유사 픽처 오탐
                  <br />
                  고해상도 한계
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  위성(Sentinel-1
                  <br />
                  KOMPSAT-5)
                </td>
              </tr>
              <tr className="border-b border-white/[0.04] bg-white/[0.01]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">SLAR/RAR</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">마이크로파</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  측방향 레이더
                  <br />
                  유막 감쇠대 탐지
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  야간·구름 무관
                  <br />
                  광역 감시선
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  항공기 탑재 전용
                  <br />
                  저해상도
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">해경 감시 항공기</td>
              </tr>
              <tr className="border-b border-white/[0.04]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">UV 형광</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">0.3~0.4μm</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  자외선 조사 → 기름
                  <br />
                  형광 방출
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  박막 유막(μm급)
                  <br />
                  탐지 가능
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  야간 전용
                  <br />
                  주간 오탐 많음
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">항공기</td>
              </tr>
              <tr className="bg-white/[0.01]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">마이크로파 복사계</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  수cm
                  <br />
                  (수동형)
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유막 방사율 변화
                  <br />
                  밝기온도 차이
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  구름 완전 투과
                  <br />
                  야간 가능
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  저해상도(50km)
                  <br />
                  NGSST 혼합 사용
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  AMSR-E 위성
                  <br />
                  (NGSST 융합)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* NGSST 카드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold font-korean mb-[10px]">
          🌡️ NGSST (New Generation SST) 위성 수온자료 — 특허 10-1567431 적용
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="text-caption text-fg-sub font-korean leading-[1.8]">
            일본 토호쿠대학 Kawamura 교수팀이 제공하는 북서태평양 광역 수온자료입니다.{' '}
            <b>열적외선(AVHRR·MODIS)</b>과 <b>마이크로파(AMSR-E)</b>를 융합하여 구름 유무와 관계없이
            일별 수온을 제공합니다.
            <div className="mt-2 bg-bg-base rounded-[6px] p-[10px] font-mono text-caption text-fg leading-[2]">
              SST(℃) = <span>0.15</span> × DN − <span>3.0</span>
              <br />
              <span className="text-fg-disabled">DN: 바이너리 파일 1byte 디지털 수치</span>
            </div>
          </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>{' '}
              : 116~166°E, 13~63°N (북서태평양 50×50°)
            </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>{' '}
              : 3분(약 5km) · 격자 1000×1000
            </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>{' '}
              : 매일 12시 FTP 자동수신 · 최근 5일 합성
            </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(1978) 2차원 5차다항식 → 500m 격자 변환
            </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)' }}>
                WING 활용
              </span>{' '}
              : 유출유 증발·유상화·점도변화 모델 수온 입력
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
