export function PanelReferences() {
  return (
    <div>
      {/* 섹션 헤더 */}
      <div className="flex items-center gap-[10px] mb-4">
        <div
          className="w-9 h-9 rounded-[9px] flex items-center justify-center text-[18px]"
          style={{
            background: 'color-mix(in srgb, var(--color-caution) 20%, transparent)',
            border: '1px solid color-mix(in srgb, var(--color-caution) 30%, transparent)',
          }}
        >
          📜
        </div>
        <div>
          <div className="text-label-1 font-bold text-fg font-korean">
            등록특허 원문 기반 이론 근거
          </div>
          <div className="text-caption text-fg-disabled font-korean mt-[1px]">
            WING 탑재 유출유 확산예측 시스템의 특허 원전 2건 전체 분석
          </div>
        </div>
      </div>

      {/* 특허 1: 10-1567431 */}
      <div className="rounded-xl p-[18px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-start gap-[14px] mb-[14px]">
          <div
            className="px-3 py-2 rounded-lg text-center whitespace-nowrap flex-shrink-0"
            style={{
              background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
              border: '1px solid color-mix(in srgb, var(--color-info) 30%, transparent)',
            }}
          >
            <div className="text-caption text-fg-disabled font-korean">대한민국 등록특허</div>
            <div className="text-label-1 font-extrabold font-mono text-color-info">10-1567431</div>
            <div className="text-caption text-fg-disabled font-korean mt-[2px]">
              등록: 2015.11.03
            </div>
          </div>
          <div className="flex-1">
            <div className="text-label-1 font-bold text-fg font-korean mb-[5px] leading-[1.5]">
              해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.8]">
              <span>특허권자</span> : 한국해양과학기술원 | <span>발명자</span> : 이문진 · 김혜진 ·
              이승현 · 전태병
            </div>
          </div>
        </div>

        {/* 청구항 1 */}
        <div
          className="bg-bg-base rounded-lg p-3 mb-3"
          style={{ border: '1px solid color-mix(in srgb, var(--color-accent) 15%, transparent)' }}
        >
          <div
            className="text-caption font-korean mb-[9px]"
            // style={{ color: 'var(--color-accent)' }}
          >
            청구항 1 — ESI 기반 실시간 확산 3단계
          </div>
          <div className="flex flex-col gap-[6px] text-caption font-korean">
            <div className="flex gap-[10px] items-start">
              <div
                className="min-w-[32px] h-[22px] rounded-[5px] flex items-center justify-center text-caption flex-shrink-0"
                style={{
                  // background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
                  // color: 'var(--color-accent)',
                }}
              >
                S10
              </div>
              <div className="text-fg-sub leading-[1.7]">
                <span className="text-fg">실시간 자료 수신</span> —
                기상예측시스템·위성영상수신시스템·검조소 인터넷 연결. FTP로
                기상자료+수온자료(NGSST)+조석정보 자동 수신
              </div>
            </div>
            <div className="flex gap-[10px] items-start">
              <div
                className="min-w-[32px] h-[22px] rounded-[5px] flex items-center justify-center text-caption flex-shrink-0"
                style={{
                  // background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
                  // color: 'var(--color-accent)',
                }}
              >
                S20
              </div>
              <div className="text-fg-sub leading-[1.7]">
                <span className="text-fg">조류·취송류 예측</span> — CHARRY모델 조화분석 + 취송류
                경험식(0.029×Vw, θw+18.6°)
              </div>
            </div>
            <div className="flex gap-[10px] items-start">
              <div
                className="min-w-[32px] h-[22px] rounded-[5px] flex items-center justify-center text-caption flex-shrink-0"
                style={{
                  // background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
                  // color: 'var(--color-accent)',
                }}
              >
                S30
              </div>
              <div className="text-fg-sub leading-[1.7]">
                <span className="text-fg">유출유 확산 실시간 예측</span> — Monte Carlo 입자추적 +
                fBm 난류확산 + 풍화 5단계 → ESI 방제정보지도 기반 방제방안 수립
              </div>
            </div>
          </div>
        </div>

        {/* fBm 난류확산 */}
        <div
          className="bg-bg-base rounded-lg p-[11px] mb-[10px]"
          style={{ border: '1px solid color-mix(in srgb, var(--color-success) 15%, transparent)' }}
        >
          <div
            className="text-caption font-korean mb-[7px]"
            // style={{ color: 'var(--color-accent)' }}
          >
            fBm 난류확산 |{' '}
            <span className="text-fg-sub font-normal">σ²(t) = A·t^m, m=0.45~2.46</span>
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7]">
            분수 브라운운동(fBm) 기반 무작위 확산거리 생성. 등방성(isotropic) 확산 가정.
          </div>
        </div>

        {/* 풍화 5단계 */}
        <div
          className="bg-bg-base rounded-lg p-3"
          // style={{ border: '1px solid color-mix(in srgb, var(--color-warning) 15%, transparent)' }}
        >
          <div
            className="text-caption font-korean mb-[9px]"
            // style={{ color: 'var(--color-accent)' }}
          >
            유출유 풍화(Weathering) 5단계
          </div>
          <div className="flex flex-col gap-1 text-caption font-korean">
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">① 퍼짐</div>
              <div className="text-fg-sub leading-[1.6]">
                Fay(1969): 중력-관성력. Mackay et al.(1980) 표면장력-점성력
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">② 증발</div>
              <div className="text-fg-sub leading-[1.6]">
                Stiver & Mackay(1984) 해석적 방법. 수일~10일간 약 25%
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">③ 소산</div>
              <div className="text-fg-sub leading-[1.6]">
                쇄파 기인. 파도에너지·풍속 함수. 전체 약 15%
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">④ 유상화</div>
              <div className="text-fg-sub leading-[1.6]">
                Water-in-oil. Mackay et al.(1980) 풍속·수분 함수
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">⑤ 침강</div>
              <div className="text-fg-sub leading-[1.6]">
                용해·미생물 분해. 질량 손실률 = 초기 누유량에 선형 비례
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 특허 2: 10-1868791 */}
      <div className="rounded-xl p-[18px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-start gap-[14px] mb-[14px]">
          <div
            className="px-3 py-2 rounded-lg text-center whitespace-nowrap flex-shrink-0"
            style={{
              background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
              border: '1px solid color-mix(in srgb, var(--color-info) 30%, transparent)',
            }}
          >
            <div className="text-caption text-fg-disabled font-korean">대한민국 등록특허</div>
            <div className="text-label-1 font-extrabold font-mono text-color-info">10-1868791</div>
            <div className="text-caption text-fg-disabled font-korean mt-[2px]">
              등록: 2018.06.12
            </div>
          </div>
          <div className="flex-1">
            <div className="text-label-1 font-bold text-fg font-korean mb-[5px] leading-[1.5]">
              유출유(Oil spill) 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측
              시스템
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.8]">
              <span>특허권자</span> : 주식회사 아라종합기술 | <span>발명자</span> :
              김도연·김용혁·김충기·김성은·박상훈·오정환
            </div>
          </div>
        </div>

        {/* 최적화 5단계 */}
        <div
          className="bg-bg-base rounded-lg p-[11px] mb-[10px]"
          style={{ border: '1px solid color-mix(in srgb, var(--color-info) 15%, transparent)' }}
        >
          <div
            className="text-caption font-bold font-korean mb-[9px]"
            style={{ color: 'var(--color-info)' }}
          >
            ⚙️ 입자 추적 모듈 최적화 5단계
          </div>
          <div className="flex flex-col gap-1 text-caption font-korean">
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(a)</span>
              <div className="text-fg-sub leading-[1.6]">
                뜰개 관측 + 예측자료 취득 : GPS 뜰개 투하 → 실제 이동경로 + 예측 기상·해양자료 취득
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(b)</span>
              <div className="text-fg-sub leading-[1.6]">
                제1 입자 추적 모델 실행 : 예측자료 + 확산계수 → 제1 예측변화량(ΔModel) 산출
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(c)</span>
              <div className="text-fg-sub leading-[1.6]">
                전처리 차분 : 관측경로 Δobs ↔ 제1모델 ΔModel 차분 처리
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(d)</span>
              <div className="text-fg-sub leading-[1.6]">
                제2 입자 추적 모델 수립 : ΔModel 기반 제2모델 → ΔRevised 산출
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(e)</span>
              <div className="text-fg-sub leading-[1.6]">
                최적화 알고리즘 적용 : ΔRevised ↔ Δobs 비교 → GA·DE·HS·PSO 매개변수 최적화 반복 수렴
              </div>
            </div>
          </div>
        </div>

        {/* 수학 모델 + 알고리즘 */}
        <div className="grid grid-cols-2 gap-[10px]">
          <div className="bg-bg-base border border-stroke rounded-lg p-[11px]">
            <div className="text-caption font-bold text-fg font-korean mb-[7px]">
              입자 추적 수학 모델
            </div>
            <div className="rounded-[5px] p-2 font-mono text-caption text-fg-sub leading-[2] bg-bg-base border border-stroke">
              <span className="text-fg-disabled">제1모델:</span> Model<sub>x</sub> = cur<sub>u</sub>
              ·Δt + c·w<sub>u</sub>·Δt
              <br />
              <span className="text-fg-disabled">제2모델:</span> Rev<sub>x</sub> = a1·cur
              <sub>u</sub>
              +a2·cur<sub>v</sub>+...+a9
            </div>
          </div>
          <div className="bg-bg-base border border-stroke rounded-lg p-[11px]">
            <div className="text-caption font-bold text-fg font-korean mb-[7px]">
              4대 최적화 알고리즘
            </div>
            <div className="flex flex-col gap-[3px] text-caption font-korean">
              <div className="px-[7px] py-[3px] text-fg-sub">
                GA : 유전 알고리즘 — 변이·교배 진화
              </div>
              <div className="px-[7px] py-[3px] text-fg-sub">
                DE : 미분 진화 — 벡터 차이 기반 전역최적화
              </div>
              <div className="px-[7px] py-[3px] text-fg-sub">
                HS : 하모니 서치 — 음악구성 수리모델
              </div>
              <div className="px-[7px] py-[3px] text-fg-sub">
                PSO : 입자군집 최적화 — 새떼 군집행동 모방
              </div>
            </div>
          </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-[10px]">
          📚 특허 원문 인용 선행기술문헌 (심사관 인용 포함)
        </div>
        <div className="flex flex-col gap-[3px] text-caption font-korean">
          {[
            {
              tag: '특허① 인용',
              text: '해양환경안전학회지 제17권 4호 (김혜진·이문진 외) — KOSPS 상시 운용 체계 | 심사관 직접 인용',
            },
            {
              tag: '특허① 인용',
              text: '해양환경안전학회 2008 춘계학술발표회 — CHARRY 조류모델 | 심사관 직접 인용',
            },
            {
              tag: '특허① 인용',
              text: 'KR1020120121163 A — 심사관 인용 선행특허',
            },
            {
              tag: '특허② 인용',
              text: 'KR101538668 B1 / KR101378463 B1 — 심사관 인용 선행특허 2건',
            },
            {
              tag: '특허② 인용',
              text: '한국 등록특허 제10-1567431 — 발명배경 §[0007]에서 선행기술로 직접 인용',
            },
            {
              tag: '이론 원전',
              text: 'Fay(1969) · Mackay et al.(1980) · Stiver & Mackay(1984) · Mooney(1951) — 풍화 5단계 원전',
            },
            {
              tag: '이론 원전',
              text: 'Akima(1978a, 1978b) — 2차원 5차다항식 보간법 (수심·기상자료 보간)',
            },
            {
              tag: '이론 원전',
              text: '이문진·강용균(2000) 한국해양학회지 — 취송류 경험식 0.029×Vw, θw+18.6° 원전',
            },
            {
              tag: '이론 원전',
              text: 'Bowden(1983) — fBm 난류확산 σ²=At^m (m=0.45~2.46)',
            },
            {
              tag: '이론 원전',
              text: 'Wahr(1981) — 조석 Love number (k=0.3, h=0.61) · 기조력 계수',
            },
            {
              tag: '이론 원전',
              text: 'Flather & Heaps(1975) — 조석 간출지(tidal flat) 처리 기법',
            },
          ].map((ref, i) => (
            <div
              key={i}
              className="grid gap-[7px] px-2 py-[5px]"
              style={{ gridTemplateColumns: '80px 1fr' }}
            >
              <div
                className="px-[5px] py-[2px] rounded-[3px] text-caption text-center h-fit text-color-accent whitespace-nowrap"
                style={{
                  background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                }}
              >
                {ref.tag}
              </div>
              <div className="text-fg-sub leading-[1.6]">{ref.text}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
