export function PanelAreaCalc() {
  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="grid grid-cols-2 gap-3 mb-3">
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <div className="text-label-2 font-bold text-fg font-korean mb-2">
              픽셀 분류법 (Pixel Classification)
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
              광학 영상의 각 픽셀을 <b style={{ color: 'var(--color-accent)' }}>반사도·색상·질감</b>
              에 따라 기름/해수로 분류. 분류된 픽셀 수 × GSD² = 면적.
            </div>
            <div className="bg-white/[0.03] rounded-[5px] p-2 font-mono text-caption text-fg leading-[1.8]">
              A = N<sub>oil</sub> × (GSD)<sup>2</sup>
              <br />
              <span className="text-fg-disabled">N: 기름 픽셀수, GSD: 지상 표본거리</span>
            </div>
          </div>
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <div className="text-label-2 font-bold text-fg font-korean mb-2">
              다중분광 지수법 (Spectral Index)
            </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-white/[0.03] rounded-[5px] p-2 font-mono text-caption text-fg leading-[1.8]">
              OSDI = (B<sub>NIR</sub>−B<sub>Red</sub>) / (B<sub>NIR</sub>+B<sub>Red</sub>)
              <br />
              <span className="text-fg-disabled">Oil Spill Detection Index</span>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <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]">
              SAR 영상에서 후방산란계수(σ°)의 임계값 이하를 유막으로 판정합니다. 단, 풍속 3m/s
              이하나 생물막, 강우 영역이 <b style={{ color: 'var(--color-accent)' }}>False Alarm</b>{' '}
              오탐 발생 원인이 됩니다.
            </div>
            <div className="mt-[6px] bg-white/[0.03] rounded-[5px] p-[7px] font-mono text-caption text-fg">
              {'Oil = {(x,y) | σ°(x,y) < T'}
              <sub>th</sub>
              {'}'}
              <br />
              <span className="text-fg-disabled">
                T<sub>th</sub>: 최적 임계값 (국소 적응형)
              </span>
            </div>
          </div>
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <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]">
              면적(A)과 평균 유막 두께(d) 및 풍화 경과 시간(t)으로부터 원래 유출유량(V₀)을
              역산합니다.
            </div>
            <div className="mt-[6px] bg-white/[0.03] rounded-[5px] p-[7px] font-mono text-caption text-fg leading-[1.8]">
              V₀ = A × d / (1 − f<sub>e</sub>(t))
              <br />
              <span className="text-fg-disabled">
                f<sub>e</sub>: 누적 증발비 (Stiver & Mackay 1984)
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Bonn Agreement 색상 코드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold font-korean mb-[10px]">
          🎨 유막 두께 시각적 추정 기준 (Bonn Agreement Color Code)
        </div>
        <div className="grid grid-cols-5 gap-[6px] text-caption font-korean">
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(200,200,255,.3)' }}
            />
            <div className="font-bold text-fg">은회색</div>
            <div className="text-fg-disabled">&lt; 0.1μm</div>
            <div className="text-fg-disabled">광택층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(180,220,180,.4)' }}
            />
            <div className="font-bold text-fg">무지개색</div>
            <div className="text-fg-disabled">0.1~0.3μm</div>
            <div className="text-fg-disabled">박막층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(200,160,80,.5)' }}
            />
            <div className="font-bold text-fg">메탈릭</div>
            <div className="text-fg-disabled">0.3~5μm</div>
            <div className="text-fg-disabled">광택층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(120,90,40,.7)' }}
            />
            <div className="font-bold text-fg">갈색</div>
            <div className="text-fg-disabled">5~200μm</div>
            <div className="text-fg-disabled">두꺼운층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(40,40,40,.9)' }}
            />
            <div className="font-bold text-fg">흑색</div>
            <div className="text-fg-disabled">&gt;200μm</div>
            <div className="text-fg-disabled">농축층</div>
          </div>
        </div>
      </div>
    </div>
  );
}
