// bots.jsx — 11 귀여운 봇 캐릭터 (사이트 11 주제 매핑)
//
// 각 봇:
//   · 고유한 모양과 색
//   · 작은 안테나 + 점 (봇 표시)
//   · 단순한 점 눈 + 곡선 입
//   · ink 외곽선 통일 (가족 느낌)
//   · viewBox 100 x 110 (안테나 포함)

const INK = window.INK || '#1f1d1a';

// 공통 작은 face — 점 눈 + 작은 입
function BotFace({ cx, cy, mouthY, mouth = 'smile', eyeOffset = 8, eyeR = 2.6, scale = 1 }) {
  return (
    <g>
      <circle cx={cx - eyeOffset} cy={cy} r={eyeR} fill={INK} />
      <circle cx={cx + eyeOffset} cy={cy} r={eyeR} fill={INK} />
      {mouth === 'smile' && (
        <path d={`M${cx - 5},${mouthY} Q${cx},${mouthY + 4 * scale} ${cx + 5},${mouthY}`}
          stroke={INK} strokeWidth={1.8} fill="none" strokeLinecap="round" />
      )}
      {mouth === 'closed' && (
        <line x1={cx - 4} y1={mouthY} x2={cx + 4} y2={mouthY}
          stroke={INK} strokeWidth={1.8} strokeLinecap="round" />
      )}
      {mouth === 'o' && (
        <ellipse cx={cx} cy={mouthY} rx={2.5} ry={3} fill={INK} />
      )}
      {mouth === 'sleepy' && (
        <path d={`M${cx - 4},${mouthY} Q${cx},${mouthY + 2} ${cx + 4},${mouthY}`}
          stroke={INK} strokeWidth={1.5} fill="none" strokeLinecap="round" />
      )}
    </g>
  );
}

