wing-ops/frontend/src/pages/design/components/CardSection.tsx

import wingAnchorIcon from '../../../assets/icons/wing-anchor.svg';
import wingCargoIcon from '../../../assets/icons/wing-cargo.svg';
import wingAlertTriangleIcon from '../../../assets/icons/wing-alert-triangle.svg';
import wingChartBarIcon from '../../../assets/icons/wing-chart-bar.svg';
import wingWaveGraph from '../../../assets/icons/wing-wave-graph.svg';

interface LogisticsItem {
  icon: string;
  label: string;
  progress: string;
}

const logisticsItems: LogisticsItem[] = [
  { icon: wingAnchorIcon, label: '화물 통관', progress: '진행률: 84%' },
  { icon: wingCargoIcon, label: '화물 통관', progress: '진행률: 84%' },
  { icon: wingAlertTriangleIcon, label: '화물 통관', progress: '진행률: 84%' },
];

export const CardSection = () => {
  return (
    <div
      className='grid gap-6 w-full'
      style={{
        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
      }}
    >
      {/* col 3: 활성 물류 현황 카드 */}
      <div
        className='bg-[#1a2236] rounded-[10px] border border-[#1e2a42] p-6 flex flex-col gap-6 items-start justify-start relative'
        style={{ gridColumn: '3 / span 1', gridRow: '1 / span 1' }}
      >
        {/* 카드 헤더 */}
        <div className='border-l-2 border-[#06b6d4] pl-3 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative'>
          <div
            className='text-[#64748b] text-left font-korean text-[10px] leading-[15px] font-medium uppercase relative flex items-center justify-start'
            style={{ letterSpacing: '1px' }}
          >
            활성 물류 현황
          </div>
        </div>

        {/* 물류 아이템 목록 */}
        <div className='flex flex-col gap-4 items-start justify-start self-stretch shrink-0 relative'>
          {logisticsItems.map((item, index) => (
            <div
              key={index}
              className='flex flex-row gap-4 items-center justify-start self-stretch shrink-0 relative'
            >
              <div className='bg-[#1e293b] rounded-md flex flex-row gap-0 items-center justify-center shrink-0 w-10 h-10 relative'>
                <img
                  className='shrink-0 relative overflow-visible'
                  src={item.icon}
                  alt={item.label}
                />
              </div>
              <div className='flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative'>
                <div className='flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative'>
                  <div className='text-[#dfe2f3] text-left font-korean text-[11px] leading-[16.5px] font-medium relative flex items-center justify-start'>
                    {item.label}
                  </div>
                </div>
                <div className='flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative'>
                  <div className='text-[#64748b] text-left font-sans text-[10px] leading-[15px] font-normal relative flex items-center justify-start'>
                    {item.progress}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 대응팀 배치 버튼 */}
        <div className='pt-2 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative'>
          <div
            className='rounded-md pt-2 pb-2 flex flex-col gap-0 items-center justify-center self-stretch shrink-0 relative'
            style={{
              background:
                'linear-gradient(97.29deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
            }}
          >
            <div className='text-white text-center font-korean text-[11px] leading-[16.5px] font-medium relative flex items-center justify-center'>
              대응팀 배치
            </div>
          </div>
        </div>
      </div>

      {/* col 1-2 span: 실시간 텔레메트리 카드 */}
      <div
        className='bg-[#1a2236] rounded-[10px] border border-[#1e2a42] p-6 flex flex-col items-start justify-between min-h-[240px] relative overflow-hidden'
        style={{ gridColumn: '1 / span 2', gridRow: '1 / span 1' }}
      >
        {/* 배경 파형 (opacity 0.3) */}
        <div
          className='flex flex-col gap-0 items-start justify-center shrink-0 h-24 absolute right-px left-px bottom-[1.5px]'
          style={{ opacity: 0.3 }}
        >
          <img
            className='self-stretch shrink-0 h-24 relative overflow-visible'
            src={wingWaveGraph}
            alt='wave graph'
          />
        </div>

        {/* 상단 콘텐츠 */}
        <div className='flex flex-col gap-6 items-start justify-start self-stretch shrink-0 relative'>
          {/* 제목 영역 */}
          <div className='flex flex-row items-start justify-between self-stretch shrink-0 relative'>
            <div className='flex flex-col gap-[4.5px] items-start justify-start shrink-0 relative'>
              <div
                className='text-[#22d3ee] text-left font-korean text-[10px] leading-[15px] font-medium uppercase relative flex items-center justify-start'
                style={{ letterSpacing: '1px' }}
              >
                실시간 텔레메트리
              </div>
              <div className='text-[#dfe2f3] text-left font-korean text-2xl leading-8 font-medium relative flex items-center justify-start'>
                선박 속도 오버레이
              </div>
            </div>
            <img
              className='shrink-0 w-[13.5px] h-[13.5px] relative overflow-visible'
              src={wingChartBarIcon}
              alt='chart bar'
            />
          </div>

          {/* 속도 수치 */}
          <div className='flex flex-row gap-2 justify-start self-stretch shrink-0 relative'>
            <div className='text-white text-left font-sans font-bold text-4xl leading-10 relative flex items-center justify-start'>
              24.8
            </div>
            <div className='text-[#64748b] text-left font-sans font-semibold text-sm leading-5 relative flex items-center justify-start'>
              노트 (knots)
            </div>
          </div>
        </div>

        {/* 하단 뱃지 + 버튼 */}
        <div className='flex flex-row items-center justify-between self-stretch shrink-0 relative'>
          {/* 정상 가동중 뱃지 */}
          <div className='bg-[rgba(34,197,94,0.10)] rounded-xl pt-0.5 pr-2 pb-0.5 pl-2 flex flex-col gap-0 items-start justify-start shrink-0 relative'>
            <div className='text-[#22c55e] text-left font-korean text-[9px] leading-[13.5px] font-medium relative flex items-center justify-start'>
              정상 가동중
            </div>
          </div>

          {/* 대응팀 배치 아웃라인 버튼 */}
          <div className='rounded-md border border-[#1e2a42] pt-1 pr-3 pb-1 pl-3 flex flex-col gap-0 items-center justify-center shrink-0 relative'>
            <div className='text-[#b0b8cc] text-center font-korean text-[10px] leading-[15px] font-medium relative flex items-center justify-center'>
              대응팀 배치
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};