/** 바퀴벌레 포커 30초 규칙 요약 (docs/07 §5). Simple inline SVG + emoji; the screen's critter art lives in index.tsx. */
import type { QuickCard } from '../types';

/** A small upright card: face-down (pattern) or face-up with a critter emoji. */
function Card({ x, y, face, w = 44, h = 62, tilt = 0, red = false }: { x: number; y: number; face?: string; w?: number; h?: number; tilt?: number; red?: boolean }) {
  return (
    <g transform={`translate(${x} ${y}) rotate(${tilt})`}>
      <rect x={-w / 2} y={-h / 2} width={w} height={h} rx={6} fill={face ? '#fffaf0' : '#5b3f8c'} stroke={red ? '#b91c1c' : '#3b2a5c'} strokeWidth={red ? 3 : 1.5} />
      {face ? (
        <text x={0} y={9} textAnchor="middle" fontSize={26}>
          {face}
        </text>
      ) : (
        <text x={0} y={8} textAnchor="middle" fontSize={22} fill="#e7def5">
          ?
        </text>
      )}
    </g>
  );
}

function Person({ x, y, label }: { x: number; y: number; label: string }) {
  return (
    <g>
      <circle cx={x} cy={y} r={20} fill="#e0e7ff" stroke="#4f46e5" strokeWidth={1.5} />
      <text x={x} y={y + 7} textAnchor="middle" fontSize={20}>
        🙂
      </text>
      <text x={x} y={y + 38} textAnchor="middle" fontSize={12} fill="#333">
        {label}
      </text>
    </g>
  );
}

const GivePic = (
  <svg viewBox="0 0 260 170" width={260} height={170} aria-hidden>
    <Person x={36} y={110} label="나" />
    <Person x={224} y={110} label="받는 사람" />
    <Card x={130} y={112} tilt={-6} />
    <path d="M70 128 Q130 160 190 128" fill="none" stroke="#4f46e5" strokeWidth={2.5} strokeDasharray="5 4" markerEnd="url(#cpq-arrow)" />
    <defs>
      <marker id="cpq-arrow" viewBox="0 0 10 10" refX={6} refY={5} markerWidth={7} markerHeight={7} orient="auto">
        <path d="M0 0 L10 5 L0 10 z" fill="#4f46e5" />
      </marker>
    </defs>
    <rect x={64} y={14} width={132} height={44} rx={14} fill="#fff" stroke="#333" strokeWidth={1.5} />
    <path d="M90 58 L80 74 L104 58" fill="#fff" stroke="#333" strokeWidth={1.5} />
    <text x={130} y={43} textAnchor="middle" fontSize={18} fontWeight={700} fill="#222">
      이건 쥐야!
    </text>
  </svg>
);

const ChoosePic = (
  <svg viewBox="0 0 260 170" width={260} height={170} aria-hidden>
    <Card x={130} y={40} />
    <rect x={14} y={84} width={110} height={36} rx={10} fill="#dcfce7" stroke="#15803d" strokeWidth={2} />
    <text x={69} y={108} textAnchor="middle" fontSize={16} fontWeight={700} fill="#14532d">
      ⭕ 진짜!
    </text>
    <rect x={136} y={84} width={110} height={36} rx={10} fill="#fee2e2" stroke="#b91c1c" strokeWidth={2} />
    <text x={191} y={108} textAnchor="middle" fontSize={16} fontWeight={700} fill="#7f1d1d">
      ❌ 거짓말!
    </text>
    <rect x={30} y={128} width={200} height={36} rx={10} fill="#dbeafe" stroke="#1d4ed8" strokeWidth={2} />
    <text x={130} y={152} textAnchor="middle" fontSize={15} fontWeight={700} fill="#1e3a8a">
      👁 몰래 보고 넘기기
    </text>
  </svg>
);

const LosePic = (
  <svg viewBox="0 0 260 170" width={260} height={170} aria-hidden>
    <Card x={40} y={66} face="🐀" red />
    <Card x={100} y={66} face="🐀" red />
    <Card x={160} y={66} face="🐀" red />
    <Card x={220} y={66} face="🐀" red />
    <Card x={70} y={140} face="🦇" w={34} h={46} />
    <Card x={110} y={140} face="🐸" w={34} h={46} />
    <text x={186} y={147} textAnchor="middle" fontSize={17} fontWeight={800} fill="#b91c1c">
      4장이면 패배
    </text>
  </svg>
);

export const quickStart: QuickCard[] = [
  {
    pic: GivePic,
    alt: '내가 뒤집은 카드를 다른 사람에게 건네며 "이건 쥐야!"라고 말해요',
    title: '카드를 건네며 말해요',
    text: '내 차례에 카드 한 장을 뒤집어 다른 사람에게 주며 무슨 벌레인지 말해요. 진짜를 말해도, 거짓말을 해도 돼요.',
  },
  {
    pic: ChoosePic,
    alt: '받은 카드 아래에 진짜, 거짓말, 몰래 보고 넘기기 버튼이 있어요',
    title: '받으면 맞히거나 넘겨요',
    text: '받은 사람은 [진짜!]나 [거짓말!]을 골라요. 맞히면 건넨 사람이, 틀리면 받은 사람이 카드를 앞마당에 놓아요. 3명 이상이면 몰래 보고 넘길 수도 있어요.',
  },
  {
    pic: LosePic,
    alt: '앞마당에 쥐 카드 4장이 빨간 테두리로 모여 있어요',
    title: '같은 벌레가 모이면 져요',
    text: '앞마당에 같은 벌레가 4장(2명이면 5장, 방 설정에 따라 다름) 모인 사람 한 명이 지고, 나머지는 모두 이겨요.',
  },
];