export function ReferencesPanel() {
  const categories = [
    {
      title: '⚙️ 최적화 알고리즘',
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.1)',
      bd: 'rgba(6,182,212,.25)',
      refs: [
        {
          title: 'A Fast and Elitist Multiobjective Genetic Algorithm: NSGA-II',
          author:
            'Deb, K., Pratap, A., Agarwal, S., & Meyarivan, T. | IEEE Trans. Evol. Comput. 6(2):182–197, 2002',
          desc: 'NSGA-II 원전 · 비지배 정렬 + 혼잡도 거리 · 파레토 전면 탐색 알고리즘 · WING 다목적 최적화 엔진의 핵심 이론 기반',
        },
        {
          title:
            'An Emergency Scheduling Model for Oil Containment Boom in Dynamically Changing Marine Oil Spills',
          author:
            'Xu, Y., Zhang, L., Zheng, P., Liu, G., & Zhao, D. | Ningbo University | Systems 2025, 13, 716',
          desc: 'IMOGWO 다목적 최적화 · 오일필름 동적 모델 · 경제·생태 손실 정량화 · 주산해역 케이스 스터디',
          highlight: true,
        },
        {
          title: '등록특허 10-1567431 기반 유출유 확산예측-방제 연동 시스템',
          author: '이문진 외 | 한국해양과학기술원 | 2015',
          desc: 'KOSPS 기반 확산예측-오일펜스 배치 연동 체계 원전 · ESI 방제정보지도 연동 · 취송류 경험식 기반 방향각 산정 근거',
        },
      ],
    },
    {
      title: '🌊 유체역학 이론',
      color: 'var(--color-info)',
      bg: 'rgba(59,130,246,.1)',
      bd: 'rgba(59,130,246,.25)',
      refs: [
        {
          title: 'Oil Boom Failure: Critical Velocity and Boom Design',
          author: 'Leibovich, S. | Annual Review of Fluid Mechanics 8:177–197, 1976',
          desc: '오일펜스 임계유속 이론 원전 · Froude수 기반 Splash-over 조건 · 방향각-차단효율 관계식',
        },
        {
          title: 'Dynamic Behavior of Oil Containment Booms in Currents',
          author: 'Delvigne, G.A.L. | Spill Science & Technology Bulletin 5(3-4):181–196, 1999',
          desc: '조류 중 오일펜스 항력·변형 동역학 · Catenary 형태 해석 · 실용 배치 설계 기준',
        },
        {
          title: 'Oil Boom Containment Efficiency in Waves and Currents',
          author:
            'Wicks, M. | Proceedings of the Joint Conference on Prevention and Control of Oil Spills, 1969',
          desc: '파랑+조류 복합 환경에서 오일펜스 효율 실험 · V형·U형 성능 비교 기초 자료',
        },
        {
          title: 'Experimental, Numerical and Optimisation Study of Oil Spill Containment Boom',
          author:
            'Muttin, F., Guyot, F., Nouchi, S. & Variot, B. | Coastal Environment V, WIT Press, 2004',
          desc: '유체-구조 상호작용 · 1.5D/2.5D 구조모델 · 유전알고리즘 최적화 · SPH 수치해법 · ERIKA·PRESTIGE 사고 검증',
          highlight: true,
        },
      ],
    },
    {
      title: '📐 오일펜스 배치 설계',
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.1)',
      bd: 'rgba(6,182,212,.25)',
      refs: [
        {
          title: 'Optimization of an Oil Boom Arrangement',
          author:
            'Fang, J. & Wong, K.-F.V. | Department of Mechanical Engineering, University of Miami',
          desc: '오일펜스 배치 형태(V형·U형·J형) 최적화 연구 · 조류 방향각과 차단효율 관계 수치 분석 · 방제정 예인각도별 성능 비교',
        },
      ],
    },
    {
      title: '🗺️ 방제 운용 기준',
      color: 'var(--color-accent)',
      bg: 'rgba(6,182,212,.1)',
      bd: 'rgba(6,182,212,.25)',
      refs: [
        {
          title: '기름오염방제시 오일펜스 사용지침 (ITOPF 방제기술정보문서 3)',
          author: 'ITOPF | 해양경찰청·해양환경관리공단 번역 | © 2011 ITOPF Ltd.',
          desc: '커튼형·펜스형·해안용 분류 · 6가지 기름 유실 메커니즘 · 힘 계산 공식 F=100·A·V² · 유속별 최대 설치각도 표',
          highlight: true,
        },
        {
          title: 'NOAA ESI 방제정보지도 기반 오일펜스 우선 배치 전략',
          author:
            'NOAA Office of Response and Restoration | Open Water Oil Identification Manual, 2013',
          desc: 'ESI 1~10 등급별 방제 우선순위 · 오일펜스 가중 배치 전략 · 취수원·어항 보호 기준',
        },
        {
          title: '해양경찰청 해양오염방제 업무매뉴얼 — 오일펜스 전개 절차',
          author: '해양경찰청 해양오염대응국 | 방제업무 기본지침, 최신판',
          desc: '국내 해역 오일펜스 운용 법적 기준 · 방제정 연계 전개 절차 · 서해/남해/동해 해역별 운용 특성',
        },
      ],
    },
  ];

  return (
    <>
      <div className="text-label-1 font-bold mb-1">📚 오일펜스 배치 최적화 이론 근거 문헌</div>
      <div className="text-label-2 mb-3.5 text-fg-default">총 12편 · 4개 카테고리</div>

      {categories.map((cat, ci) => (
        <div key={ci} className="mb-4">
          <div
            className="text-label-2 font-bold mb-[7px] flex items-center gap-1.5"
            style={{ color: cat.color }}
          >
            <span
              className="px-[7px] py-0.5 rounded"
              style={{ background: cat.bg, border: `1px solid ${cat.bd}` }}
            >
              {cat.title}
            </span>
          </div>
          <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
            {cat.refs.map((ref, ri) => (
              <div
                key={ri}
                className="p-[9px] px-3 rounded-[7px] grid gap-2"
                style={{
                  gridTemplateColumns: '24px 1fr',
                  background: 'var(--bg-card)',
                  border: ref.highlight ? `1px solid ${cat.bd}` : '1px solid var(--stroke-default)',
                }}
              >
                <div
                  className="w-[22px] h-[22px] rounded flex items-center justify-center text-label-2 flex-shrink-0"
                  style={{
                    background: ref.highlight ? `${cat.bg}` : `${cat.bg.replace('.1', '.12')}`,
                    fontWeight: ref.highlight ? 700 : undefined,
                    color: ref.highlight ? cat.color : undefined,
                  }}
                >
                  {ri + 1 === 1 ? '①' : ri + 1 === 2 ? '②' : ri + 1 === 3 ? '③' : '④'}
                </div>
                <div>
                  <div className="font-bold mb-0.5">{ref.title}</div>
                  <div className="leading-[1.6] text-fg-default">{ref.author}</div>
                  <div className="mt-0.5 text-fg-sub">{ref.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </>
  );
}
