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

/** A small play card: brown (instant) or blue (stays in front of you). */
function Mini({ icon, name, blue = false, back = false }: { icon: string; name: string; blue?: boolean; back?: boolean }) {
  return (
    <div
      style={{
        width: 50,
        height: 72,
        borderRadius: 8,
        border: `3px solid ${back ? '#7c2d12' : blue ? '#2563eb' : '#92400e'}`,
        background: back ? 'repeating-linear-gradient(45deg, #9a3412 0 6px, #c2410c 6px 12px)' : '#fffbeb',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 2,
        boxSizing: 'border-box',
      }}
    >
      {!back && <span style={{ fontSize: 28, lineHeight: 1 }}>{icon}</span>}
      {!back && <span style={{ fontSize: 12, fontWeight: 800, color: '#111827' }}>{name}</span>}
    </div>
  );
}

const row = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: 250, height: 150 } as const;
const arrow = { fontSize: 22, fontWeight: 900, color: '#374151' } as const;

function Badge({ icon, name, color, hidden = false }: { icon: string; name: string; color: string; hidden?: boolean }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, width: 52 }}>
      <span style={{ fontSize: 30, lineHeight: 1.1 }}>{hidden ? '🂠' : icon}</span>
      <span style={{ fontSize: 12, fontWeight: 800, color: '#fff', background: hidden ? '#6b7280' : color, borderRadius: 6, padding: '1px 5px', whiteSpace: 'nowrap' }}>{hidden ? '비밀' : name}</span>
    </div>
  );
}

export const quickStart: QuickCard[] = [
  {
    pic: (
      <div aria-hidden style={row}>
        <div style={{ display: 'flex', gap: 2 }}>
          <Mini icon="" name="" back />
          <Mini icon="" name="" back />
        </div>
        <span style={arrow}>➜</span>
        <Mini icon="💥" name="뱅!" />
        <Mini icon="🛢️" name="술통" blue />
      </div>
    ),
    alt: '카드 2장을 받은 뒤 뱅! 카드를 내고 파란 술통 카드를 앞에 놓아요',
    title: '받고, 내고, 마쳐요',
    text: '내 차례엔 카드 2장을 받고, 원하는 만큼 카드를 내요. 파란 카드는 내 앞에 놓여 계속 효과가 있어요. 다 냈으면 [턴 마치기].',
  },
  {
    pic: (
      <div aria-hidden style={row}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <span style={{ fontSize: 34 }}>🤠</span>
          <Mini icon="💥" name="뱅!" />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <span style={arrow}>➜</span>
          <span style={{ fontSize: 12, fontWeight: 800, color: '#15803d' }}>거리 1</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <span style={{ fontSize: 34 }}>🤠</span>
          <Mini icon="💨" name="빗나감!" />
        </div>
      </div>
    ),
    alt: '한 사람이 뱅!을 쏘고, 거리 1인 상대가 빗나감!으로 막아요',
    title: '뱅!은 빗나감!으로 막아요',
    text: '뱅!은 사거리 안의 한 명을 쏴요(한 턴에 1번). 맞은 사람은 빗나감!을 내서 막거나 생명 1을 잃어요. 생명이 다 떨어지면 쓰러져요.',
  },
  {
    pic: (
      <div aria-hidden style={{ ...row, gap: 4 }}>
        <Badge icon="⭐" name="보안관" color="#b45309" />
        <Badge icon="🛡️" name="부관" color="#2563eb" hidden />
        <span style={{ ...arrow, fontSize: 20 }}>⚔️</span>
        <Badge icon="🎯" name="무법자" color="#b91c1c" hidden />
        <Badge icon="🃏" name="배신자" color="#7c3aed" hidden />
      </div>
    ),
    alt: '보안관만 공개되어 있고 다른 사람들의 역할은 비밀로 가려져 있어요',
    title: '역할마다 목표가 달라요',
    text: '⭐보안관만 공개돼요. 보안관·부관은 무법자와 배신자를, 무법자는 보안관을 쓰러뜨리면 이겨요. 배신자는 끝까지 혼자 남아야 해요.',
  },
];