// 둥글둥글한 일러스트 컴포넌트들 — 단순 도형 위주로만

// 서류 아이콘 (간소화 자료, 등본 등)
function PaperDoc({ label, color = '#FFFFFF', accent = '#2563EB', stamp, rotate = 0, scale = 1 }) {
  return (
    <svg viewBox="0 0 120 150" width={90 * scale} height={112.5 * scale}
         style={{ transform: `rotate(${rotate}deg)`, filter: 'drop-shadow(0 8px 16px rgba(37,99,235,.15))' }}>
      <rect x="6" y="6" width="108" height="138" rx="10" fill={color} stroke="rgba(0,0,0,.06)" strokeWidth="1"/>
      <rect x="18" y="22" width="60" height="8" rx="4" fill={accent}/>
      <rect x="18" y="40" width="84" height="4" rx="2" fill="#E5E7EB"/>
      <rect x="18" y="50" width="76" height="4" rx="2" fill="#E5E7EB"/>
      <rect x="18" y="60" width="84" height="4" rx="2" fill="#E5E7EB"/>
      <rect x="18" y="70" width="60" height="4" rx="2" fill="#E5E7EB"/>
      <rect x="18" y="86" width="84" height="4" rx="2" fill="#E5E7EB"/>
      <rect x="18" y="96" width="50" height="4" rx="2" fill="#E5E7EB"/>
      {stamp && (
        <g>
          <circle cx="92" cy="118" r="16" fill="none" stroke={accent} strokeWidth="2.5" opacity=".7"/>
          <text x="92" y="123" textAnchor="middle" fontSize="9" fontWeight="700" fill={accent} opacity=".8">{stamp}</text>
        </g>
      )}
      {label && (
        <g>
          <rect x="18" y="118" width={Math.min(label.length * 7 + 10, 60)} height="18" rx="4" fill={accent} opacity=".15"/>
          <text x={18 + Math.min(label.length * 7 + 10, 60) / 2} y="131" textAnchor="middle"
                fontSize="9" fontWeight="600" fill={accent}>{label}</text>
        </g>
      )}
    </svg>
  );
}

// 핸드폰 + 간편인증 화면
function PhoneAuth({ scale = 1, glow = false }) {
  return (
    <svg viewBox="0 0 200 380" width={200 * scale} height={380 * scale}>
      <defs>
        <linearGradient id="phoneGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#1E40AF"/>
          <stop offset="1" stopColor="#3B82F6"/>
        </linearGradient>
      </defs>
      {glow && <ellipse cx="100" cy="190" rx="120" ry="200" fill="#3B82F6" opacity=".18"/>}
      {/* 핸드폰 외곽 */}
      <rect x="20" y="10" width="160" height="360" rx="32" fill="#1F2937"/>
      <rect x="26" y="16" width="148" height="348" rx="26" fill="#FFFFFF"/>
      {/* 노치 */}
      <rect x="78" y="20" width="44" height="14" rx="7" fill="#1F2937"/>
      {/* 상단 헤더 */}
      <rect x="34" y="48" width="60" height="6" rx="3" fill="#1E40AF"/>
      <rect x="34" y="60" width="100" height="3" rx="1.5" fill="#CBD5E1"/>
      {/* 인증 카드 */}
      <rect x="38" y="84" width="124" height="80" rx="14" fill="url(#phoneGrad)"/>
      <circle cx="60" cy="124" r="14" fill="#FFFFFF" opacity=".95"/>
      <path d="M53 124 L58 129 L67 119" stroke="#2563EB" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <rect x="82" y="116" width="60" height="4" rx="2" fill="#FFFFFF" opacity=".9"/>
      <rect x="82" y="126" width="40" height="3" rx="1.5" fill="#FFFFFF" opacity=".55"/>
      {/* 인증 항목 */}
      <rect x="38" y="180" width="124" height="36" rx="10" fill="#F1F5F9"/>
      <circle cx="56" cy="198" r="10" fill="#FCD34D"/>
      <text x="56" y="202" textAnchor="middle" fontSize="11" fontWeight="800" fill="#7C2D12">K</text>
      <rect x="74" y="192" width="60" height="4" rx="2" fill="#475569"/>
      <rect x="74" y="202" width="40" height="3" rx="1.5" fill="#94A3B8"/>
      <rect x="38" y="224" width="124" height="36" rx="10" fill="#F1F5F9"/>
      <circle cx="56" cy="242" r="10" fill="#22C55E"/>
      <text x="56" y="246" textAnchor="middle" fontSize="10" fontWeight="800" fill="#FFFFFF">N</text>
      <rect x="74" y="236" width="60" height="4" rx="2" fill="#475569"/>
      <rect x="74" y="246" width="40" height="3" rx="1.5" fill="#94A3B8"/>
      <rect x="38" y="268" width="124" height="36" rx="10" fill="#F1F5F9"/>
      <circle cx="56" cy="286" r="10" fill="#3B82F6"/>
      <text x="56" y="290" textAnchor="middle" fontSize="10" fontWeight="800" fill="#FFFFFF">T</text>
      <rect x="74" y="280" width="60" height="4" rx="2" fill="#475569"/>
      <rect x="74" y="290" width="40" height="3" rx="1.5" fill="#94A3B8"/>
      {/* 메인 버튼 */}
      <rect x="38" y="320" width="124" height="32" rx="16" fill="#2563EB"/>
      <rect x="78" y="333" width="44" height="6" rx="3" fill="#FFFFFF"/>
    </svg>
  );
}