// 안테나 + 점
function Antenna({ x = 50, y = 6, dotColor = INK }) {
  return (
    <g>
      <line x1={x} y1={y + 6} x2={x} y2={y + 14} stroke={INK} strokeWidth={2.2} strokeLinecap="round" />
      <circle cx={x} cy={y + 4} r={3} fill={dotColor} stroke={INK} strokeWidth={1.5} />
    </g>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 1. Depression — 포근이 (둥근 호빵, 담요 자락)
function Bot_Depression({ size = 80 }) {
  const color = '#f3c39a';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 호빵 본체 */}
      <path d="M50,84 Q14,84 14,54 Q14,28 50,28 Q86,28 86,54 Q86,84 50,84 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 담요 자락 (양옆 살짝) */}
      <path d="M14,60 Q8,72 12,86 L22,84" stroke={INK} strokeWidth={2.5} fill={color} strokeLinejoin="round" />
      <path d="M86,60 Q92,72 88,86 L78,84" stroke={INK} strokeWidth={2.5} fill={color} strokeLinejoin="round" />
      {/* 눈웃음 */}
      <path d="M38,52 Q44,46 50,52" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      <path d="M50,52 Q56,46 62,52" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      {/* 미소 */}
      <path d="M40,64 Q50,72 60,64" stroke={INK} strokeWidth={2.2} fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 2. Anxiety — 숨이 (물방울, 호흡 원)
function Bot_Anxiety({ size = 80 }) {
  const color = '#9bb88a';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 물방울 본체 */}
      <path d="M50,86 Q14,80 18,52 Q24,28 50,18 Q76,28 82,52 Q86,80 50,86 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 호흡 원 (가슴 중앙) */}
      <circle cx={50} cy={60} r={9} stroke={INK} strokeWidth={2} fill="#ffffff" opacity={0.6} />
      <BotFace cx={50} cy={44} mouthY={62} mouth="closed" eyeR={2.4} />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 3. Sleep — 졸이 (초승달, zZ)
function Bot_Sleep({ size = 80 }) {
  const color = '#b9a4d8';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 초승달 본체 */}
      <path d="M50,18 Q22,28 22,56 Q22,86 50,86 Q40,78 38,56 Q40,32 50,18 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      <path d="M50,18 Q78,28 78,56 Q78,86 50,86 Q60,78 62,56 Q60,32 50,18 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 닫힌 눈 */}
      <path d="M40,52 Q44,57 48,52" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      <path d="M52,52 Q56,57 60,52" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      {/* 평화 미소 */}
      <path d="M44,66 Q50,70 56,66" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      {/* zZ */}
      <text x={84} y={32} fontFamily='"Pretendard","Inter",sans-serif'
        fontSize={11} fontWeight={800} fill={INK}>z</text>
      <text x={92} y={42} fontFamily='"Pretendard","Inter",sans-serif'
        fontSize={9} fontWeight={800} fill={INK}>z</text>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 4. Burnout — 쉬이 (사그라진 모닥불)
function Bot_Burnout({ size = 80 }) {
  const color = '#e0a468';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 둥근 호롱불 */}
      <path d="M50,86 Q16,86 16,58 Q16,32 50,22 Q84,32 84,58 Q84,86 50,86 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 작은 불씨 (위) */}
      <circle cx={50} cy={20} r={3} fill="#ff8d5a" stroke={INK} strokeWidth={1.5} />
      <circle cx={40} cy={24} r={1.5} fill="#ff8d5a" opacity={0.7} />
      <circle cx={60} cy={24} r={1.5} fill="#ff8d5a" opacity={0.7} />
      {/* 풀어진 눈 (반쯤 감김) */}
      <path d="M36,54 Q41,58 46,54" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      <path d="M54,54 Q59,58 64,54" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
      {/* 작은 입 */}
      <line x1={46} y1={68} x2={54} y2={68} stroke={INK} strokeWidth={2} strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 5. PTSD — 단단이 (닻 받침)
function Bot_PTSD({ size = 80 }) {
  const color = '#5e7a92';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 안정된 본체 (넓은 베이스) */}
      <path d="M50,24 Q26,24 22,46 Q18,72 30,86 L70,86 Q82,72 78,46 Q74,24 50,24 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 받침 라인 */}
      <line x1={20} y1={86} x2={80} y2={86} stroke={INK} strokeWidth={4} strokeLinecap="round" />
      {/* 큰 안정된 눈 */}
      <circle cx={42} cy={50} r={3.5} fill="#ffffff" stroke={INK} strokeWidth={1.5} />
      <circle cx={42} cy={50} r={1.8} fill={INK} />
      <circle cx={58} cy={50} r={3.5} fill="#ffffff" stroke={INK} strokeWidth={1.5} />
      <circle cx={58} cy={50} r={1.8} fill={INK} />
      {/* 차분한 미소 */}
      <path d="M42,66 Q50,70 58,66" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 6. OCD — 단정이 (완벽 대칭 + 4방향 점)
function Bot_OCD({ size = 80 }) {
  const color = '#9bcfc4';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 완벽 원 */}
      <circle cx={50} cy={56} r={32} stroke={INK} strokeWidth={3} fill={color} />
      {/* 4방향 점 (정확함) */}
      <circle cx={50} cy={28} r={2.5} fill={INK} />
      <circle cx={50} cy={84} r={2.5} fill={INK} />
      <circle cx={22} cy={56} r={2.5} fill={INK} />
      <circle cx={78} cy={56} r={2.5} fill={INK} />
      <BotFace cx={50} cy={52} mouthY={66} mouth="smile" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 7. Bipolar — 균형이 (위/아래 다른 색)
function Bot_Bipolar({ size = 80 }) {
  const cool = '#8ab2d4';
  const warm = '#f0a087';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={cool} />
      <defs>
        <clipPath id="bp-top">
          <rect x={0} y={0} width={100} height={56} />
        </clipPath>
        <clipPath id="bp-bot">
          <rect x={0} y={56} width={100} height={60} />
        </clipPath>
      </defs>
      {/* 위 절반 */}
      <circle cx={50} cy={56} r={32} fill={cool} clipPath="url(#bp-top)" />
      {/* 아래 절반 */}
      <circle cx={50} cy={56} r={32} fill={warm} clipPath="url(#bp-bot)" />
      <circle cx={50} cy={56} r={32} stroke={INK} strokeWidth={3} fill="none" />
      {/* 균형 선 */}
      <line x1={22} y1={56} x2={78} y2={56} stroke={INK} strokeWidth={2} strokeDasharray="2 3" opacity={0.6} />
      <BotFace cx={50} cy={48} mouthY={70} mouth="smile" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 8. Autism — 또렷이 (부드러운 다이아몬드)
function Bot_Autism({ size = 80 }) {
  const color = '#a8c6db';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 다이아몬드 (부드러운 코너) */}
      <path d="M50,22 Q60,22 64,32 L82,52 Q86,58 82,64 L64,82 Q60,90 50,90 Q40,90 36,82 L18,64 Q14,58 18,52 L36,32 Q40,22 50,22 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 격자 힌트 */}
      <line x1={50} y1={32} x2={50} y2={80} stroke={INK} strokeWidth={1.2} opacity={0.3} />
      <line x1={24} y1={56} x2={76} y2={56} stroke={INK} strokeWidth={1.2} opacity={0.3} />
      <BotFace cx={50} cy={52} mouthY={68} mouth="closed" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 9. ADHD — 반짝이 (별 + sparkle)
function Bot_ADHD({ size = 80 }) {
  const color = '#f5a857';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 둥근 별 (부드럽게) */}
      <path d="M50,22 Q56,38 70,40 Q84,42 74,52 Q66,62 70,76 Q60,72 50,78 Q40,72 30,76 Q34,62 26,52 Q16,42 30,40 Q44,38 50,22 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* sparkle dots */}
      <circle cx={86} cy={30} r={2} fill={color} stroke={INK} strokeWidth={1} />
      <circle cx={14} cy={42} r={1.5} fill={color} stroke={INK} strokeWidth={0.8} />
      <circle cx={90} cy={70} r={1.5} fill={color} stroke={INK} strokeWidth={0.8} />
      {/* 큰 활기찬 눈 */}
      <circle cx={42} cy={52} r={3.5} fill={INK} />
      <circle cx={58} cy={52} r={3.5} fill={INK} />
      <circle cx={43} cy={51} r={1} fill="#ffffff" />
      <circle cx={59} cy={51} r={1} fill="#ffffff" />
      {/* 미소 */}
      <path d="M42,64 Q50,70 58,64" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 10. Learning — 호기심이 (전구)
function Bot_Learning({ size = 80 }) {
  const color = '#f5d878';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 전구 모양 (둥근 위 + 좁은 아래) */}
      <path d="M50,18 Q28,18 28,42 Q28,60 38,68 L38,82 Q38,88 44,88 L56,88 Q62,88 62,82 L62,68 Q72,60 72,42 Q72,18 50,18 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 빛 줄기 (위) */}
      <line x1={50} y1={10} x2={50} y2={4} stroke={color} strokeWidth={2.5} strokeLinecap="round" opacity={0.7} />
      <line x1={24} y1={22} x2={20} y2={18} stroke={color} strokeWidth={2.5} strokeLinecap="round" opacity={0.6} />
      <line x1={76} y1={22} x2={80} y2={18} stroke={color} strokeWidth={2.5} strokeLinecap="round" opacity={0.6} />
      {/* 베이스 라인 */}
      <line x1={40} y1={76} x2={60} y2={76} stroke={INK} strokeWidth={1.5} opacity={0.5} />
      <line x1={40} y1={82} x2={60} y2={82} stroke={INK} strokeWidth={1.5} opacity={0.5} />
      {/* 호기심 눈 — 큰 동그란 */}
      <circle cx={42} cy={42} r={3.5} fill={INK} />
      <circle cx={58} cy={42} r={3.5} fill={INK} />
      <circle cx={43} cy={41} r={1.2} fill="#ffffff" />
      <circle cx={59} cy={41} r={1.2} fill="#ffffff" />
      {/* 살짝 벌린 입 */}
      <ellipse cx={50} cy={56} rx={3} ry={4} fill={INK} />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 11. Peak Performance — 정확이 (위 향한 화살표)
function Bot_Peak({ size = 80 }) {
  const color = '#5a8acc';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={50} y={2} dotColor={color} />
      {/* 화살표 형 본체 (위 뾰족, 아래 사각) */}
      <path d="M50,18 L82,42 L74,42 L74,84 Q74,90 68,90 L32,90 Q26,90 26,84 L26,42 L18,42 Z"
        stroke={INK} strokeWidth={3} fill={color} strokeLinejoin="round" />
      {/* 집중 눈 (좁고 날카로움) */}
      <line x1={38} y1={56} x2={46} y2={56} stroke={INK} strokeWidth={2.5} strokeLinecap="round" />
      <line x1={54} y1={56} x2={62} y2={56} stroke={INK} strokeWidth={2.5} strokeLinecap="round" />
      {/* 작은 자신감 미소 */}
      <path d="M44,70 Q50,74 56,70" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
    </svg>
  );
}

function Bot_Attention({ size = 80 }) {
  const color = '#f0a39b';
  return (
    <svg viewBox="0 0 100 110" width={size} height={size * 1.1} style={{ display: 'block', overflow: 'visible' }}>
      <Antenna x={46} y={2} dotColor={color} />
      {/* 돋보기 손잡이 (INK 밑선 + 코랄 윗선) */}
      <line x1={67} y1={66} x2={85} y2={84} stroke={INK} strokeWidth={13} strokeLinecap="round" />
      <line x1={67} y1={66} x2={85} y2={84} stroke={color} strokeWidth={8} strokeLinecap="round" />
      {/* 렌즈 본체 = 자세히 들여다보는 집중 */}
      <circle cx={46} cy={48} r={29} fill={color} stroke={INK} strokeWidth={3} />
      {/* 유리 반짝임 */}
      <path d="M30,42 Q34,32 44,30" stroke="#ffffff" strokeWidth={2.4} fill="none" strokeLinecap="round" opacity={0.6} />
      {/* 작은 집중 눈 + 미소 (가족 톤) */}
      <circle cx={38} cy={47} r={2.8} fill={INK} />
      <circle cx={54} cy={47} r={2.8} fill={INK} />
      <path d="M40,58 Q46,63 52,58" stroke={INK} strokeWidth={2} fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 봇 카탈로그 — name, key, component, theme color, sub label
const BOTS = [
  { key: 'depression', label: '포근이', sub: 'Depression', color: '#f3c39a', C: Bot_Depression },
  { key: 'anxiety',    label: '숨이',   sub: 'Anxiety',    color: '#9bb88a', C: Bot_Anxiety },
  { key: 'sleep',      label: '졸이',   sub: 'Sleep',      color: '#b9a4d8', C: Bot_Sleep },
  { key: 'burnout',    label: '쉬이',   sub: 'Burnout',    color: '#e0a468', C: Bot_Burnout },
  { key: 'ptsd',       label: '단단이', sub: 'PTSD',       color: '#5e7a92', C: Bot_PTSD },
  { key: 'ocd',        label: '단정이', sub: 'OCD',        color: '#9bcfc4', C: Bot_OCD },
  { key: 'bipolar',    label: '균형이', sub: 'Bipolar',    color: '#bca6c8', C: Bot_Bipolar },
  { key: 'autism',     label: '또렷이', sub: 'Autism',     color: '#a8c6db', C: Bot_Autism },
  { key: 'adhd',       label: '반짝이', sub: 'ADHD',       color: '#f5a857', C: Bot_ADHD },
  { key: 'learning',   label: '호기심이', sub: 'Learning', color: '#f5d878', C: Bot_Learning },
  { key: 'peak',       label: '정확이', sub: 'Peak',       color: '#5a8acc', C: Bot_Peak },
  { key: 'attention',  label: '초롱이', sub: 'Attention',  color: '#f0a39b', C: Bot_Attention },
];

Object.assign(window, {
  BOTS,
  Bot_Depression, Bot_Anxiety, Bot_Sleep, Bot_Burnout, Bot_PTSD,
  Bot_OCD, Bot_Bipolar, Bot_Autism, Bot_ADHD, Bot_Learning, Bot_Peak, Bot_Attention,
});