export function OverviewPanel() {
  return (
    <>
      {/* 인트로 카드 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="grid grid-cols-2 gap-5">
          <div>
            <div className="text-title-4 font-bold mb-2">오일펜스 배치 최적화란?</div>
            <div className="text-label-2 leading-[1.8] text-fg-sub">
              해양 유류오염 발생 시 <b className="text-color-accent">유출유 확산 예측 결과</b>와
              실시간 해양환경(조류·풍향·파고)을 연동하여, 제한된 방제자원(오일펜스 길이·방제정
              수)으로 <b className="text-color-accent">오염 확산 차단 효율을 최대화</b>하는 최적
              배치 지점·형태·순서를 자동 산출하는 수치 알고리즘 체계입니다.
            </div>
          </div>
          <div>
            <div className="text-title-4 font-bold mb-2">WING 최적화 목표</div>
            <div className="flex flex-col gap-[5px] text-label-2 text-fg-sub">
              {[
                {
                  num: '①',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '차단 면적 최대화 — 예측 유출유 확산 경계와 오일펜스 교차 면적 극대화',
                },
                {
                  num: '②',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '도달시간 최소화 — 유출유 해안·ESI 민감구역 도달 전 선제적 차단선 구축',
                },
                {
                  num: '③',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '자원 효율 최적화 — 가용 오일펜스 길이·방제정 수·이동시간 제약 충족',
                },
                {
                  num: '④',
                  color: 'var(--color-accent)',
                  bg: 'rgba(6,182,212,.05)',
                  bd: 'rgba(6,182,212,.12)',
                  text: '실패 안전성 확보 — 조류 초과 시 오일펜스 이탈 방지 방향각 자동 보정',
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="px-2.5 py-1.5 rounded-md"
                  style={{ background: item.bg, border: `1px solid ${item.bd}` }}
                >
                  <span className="font-bold" style={{ color: item.color }}>
                    {item.num}
                  </span>{' '}
                  <b>{item.text}</b>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 전체 흐름도 */}
      <div className="rounded-md p-4 mb-4 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3.5">WING 오일펜스 배치 최적화 전체 흐름</div>
        <div className="flex items-center justify-center gap-0 flex-nowrap overflow-x-auto py-2">
          {[
            {
              icon: '🌊',
              label: '확산예측',
              sub: 'KOSPS/POSEIDON\nOpenDrift',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '📡',
              label: '환경입력',
              sub: '조류·풍향\n파고·수심',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '🗺️',
              label: '차단선 후보',
              sub: '격자탐색\n후보지점 생성',
              color: 'var(--color-caution)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '⚙️',
              label: '최적화 엔진',
              sub: '다목적\n유전알고리즘',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.3)',
              bold: true,
            },
            {
              icon: '✅',
              label: '배치안 출력',
              sub: '좌표·형태\n방향·순서',
              color: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.08)',
              bd: 'rgba(6,182,212,.2)',
            },
            {
              icon: '🗺️',
              label: '지도 표시',
              sub: 'ESI 중첩\n방제자원 연계',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.08)',
              bd: 'rgba(59,130,246,.2)',
            },
          ].map((step, i) => (
            <div key={i} className="flex items-center">
              <div
                className="text-center min-w-[80px] rounded-lg px-3 py-2.5 text-caption"
                style={{
                  background: step.bg,
                  border: `${step.bold ? '2px' : '1px'} solid ${step.bd}`,
                }}
              >
                <div className="text-title-2 mb-1">{step.icon}</div>
                <div className="font-bold" style={{ color: step.color }}>
                  {step.label}
                </div>
                <div className="text-fg-default" style={{ whiteSpace: 'pre-line' }}>
                  {step.sub}
                </div>
              </div>
              {i < 5 && <div className="px-1.5 text-fg-default text-title-3">▶</div>}
            </div>
          ))}
        </div>
      </div>

      {/* 오일펜스 종류 */}
      <div className="grid grid-cols-3 gap-3 mb-4">
        {[
          {
            icon: '⛽',
            title: '고형 오일펜스',
            color: 'var(--color-accent)',
            desc: '단단한 부체와 수중커튼으로 구성. 정적 배치. 항구·좁은 수로에 적합.',
            specs: [
              '내조류 한계: 0.5~1.0 knot',
              '높이: 30~60cm · 수중 30~60cm',
              '전개속도: 30~60m/hr',
            ],
          },
          {
            icon: '🌊',
            title: '공기충전식 오일펜스',
            color: 'var(--color-info)',
            desc: '공기로 부력 확보. 이동·보관 편리. 해상 광역 차단에 주로 사용.',
            specs: [
              '내조류 한계: 0.7~1.5 knot',
              '높이: 45~90cm · 수중 45~90cm',
              '전개속도: 100~300m/hr',
            ],
          },
          {
            icon: '🔄',
            title: '자항식 오일펜스',
            color: 'var(--color-accent)',
            desc: '방제정 예인 또는 자체 추진. U형·V형 동적 배치. 강조류 해역 적합.',
            specs: ['운용수심: 5m 이상', 'U형·V형·J형 동적 형태', '내조류: 조류각도 보정으로 극복'],
          },
        ].map((boom, i) => (
          <div key={i} className="rounded-md p-3.5 bg-bg-card border border-stroke">
            <div className="text-label-2 font-bold mb-2" style={{ color: boom.color }}>
              {boom.icon} {boom.title}
            </div>
            <div className="text-label-2 mb-2 leading-[1.7] text-fg-sub">{boom.desc}</div>
            <div className="flex flex-col gap-[3px] text-caption text-fg-sub">
              {boom.specs.map((spec, j) => (
                <div
                  key={j}
                  className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
                  style={{ background: `${boom.color}11` }}
                >
                  {spec}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* 핵심 제약조건 */}
      <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
        <div className="text-label-2 font-bold mb-2.5 text-color-caution">
          ⚠️ 최적화 핵심 제약조건
        </div>
        <div className="grid grid-cols-3 gap-2.5 text-label-2 text-fg-sub">
          {[
            {
              icon: '🌊',
              title: '조류 제약',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.05)',
              bd: 'rgba(59,130,246,.15)',
              lines: [
                '조류속도 > 임계유속 시',
                '오일펜스 하단 통과 발생',
                'U<0.7 knot 유지 필수',
                '임계각도 자동 계산 적용',
              ],
            },
            {
              icon: '📏',
              title: '자원 제약',
              color: 'var(--color-caution)',
              bg: 'rgba(6,182,212,.05)',
              bd: 'rgba(6,182,212,.15)',
              lines: [
                '가용 오일펜스 총 길이',
                '방제정 척수·이동시간',
                '앵커링 가능 수심 조건',
                '연결부 허용 장력',
              ],
            },
            {
              icon: '⏱️',
              title: '시간 제약',
              color: 'var(--color-info)',
              bg: 'rgba(59,130,246,.05)',
              bd: 'rgba(59,130,246,.15)',
              lines: [
                '유출유 도달 예측시간',
                '오일펜스 전개 소요시간',
                '방제정 현장 도착시간',
                '조석 변환 주기 고려',
              ],
            },
          ].map((c, i) => (
            <div
              key={i}
              className="p-2.5 rounded-[7px]"
              style={{ background: c.bg, border: `1px solid ${c.bd}` }}
            >
              <div className="font-bold mb-[5px]" style={{ color: c.color }}>
                {c.icon} {c.title}
              </div>
              <div className="leading-[1.7] text-fg-sub">
                {c.lines.map((l, j) => (
                  <span key={j}>
                    {j > 0 && <br />}
                    {l}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}