// 둥근 캐릭터 (프리랜서/사장님/직장인)
function PersonBlob({ kind = 'freelancer', scale = 1 }) {
  // kind: freelancer (노트북), business (서류), worker (안경)
  const palettes = {
    freelancer: { hair: '#1F2937', skin: '#FED7AA', shirt: '#2563EB', accent: '#FCD34D' },
    business:   { hair: '#1F2937', skin: '#FED7AA', shirt: '#374151', accent: '#DBEAFE' },
    worker:     { hair: '#1F2937', skin: '#FED7AA', shirt: '#0EA5E9', accent: '#FBCFE8' },
  };
  const p = palettes[kind];
  return (
    <svg viewBox="0 0 200 200" width={200 * scale} height={200 * scale}>
      {/* 배경 원 */}
      <circle cx="100" cy="100" r="92" fill={p.accent} opacity=".5"/>
      {/* 몸통 */}
      <path d="M40 200 C 40 150, 60 130, 100 130 C 140 130, 160 150, 160 200 Z" fill={p.shirt}/>
      {/* 목 */}
      <rect x="92" y="118" width="16" height="18" rx="4" fill={p.skin}/>
      {/* 얼굴 */}
      <circle cx="100" cy="92" r="32" fill={p.skin}/>
      {/* 머리 */}
      {kind === 'freelancer' && (
        <path d="M68 88 C 68 60, 132 60, 132 88 L 130 75 C 120 65, 80 65, 70 75 Z" fill={p.hair}/>
      )}
      {kind === 'business' && (
        <path d="M70 86 C 70 64, 130 64, 130 86 C 124 78, 76 78, 70 86 Z" fill={p.hair}/>
      )}
      {kind === 'worker' && (
        <g>
          <path d="M72 84 C 72 62, 128 62, 128 84 C 122 76, 78 76, 72 84 Z" fill={p.hair}/>
          {/* 안경 */}
          <circle cx="89" cy="94" r="7" fill="none" stroke="#1F2937" strokeWidth="1.5"/>
          <circle cx="111" cy="94" r="7" fill="none" stroke="#1F2937" strokeWidth="1.5"/>
          <line x1="96" y1="94" x2="104" y2="94" stroke="#1F2937" strokeWidth="1.5"/>
        </g>
      )}
      {/* 눈 */}
      {kind !== 'worker' && (
        <>
          <circle cx="89" cy="94" r="2.2" fill="#1F2937"/>
          <circle cx="111" cy="94" r="2.2" fill="#1F2937"/>
        </>
      )}
      {/* 입 */}
      <path d="M93 106 Q 100 112, 107 106" stroke="#1F2937" strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* 볼터치 */}
      <circle cx="80" cy="103" r="3.5" fill="#FBCFE8" opacity=".7"/>
      <circle cx="120" cy="103" r="3.5" fill="#FBCFE8" opacity=".7"/>
    </svg>
  );
}

// 카카오톡 아이콘
function KakaoIcon({ size = 24 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}>
      <path d="M12 3C6.48 3 2 6.48 2 10.8c0 2.78 1.85 5.22 4.62 6.62l-1.18 4.32c-.1.36.32.65.63.43L11 19.4c.33.03.66.05 1 .05 5.52 0 10-3.48 10-7.8S17.52 3 12 3z" fill="#3C1E1E"/>
    </svg>
  );
}

// 체크마크 원
function CheckCircle({ size = 28, color = '#2563EB' }) {
  return (
    <svg viewBox="0 0 32 32" width={size} height={size}>
      <circle cx="16" cy="16" r="14" fill={color}/>
      <path d="M10 16.5 L14 20.5 L22 12" stroke="#FFFFFF" strokeWidth="2.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// 별
function Star({ size = 16, filled = true }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}>
      <path d="M12 2 L14.9 8.6 L22 9.3 L16.5 14 L18.2 21 L12 17.3 L5.8 21 L7.5 14 L2 9.3 L9.1 8.6 Z"
            fill={filled ? '#FCD34D' : '#E5E7EB'} stroke={filled ? '#F59E0B' : '#D1D5DB'} strokeWidth="0.5"/>
    </svg>
  );
}

// 큰 패턴 배경 — 점 그리드
function DotGrid({ color = '#2563EB', opacity = 0.08 }) {
  return (
    <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      <defs>
        <pattern id="dotgrid" width="24" height="24" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1.4" fill={color} opacity={opacity}/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#dotgrid)"/>
    </svg>
  );
}

// 손가락 포인터 (핑거탭)
function FingerTap({ size = 64 }) {
  return (
    <svg viewBox="0 0 80 80" width={size} height={size}>
      <circle cx="40" cy="40" r="24" fill="#FCD34D" opacity=".4"/>
      <circle cx="40" cy="40" r="14" fill="#FCD34D"/>
      <path d="M30 38 L30 22 C 30 19, 34 19, 34 22 L34 36 L34 28 C 34 25, 38 25, 38 28 L38 36 L38 30 C 38 27, 42 27, 42 30 L42 38 L42 34 C 42 31, 46 31, 46 34 L46 46 C 46 54, 42 60, 36 60 C 30 60, 28 56, 28 50 L28 44 Z"
            fill="#FFFFFF" stroke="#1F2937" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, { PaperDoc, PhoneAuth, PersonBlob, KakaoIcon, CheckCircle, Star, DotGrid, FingerTap });
