/** 구십구 30초 규칙 요약 (docs/07 §5). */
import type { QuickCard } from '../types';

/** A 44 × 62 card at (x, y). */
function Card({ label, x, y, color = '#1d4ed8', dim, ok }: { label: string; x: number; y: number; color?: string; dim?: boolean; ok?: boolean }) {
  return (
    <g transform={`translate(${x} ${y})`} opacity={dim ? 0.45 : 1}>
      {ok && <rect x={-3} y={-3} width={50} height={68} rx={9} fill="none" stroke="#16a34a" strokeWidth={3} />}
      <rect width={44} height={62} rx={7} fill="#fffef9" stroke={color} strokeWidth={2.5} />
      <text x={22} y={40} textAnchor="middle" fontSize={label.length > 2 ? 15 : 22} fontWeight={900} fill={color}>
        {label}
      </text>
    </g>
  );
}

function Dial({ n, x, y, r = 30, hot }: { n: number; x: number; y: number; r?: number; hot?: boolean }) {
  return (
    <g>
      <circle cx={x} cy={y} r={r} fill={hot ? '#b91c1c' : '#1f2937'} />
      <text x={x} y={y + 9} textAnchor="middle" fontSize={26} fontWeight={900} fill="#fff">
        {n}
      </text>
    </g>
  );
}

export const quickStart: QuickCard[] = [
  {
    pic: (
      <svg viewBox="0 0 250 110" width={250} height={110} aria-hidden>
        <Dial n={85} x={40} y={50} />
        <text x={84} y={58} fontSize={24} fontWeight={900} fill="#374151">+</text>
        <Card label="10" x={104} y={19} />
        <text x={160} y={58} fontSize={24} fontWeight={900} fill="#374151">=</text>
        <Dial n={95} x={212} y={50} hot />
      </svg>
    ),
    alt: '합계 85에 10 카드를 내서 95가 되는 모습',
    title: '내 카드를 더해요',
    text: '차례마다 카드 1장을 내고 그 수만큼 합계를 바꿔요. 보통은 낸 뒤 1장을 다시 받아요.',
  },
  {
    pic: (
      <svg viewBox="0 0 250 120" width={250} height={120} aria-hidden>
        <Dial n={95} x={36} y={50} hot />
        <Card label="8" x={90} y={19} dim />
        <text x={112} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#b91c1c">103 ✕</text>
        <Card label="7" x={144} y={19} dim />
        <text x={166} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#b91c1c">102 ✕</text>
        <Card label="±9" x={198} y={19} color="#7c3aed" ok />
        <text x={220} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#15803d">−9 → 86</text>
      </svg>
    ),
    alt: '합계 95에서 8과 7은 99를 넘어 어둡고, ±9 카드만 빼기로 낼 수 있어요',
    title: '99를 넘기면 안 돼요',
    text: '합계가 99를 넘게 되는 카드는 낼 수 없어요. 낼 카드가 하나도 없으면 져요(탈락하거나 목숨을 잃어요).',
  },
  {
    pic: (
      <svg viewBox="0 0 250 90" width={250} height={90} aria-hidden>
        <Card label="±9" x={8} y={14} color="#7c3aed" />
        <Card label="±10" x={68} y={14} color="#7c3aed" />
        <Card label="0" x={128} y={14} color="#0f766e" />
        <Card label="조커" x={188} y={14} color="#be185d" />
      </svg>
    ),
    alt: '특수 카드 ±9, ±10, 0, 조커',
    title: '특수 카드로 버텨요',
    text: '±9·±10은 빼기도 돼요. 0은 방향만 바꾸고, 조커는 합계를 원하는 수(보통 60~99)로 만들어요. 끝까지 남으면 이겨요.',
  },
];