import { cardBg } from '../HNSTheoryView';

export function SubstanceScenarioPanel() {
  return (
    <>
      <div className="grid grid-cols-2 gap-4 mb-4">
        {/* 암모니아 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🧪</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                암모니아 (NH₃)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              독성 ★★★
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '-33°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.682', label: '비중', color: 'var(--color-accent)' },
              { val: '300 ppm', label: 'IDLH', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 해수면 유출 시 <b style={{ color: 'var(--color-accent)' }}>급속 기화</b> → Flash
              Evaporation
            </div>
            <div>
              • 2D 기화율:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                ṁ = 0.0168t − 0.01
              </span>
            </div>
            <div>
              • 3D 기화율:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                ṁ = 0.0182t − 0.0112
              </span>
            </div>
            <div>
              • 독성 구름 풍하측 <b style={{ color: 'var(--color-accent)' }}>최대 10km</b>까지 영향
            </div>
          </div>
        </div>

        {/* 메탄올 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🧫</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                메탄올 (CH₃OH)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              인화성+독성
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '64.7°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.791', label: '비중', color: 'var(--color-accent)' },
              { val: '6,000 ppm', label: 'IDLH', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 수용성 → 해수 용해 + 증발 <b style={{ color: 'var(--color-accent)' }}>복합 거동</b>
            </div>
            <div>
              • 인화점{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                11°C
              </span>{' '}
              → 상온에서 증기 인화 위험
            </div>
            <div>
              • 무색·무취 → <b style={{ color: 'var(--color-accent)' }}>감지 어려움</b>, 계측기 필수
            </div>
            <div>
              • LFL~UFL:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                6.0% ~ 36.5%
              </span>
            </div>
          </div>
        </div>

        {/* 수소 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                수소 (H₂)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              폭발성 ★★★
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '-253°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.071', label: '비중', color: 'var(--color-accent)' },
              { val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 공기보다 <b style={{ color: 'var(--color-accent)' }}>14배 가벼움</b> → 급속 상승
              확산
            </div>
            <div>
              • LFL~UFL:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                4.0% ~ 75.0%
              </span>{' '}
              (극넓은 가연범위)
            </div>
            <div>
              • 점화에너지{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                0.017 mJ
              </span>{' '}
              (정전기로도 폭발)
            </div>
            <div>
              • Puff 모델 필수 → <b style={{ color: 'var(--color-accent)' }}>BLEVE/VCE</b> 시나리오
            </div>
          </div>
        </div>

        {/* LNG */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🔵</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                LNG (CH₄)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              인화성 ★★
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '-162°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.450', label: '비중', color: 'var(--color-accent)' },
              { val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 극저온 유출 시 <b style={{ color: 'var(--color-accent)' }}>RPT</b>(Rapid Phase
              Transition) 발생
            </div>
            <div>
              • 해수면 Pool 형성 → 기화율{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                0.025t
              </span>
            </div>
            <div>
              • 가연범위:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                5.0% ~ 15.0%
              </span>
            </div>
            <div>
              • 초기 냉각 증기 → <b style={{ color: 'var(--color-accent)' }}>지표면 체류</b> 후 상승
            </div>
          </div>
        </div>
      </div>

      {/* 물질별 AEGL 비교표 */}
      <div className={`${cardBg} rounded-[10px] p-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '12px',
          }}
        >
          📊 물질별 AEGL/ERPG 기준 비교 (ppm, 1시간 노출)
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(5,1fr)',
            gap: '8px',
            fontSize: 'var(--font-size-caption)',
          }}
        >
          {/* 헤더 */}
          <div
            style={{
              padding: '8px',
              background: 'var(--bg-base)',
              borderRadius: '6px',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '4px',
              }}
            >
              기준
            </div>
            <div style={{ fontWeight: 700, color: 'var(--fg-default)' }}>등급</div>
          </div>
          {[
            { icon: '🧪', label: 'NH₃', color: 'var(--color-accent)' },
            { icon: '🧫', label: 'MeOH', color: 'var(--color-accent)' },
            { icon: '⚡', label: 'H₂', color: 'var(--color-accent)' },
            { icon: '🔵', label: 'LNG', color: 'var(--color-accent)' },
          ].map((item) => (
            <div
              key={item.label}
              style={{
                padding: '8px',
                background: 'var(--bg-base)',
                borderRadius: '6px',
                textAlign: 'center',
              }}
            >
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--fg-disabled)',
                  marginBottom: '4px',
                }}
              >
                {item.icon}
              </div>
              <div style={{ fontWeight: 700, color: item.color }}>{item.label}</div>
            </div>
          ))}
          {/* AEGL-1 */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            AEGL-1
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            30
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            670
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          {/* AEGL-2 */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            AEGL-2
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            160
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            2,100
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          {/* AEGL-3 */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            AEGL-3
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
            className="font-mono"
          >
            1,100
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
            className="font-mono"
          >
            14,000
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          {/* LFL */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            LFL (%)
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            15.0
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            6.0
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
            className="font-mono"
          >
            4.0
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            5.0
          </div>
        </div>
        <div
          style={{
            marginTop: '8px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-disabled)',
          }}
        >
          ※ H₂, LNG는 독성이 아닌 질식/인화성 위험으로 AEGL 대신 LFL/UFL, 과압(kPa) 기준 적용
        </div>
      </div>
    </>
  );
}
