export function HNSManualViewer() {
  const card = 'rounded-md p-4 mb-3';

  return (
    <div
      className="flex-1 overflow-y-auto bg-bg-base"
      style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
    >
      <div className="px-5 py-4 max-w-[1200px] mx-auto">
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-4">
          <div>
            <div className="text-base font-bold">📖 해양 HNS 대응 매뉴얼</div>
            <div className="text-label-2 text-fg-disabled mt-0.5">
              Marine HNS Response Manual — Bonn Agreement / HELCOM / REMPEC (WestMOPoCo 2024
              한국어판)
            </div>
          </div>
        </div>

        {/* 목차 카드 그리드 */}
        <div className="grid mb-5" style={{ gridTemplateColumns: 'repeat(4,1fr)', gap: '10px' }}>
          {[
            {
              icon: '📘',
              title: '1. 서론',
              desc: 'HNS 정의 · OPRC-HNS 의정서 · HNS 협약 범위 및 목적',
              color: 'var(--color-accent)',
            },
            {
              icon: '⚖️',
              title: '2. IMO 협약·의정서·규칙',
              desc: 'SOLAS · MARPOL · IBC Code · IMDG Code · IGC Code',
              color: 'var(--color-accent)',
            },
            {
              icon: '🔬',
              title: '3. HNS 거동 및 유해요소',
              desc: 'SEBC 거동분류 · MSDS · GESAMP · 물리화학적 특성',
              color: 'var(--color-accent)',
            },
            {
              icon: '🛡️',
              title: '4. 대비',
              desc: '위험 평가 · 비상 계획 · 교육훈련 · 장비 비축',
              color: 'var(--color-accent)',
            },
            {
              icon: '🚨',
              title: '5. 대응',
              desc: '최초 조치 · 안전구역 · PPE · 모니터링 · 대응 기술',
              color: 'var(--color-info)',
            },
            {
              icon: '🔄',
              title: '6. 유출 후 관리',
              desc: '비용 문서화 · 환경 회복 · 사고 검토 · 교훈',
              color: 'var(--color-accent)',
            },
            {
              icon: '📋',
              title: '7. 사례연구',
              desc: '실제 HNS 해양사고 사례 분석 및 교훈',
              color: 'var(--color-accent)',
            },
            {
              icon: '📊',
              title: '8. 자료표',
              desc: '물질별 데이터시트 · AEGL · 노출 한계값',
              color: 'var(--color-accent)',
            },
          ].map((ch) => (
            <div
              key={ch.title}
              className={card}
              style={{
                background: 'var(--bg-card)',
                border: '1px solid var(--stroke-default)',
                cursor: 'pointer',
                transition: '.2s',
              }}
            >
              <div className="text-[20px] mb-1.5">{ch.icon}</div>
              <div className="text-label-2 font-bold">{ch.title}</div>
              <div className="text-caption text-fg-disabled mt-1 leading-[1.4]">{ch.desc}</div>
            </div>
          ))}
        </div>

        {/* SEBC 거동 분류 */}
        <div className={`${card} bg-bg-card border border-stroke`}>
          <div className="text-title-4 font-bold mb-2.5">
            SEBC 거동 분류 (Standard European Behaviour Classification)
          </div>
          <div className="text-caption text-fg-disabled mb-2.5 leading-normal">
            물질의 물리적·화학적 특성(용해도, 밀도, 증기압, 점도)에 따라 이론적 거동을 5가지 주요
            범주 + 7가지 하위 범주로 분류
          </div>
          <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(5,1fr)' }}>
            {[
              {
                icon: '💨',
                label: 'G — 가스',
                desc: '대기 중 확산\n증기압 > 101.3kPa\n예: 암모니아, 염소',
                color: 'rgba(139,92,246',
              },
              {
                icon: '🌫️',
                label: 'E — 증발',
                desc: '수면→대기 증발\n증기압 > 3kPa\n예: 벤젠, 톨루엔',
                color: 'rgba(6,182,212',
              },
              {
                icon: '🟡',
                label: 'F — 부유',
                desc: '해수면에 부유\n밀도 < 1.025\n예: 스티렌, 크실렌',
                color: 'rgba(251,191,36',
              },
              {
                icon: '💧',
                label: 'D — 용해',
                desc: '해수에 용해\n용해도 > 5%\n예: 메탄올, 염산',
                color: 'rgba(6,182,212',
              },
              {
                icon: '⬇️',
                label: 'S — 침강',
                desc: '해저로 침강\n밀도 > 1.025\n예: EDC, 사염화탄소',
                color: 'rgba(139,148,158',
              },
            ].map((s) => (
              <div
                key={s.label}
                className="text-center px-[6px] py-[10px] rounded-sm"
                style={{ background: `${s.color},.08)`, border: `1px solid ${s.color},.2)` }}
              >
                <div className="text-[22px] mb-1">{s.icon}</div>
                <div className="text-label-2 font-bold" style={{ color: `${s.color},1)` }}>
                  {s.label}
                </div>
                <div className="text-fg-disabled whitespace-pre-line text-caption mt-[3px] leading-[1.3]">
                  {s.desc}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 출처 */}
        <div className="text-fg-disabled rounded-sm bg-bg-card p-[10px] text-caption leading-[1.5]">
          <b>출처:</b> Marine HNS Response Manual — Bonn Agreement / HELCOM / REMPEC (WestMOPoCo
          Project, 2024 한국어판)
          <br />
          번역: 원해민, 이시연, 양보경, 강성길, 이성엽 — KRISO 선박해양플랜트연구소 / NOWPAP MERRAC
          <br />
          원본: Alcaro L., Brandt J., Giraud W., Mannozzi M., Nicolas-Kopec A. (2021) ISBN:
          978-2-87893-147-1
        </div>
      </div>
    </div>
  );
}
