export function PanelESIMap() {
  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">
          🗺️ ESI 방제정보지도 (Environmental Sensitivity Index Map)
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          ESI 지도는 이문진 박사 특허(등록특허 10-1567431)의 핵심 기반 데이터입니다. 해안선
          유형·생태민감도·사회경제적 자원 분포를 통합 등급화하여{' '}
          <b style={{ color: 'var(--color-accent)' }}>방제 우선순위 결정</b>의 근거가 됩니다.
          1999~2002년 구축, 해경 인천·태안·군산·목포·완도·제주·여수 관할해역 대상.
        </div>
        <div
          className="mt-2 px-[10px] py-[7px] rounded-[5px] text-caption text-fg-disabled font-korean"
          style={{
            // background: 'color-mix(in srgb, var(--color-base) 6%, transparent)',
            border: '1px solid color-mix(in srgb, var(--color-accent) 15%, transparent)',
          }}
        >
          원전: NOAA ESI Mapping Program · 국내 적용: 해양수산부·한국해양과학기술원
        </div>
      </div>

      {/* ESI 3종 카드 */}
      <div className="grid grid-cols-3 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">
            해안선 분류 (Shoreline)
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            해안선 유형을 1~10 등급으로 분류. 등급이 높을수록 오염 취약·방제 난이도 높음.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              ESI 1~2: 노출 암반·절벽 (낮은 민감도)
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              ESI 5~7: 자갈·모래 해변 (중간)
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              ESI 8~10: 조간대·갯벌·맹그로브 (최고)
            </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">
            생물자원 (Biological Resources)
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            오염 취약 생물 서식지·번식지·이동경로를 위치 기반으로 등록.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              해조류·어류 산란장·양식장
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              철새 도래지·해조류 번식지
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              보호 해양생물 서식구역
            </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">
            인문·사회자원 (Human-Use)
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            경제·사회적 피해 가능 지역을 방제 우선순위 결정에 활용.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              취수원·정수장·발전소 냉각수
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              항구·어항·수산물 위판장
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              해수욕장·관광지·문화재
            </div>
          </div>
        </div>
      </div>

      {/* ESI 구축 현황 */}
      <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">
          📏 ESI 해안선 자료 구축 현황 (등록특허 10-1567431)
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          본 특허의 ESI 기반 데이터는 1999~2002년(약 3년) 구축된 방제정보지도{' '}
          <b className="text-fg">25,000:1 해안선자료</b>를 기반으로 합니다. 매립·준설공사로 변형된
          부분은 국립해양조사원 전자해도(ENC) 해안선으로 보완하였습니다. 항공탐색에서 획득한 최신
          영상 데이터는 이 ESI DB와 실시간 중첩되어 방제 우선구역을 즉시 산출합니다.
        </div>
      </div>
    </div>
  );
}
