/** 고스톱 30초 규칙 요약 (docs/07 §5). */
import { HwatuCard, type HwatuInfo } from '../../components/cards/HwatuCard';
import type { QuickCard } from '../types';

const card = (id: number, month: number, kind: HwatuInfo['kind'], name: string, tti?: HwatuInfo['tti']): HwatuInfo => ({ id, month, kind, name, tti });

const row = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 } as const;
const label = { fontWeight: 900, fontSize: '1.4rem' } as const;

function Match() {
  return (
    <div style={row} aria-hidden>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
        <HwatuCard card={card(8, 3, 'gwang', '3월 광')} size="md" highlight />
        <small>내 손패</small>
      </div>
      <span style={label}>→</span>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
        <HwatuCard card={card(10, 3, 'pi', '3월 피')} size="md" />
        <small>바닥</small>
      </div>
      <span style={label}>=</span>
      <div style={{ display: 'flex' }}>
        <HwatuCard card={card(8, 3, 'gwang', '3월 광')} size="sm" />
        <HwatuCard card={card(10, 3, 'pi', '3월 피')} size="sm" style={{ marginLeft: -16 }} />
      </div>
    </div>
  );
}

function Jokbo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }} aria-hidden>
      <div style={row}>
        <HwatuCard card={card(1, 1, 'tti', '1월 홍단', 'hong')} size="sm" />
        <HwatuCard card={card(5, 2, 'tti', '2월 홍단', 'hong')} size="sm" />
        <HwatuCard card={card(9, 3, 'tti', '3월 홍단', 'hong')} size="sm" />
        <span style={label}>홍단 3점</span>
      </div>
      <div style={row}>
        <HwatuCard card={card(0, 1, 'gwang', '1월 광')} size="sm" />
        <HwatuCard card={card(8, 3, 'gwang', '3월 광')} size="sm" />
        <HwatuCard card={card(28, 8, 'gwang', '8월 광')} size="sm" />
        <span style={label}>삼광 3점</span>
      </div>
    </div>
  );
}

function GoStop() {
  const btn = (bg: string, text: string, sub: string) => (
    <div style={{ background: bg, color: '#fff', borderRadius: 14, width: 104, height: 84, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: 900, fontSize: '1.6rem', lineHeight: 1.1 }}>
      {text}
      <small style={{ fontSize: '.8rem', fontWeight: 600 }}>{sub}</small>
    </div>
  );
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }} aria-hidden>
      <strong style={{ fontSize: '1.2rem' }}>7점 났어요!</strong>
      <div style={row}>
        {btn('#dc2626', '고', '계속해요')}
        {btn('#2563eb', '스톱', '받고 끝내요')}
      </div>
    </div>
  );
}

export const quickStart: QuickCard[] = [
  {
    pic: <Match />,
    alt: '손패의 3월 광을 내서 바닥의 3월 피와 짝지어 두 장을 가져와요',
    title: '같은 월끼리 먹어요',
    text: '내 차례에 손패 1장을 내고 더미에서 1장을 뒤집어요. 바닥에 같은 월(숫자) 패가 있으면 함께 가져와요.',
  },
  {
    pic: <Jokbo />,
    alt: '홍단 띠 3장은 3점, 광 3장은 3점이라는 그림이에요',
    title: '모은 패로 점수를 내요',
    text: '광 3장, 홍단·청단·초단 띠 3장, 피 10장(쌍피는 2장 값)처럼 족보를 모으면 점수가 나요. 게임 중 [족보표]에서 볼 수 있어요.',
  },
  {
    pic: <GoStop />,
    alt: '7점이 나서 빨간 고 버튼과 파란 스톱 버튼이 보여요',
    title: '고? 스톱?',
    text: '기준 점수(기본 맞고 7점, 고스톱 3점)가 나면 스톱으로 끝내고 이기거나, 고로 더 키워요. 고 뒤에 남이 먼저 나면 손해예요.',
  },
];