/* global React */
// Pixel-art helper + characters + decorations + project thumbnails
// All characters drawn on a 16x16 grid (or similar), rendered as SVG <rect>s for crispness.

const { useMemo } = React;

/**
 * <PixelArt> — renders a grid of pixels from a string template.
 * `data`: multiline string. Each non-space character is a color key. '.' = transparent.
 * `colors`: { key: '#hex' }
 * `size`: pixel scale (default 6)
 */
function PixelArt({ data, colors, size = 6, className = '', style = {} }) {
  const rects = useMemo(() => {
    const rows = data.trim().split('\n').map(r => r.replace(/ /g, ''));
    const h = rows.length;
    const w = Math.max(...rows.map(r => r.length));
    const cells = [];
    for (let y = 0; y < h; y++) {
      for (let x = 0; x < rows[y].length; x++) {
        const ch = rows[y][x];
        if (colors[ch]) cells.push({ x, y, c: colors[ch] });
      }
    }
    return { w, h, cells };
  }, [data, colors]);
  return (
    <svg
      className={`pixel-svg ${className}`}
      style={style}
      width={rects.w * size}
      height={rects.h * size}
      viewBox={`0 0 ${rects.w} ${rects.h}`}
      shapeRendering="crispEdges"
    >
      {rects.cells.map((c, i) => (
        <rect key={i} x={c.x} y={c.y} width="1.02" height="1.02" fill={c.c} />
      ))}
    </svg>
  );
}

/* =========================================================
   TEAM CHARACTERS — 16x16 (or 18x18) grids
   ========================================================= */

// 박지오 — 총괄 (Director) — wizard hat + star wand
const LEAD_DATA = `
................
.......PP.......
......PPSP......
.....PSSSPP.....
....PPSSSSPP....
.....PPPPPP.....
....FFFFFFFF....
...FFhhFFhhFF...
...FFooFFooFF...
...FFFFmmFFFF...
....FFmmmmFF....
....FFFFFFFF....
...CCCWWWWCCC...
..CCCCWWWWCCCC..
..CCCC.WW.CCCC..
...CC..WW..CC...
....BB.....BB...
....BB.....BB...
`;
const LEAD_COLORS = {
  P: '#8B7BC4',  // purple hat
  S: '#FFE89A',  // gold star band
  F: '#FFE0CB',  // face skin
  h: '#FFFFFF',  // eye white
  o: '#2E2548',  // eye dark
  m: '#FF9FB8',  // cheeks/mouth
  C: '#FFFFFF',  // shirt
  W: '#E0D7FF',  // collar/tie
  B: '#5F4E8F',  // legs/shoes
};

// 윤하늘 — 기획자 (Planner) — glasses + clipboard
const PLANNER_DATA = `
................
.....hhhhhh.....
....hhhhhhhh....
...hhhhhhhhhh...
...hFFFFFFFFh...
....FFFFFFFF....
...FGGFFFFGGF...
...FGoGFFGoGF...
...FGGFFFFGGF...
....FFFFmmFF....
....FFFmmmFF....
....FFFFFFFF....
...PPPPPPPPPP...
..PPCCCCCCCCPP..
..PPCnnnnnnCPP..
..PPCnnnnnnCPP..
...PPPPPPPPP....
....BB....BB....
`;
const PLANNER_COLORS = {
  h: '#D88BB8',  // hair pink
  F: '#FFE0CB',  // face
  G: '#FFFFFF',  // glasses lens
  o: '#2E2548',  // pupil/glasses frame
  m: '#FF9FB8',  // mouth
  P: '#FFD6F0',  // shirt pink
  C: '#FFFFFF',  // clipboard
  n: '#D88BB8',  // clipboard lines
  B: '#5F4E8F',
};

// 정코딩 — 개발자 (Developer) — headphones + laptop
const DEV_DATA = `
................
....KKKKKKKK....
...KKHHHHHHKK...
..KHHHHHHHHHHK..
.KHFFFFFFFFFFHK.
.KHFFFFFFFFFFHK.
.KHFooFFFFooFHK.
.KHFFFFFFFFFFHK.
.KHFFFFmmFFFFHK.
..KFFFmmmmFFFK..
...FFFFFFFFFF...
....FFFFFFFF....
...CCCCCCCCCC...
..CCCCCCCCCCCC..
..LLLLLLLLLLLL..
..LSSSSSSSSSSL..
..LSnSnnnSnSSL..
..LLLLLLLLLLLL..
`;
const DEV_COLORS = {
  K: '#2E2548',  // headphone band
  H: '#5BA8B5',  // headphone pad cyan
  F: '#FFE0CB',
  o: '#2E2548',
  m: '#FF9FB8',
  C: '#C4F1F9',  // shirt cyan
  L: '#5F4E8F',  // laptop body
  S: '#FFFFFF',  // screen
  n: '#5BA8B5',  // code lines
};

// 한도윤 — 디자이너 (Designer) — beret + brush
const DESIGNER_DATA = `
................
.....BBBBBB.....
....BBBBBBBB....
...BBBBBBBBBB...
....NNNNNNNN....
...FFFFFFFFFF...
...FFooFFooFF...
...FFFFFFFFFF...
....FFFmmFFF....
....FFFmmFFF....
....FFFFFFFF....
....FFFFFFFF....
...YYYYYYYYYY...
..YYY.RRRRR.YYY.
..YY..RRRRR..YY.
......RRRRR.....
......WWWWW.....
......WWWWW.....
`;
const DESIGNER_COLORS = {
  B: '#D4A82E',  // beret yellow
  N: '#FFE89A',  // beret band
  F: '#FFE0CB',
  o: '#2E2548',
  m: '#FF9FB8',
  Y: '#FFF2C4',  // shirt
  R: '#D88BB8',  // brush handle pink
  W: '#FFFFFF',  // brush tip
};

// Exported character components
function CharLead({ size = 8, className = '' }) {
  return <PixelArt data={LEAD_DATA} colors={LEAD_COLORS} size={size} className={className} />;
}
function CharPlanner({ size = 8, className = '' }) {
  return <PixelArt data={PLANNER_DATA} colors={PLANNER_COLORS} size={size} className={className} />;
}
function CharDev({ size = 8, className = '' }) {
  return <PixelArt data={DEV_DATA} colors={DEV_COLORS} size={size} className={className} />;
}
function CharDesigner({ size = 8, className = '' }) {
  return <PixelArt data={DESIGNER_DATA} colors={DESIGNER_COLORS} size={size} className={className} />;
}

// 민트 디자이너 아바타 (갈색 단발 + 안경 + 민트 셔츠) — 보조(현재 미사용)
const DESIGNER2_DATA = `
................
....HHHHHHHH....
...HHHHHHHHHH...
...HHHHHHHHHH...
...HHHHHHHHHH...
...HFFFFFFFFH...
...FGGFFFFGGF...
...FFFFFFFFFF...
...FFFFmmFFFF...
...FFFFFFFFFF...
...HFFFFFFFFH...
....FFFFFFFF....
...TTTTTTTTTT...
..TTT.PPPPP.TTT.
..TT..PPPPP..TT.
......PPPPP.....
......WWWWW.....
......WWWWW.....
`;
const DESIGNER2_COLORS = {
  H: '#6E5A43',  // brown bob hair
  F: '#FFE0CB',  // face
  G: '#2E2548',  // glasses
  m: '#FF9FB8',  // mouth
  T: '#A0E0BD',  // mint shirt
  P: '#3FA98C',  // mint tool handle
  W: '#FFFFFF',  // tool tip
};
function CharDesigner2({ size = 8, className = '' }) {
  return <PixelArt data={DESIGNER2_DATA} colors={DESIGNER2_COLORS} size={size} className={className} />;
}

/* =========================================================
   DECORATIONS — clouds, stars, sparkles, hearts
   ========================================================= */

const CLOUD_DATA = `
..AAAAAA....
.AAAAAAAAA..
AAAAAAAAAAAA
AAAAAAAAAAAA
.AAAAAAAAAA.
..AAAAAAAA..
`;
const STAR_DATA = `
.....SS.....
.....SS.....
....SSSS....
SSSSSSSSSSSS
.SSSSSSSSSS.
..SSSSSSSS..
...SSSSSS...
..SSSSSSSS..
.SSS.SS.SSS.
SS...SS...SS
`;
const HEART_DATA = `
.AA..AA.
AAAAAAAA
AAAAAAAA
.AAAAAA.
..AAAA..
...AA...
`;
const SPARKLE_DATA = `
....S....
....S....
.S..S..S.
.SS.S.SS.
.SSSSSSS.
SSSSSSSSS
.SSSSSSS.
.SS.S.SS.
.S..S..S.
....S....
....S....
`;
const DIAMOND_DATA = `
...DDDD...
..DDDDDD..
.DDDDDDDD.
DDDDDDDDDD
.DDDDDDDD.
..DDDDDD..
...DDDD...
....DD....
`;
const FLOWER_DATA = `
.PP..PP.
PPPPPPPP
PPYYYYPP
PPYYYYPP
PPPPPPPP
.PPPPPPP
..PP.PP.
`;

function Cloud({ size = 5, color = '#FFFFFF', className = '', style }) {
  return <PixelArt data={CLOUD_DATA} colors={{ A: color }} size={size} className={className} style={style} />;
}
function Star({ size = 4, color = '#FFE89A', className = '', style }) {
  return <PixelArt data={STAR_DATA} colors={{ S: color }} size={size} className={className} style={style} />;
}
function Heart({ size = 5, color = '#FF9FB8', className = '', style }) {
  return <PixelArt data={HEART_DATA} colors={{ A: color }} size={size} className={className} style={style} />;
}
function Sparkle({ size = 4, color = '#8B7BC4', className = '', style }) {
  return <PixelArt data={SPARKLE_DATA} colors={{ S: color }} size={size} className={className} style={style} />;
}
function Diamond({ size = 4, color = '#5BA8B5', className = '', style }) {
  return <PixelArt data={DIAMOND_DATA} colors={{ D: color }} size={size} className={className} style={style} />;
}
function Flower({ size = 5, colorA = '#FFD6F0', colorB = '#FFF2C4', className = '', style }) {
  return <PixelArt data={FLOWER_DATA} colors={{ P: colorA, Y: colorB }} size={size} className={className} style={style} />;
}

/* =========================================================
   SERVICE ICONS — pixel art
   ========================================================= */

const ICO_BRAND = `
.....AA.....
....AAAA....
...AAAAAA...
..AAAAAAAA..
.AAAAAAAAAA.
AAAAAAAAAAAA
AABBAABBAABB
AAAAAAAAAAAA
.AAAAAAAAAA.
..AAAAAAAA..
...AAAAAA...
....AAAA....
`;
const ICO_WEB = `
WWWWWWWWWWWW
WSSSSSSSSSSW
WSdddd.....W
WS.........W
WS.LLLLLLL.W
WS.LL...LL.W
WS.LLLLLLL.W
WS.........W
WS.RRRR....W
WS.........W
WSSSSSSSSSSW
WWWWWWWWWWWW
`;
const ICO_APP = `
.BBBBBBBB.
BBBBBBBBBB
BWWWWWWWWB
BWWWWWWWWB
BWSSSSSSWB
BWSdddSSWB
BWSSSSSSWB
BWWWWWWWWB
BWWWooWWWB
BBBBBBBBBB
.BBBBBBBB.
`;
const ICO_ROCKET = `
....RR....
...RRRR...
..RRWWRR..
..RWWWWR..
..RRWWRR..
..RBBBBR..
..RBOOBR..
..RBBBBR..
..RR..RR..
..R....R..
.RR....RR.
.F......F.
`;
const ICO_CHART = `
............
.....CC.....
.....CC.....
..CC.CC.....
..CC.CC.CC..
..CC.CC.CC..
..CCCCCCCC..
.gggggggggg.
............
`;
const ICO_CHAT = `
.BBBBBBBBB..
BBBBBBBBBBB.
BWWWWWWWWWB.
BWooWoWoooB.
BWWWWWWWWWB.
BBBBBBBBBBB.
.BBBBBB.....
....BB......
`;

const ICO_SWATCH = `
............
.RRRR.YYYY..
.RRRR.YYYY..
.RRRR.YYYY..
.RRRR.YYYY..
............
.BBBB.GGGG..
.BBBB.GGGG..
.BBBB.GGGG..
.BBBB.GGGG..
............
`;

const ICO_FLAG = `
............
.K..........
.KFFFFFFFF..
.KFWWWWWWWF.
.KFWWSSSSWF.
.KFWSSPSSWF.
.KFWSSSSSWF.
.KFWWSSSWWF.
.KFWWWWWWWF.
.KFFFFFFFF..
.K..........
.KK.........
`;

function Icon({ data, colors, size = 5 }) {
  return <PixelArt data={data} colors={colors} size={size} />;
}
function IcoBrand({ size = 5 }) {
  return <Icon data={ICO_BRAND} size={size} colors={{ A: '#8B7BC4', B: '#FFE89A' }} />;
}
function IcoWeb({ size = 5 }) {
  return <Icon data={ICO_WEB} size={size} colors={{
    W: '#2E2548', S: '#FFFFFF', d: '#D88BB8', L: '#8B7BC4', R: '#5BA8B5'
  }} />;
}
function IcoApp({ size = 5 }) {
  return <Icon data={ICO_APP} size={size} colors={{
    B: '#2E2548', W: '#FFFFFF', S: '#FFD6F0', d: '#D88BB8', o: '#8B7BC4'
  }} />;
}
function IcoRocket({ size = 5 }) {
  return <Icon data={ICO_ROCKET} size={size} colors={{
    R: '#D88BB8', W: '#FFFFFF', B: '#8B7BC4', O: '#FFE89A', F: '#FF9FB8'
  }} />;
}
function IcoChart({ size = 5 }) {
  return <Icon data={ICO_CHART} size={size} colors={{ C: '#5BA8B5', g: '#2E2548' }} />;
}
function IcoChat({ size = 5 }) {
  return <Icon data={ICO_CHAT} size={size} colors={{ B: '#8B7BC4', W: '#FFFFFF', o: '#2E2548' }} />;
}
function IcoSwatch({ size = 5 }) {
  return <Icon data={ICO_SWATCH} size={size} colors={{
    R: '#D88BB8', Y: '#D4A82E', B: '#5BA8B5', G: '#7CC4A5'
  }} />;
}
function IcoFlag({ size = 5 }) {
  return <Icon data={ICO_FLAG} size={size} colors={{
    K: '#5F4E8F', F: '#D88BB8', W: '#FFFFFF', S: '#FFE89A', P: '#FF9FB8'
  }} />;
}

/* =========================================================
   PROJECT THUMBNAILS — composed pixel-art scenes
   ========================================================= */

// 모찌배달 — Food delivery
const THUMB_DELIVERY = `
.................S......
.....C.C.C..............
....CCCCCCC.............
...CCCCCCCCC............
....BB.BB.BB.....S......
......B.B...............
........................
....cccccccc............
...c........c.SS........
...c.PPPPPP.c..S........
...c.PYYYYP.c..S........
...c.PYrrYP.c...........
...c.PYrrYP.c...........
...c.PYYYYP.c...........
...c.PPPPPP.c...........
...c........c...........
....cccccccc.........R..
......c..c..........RR..
.....cc..cc........RRR..
....cccccccc......RRRR..
...cccccccccc.....RRRRR.
.MMMMMMMMMMMMMMMMMMMMMMM
.MMMMMMMMMMMMMMMMMMMMMMM
`;

// 별다방 — Coffee/cafe loyalty
const THUMB_CAFE = `
........SS..............
.......SSSS.............
........SS......SS......
................SS......
....BBBBBBBBBBB.........
...BWWWWWWWWWWWB........
...BWBBBBBBBBBWB....SS..
...BWB.......BWB....SS..
...BWB.cccc..BWB........
...BWB.c..c..BWB.S......
...BWB.cccc..BWB.S......
...BWB.......BWB........
...BWBBBBBBBBBWB.SSS....
...BWWWWWWWWWWWBSSSSS...
...BBBBBBBBBBBBB.SSS....
.....BBBBBBBBB...S......
.MMMMMMMMMMMMMMMMMMMMMMM
.MMMMMMMMMMMMMMMMMMMMMMM
`;

// 또또톡 — Messaging app
const THUMB_CHAT = `
........................
....SS.........SS.......
....SS.........SS.......
....BBBBBBBBBBBBBB......
....BWWWWWWWWWWWWB......
....BWoooWoooWoWWB......
....BWooWWWooWooWB......
....BWWWWWWWWWWWWB......
....BBBBBBBBBBBBBB......
......BBBB..............
........BB......YY......
................YY......
......CCCCCCCCCCCC......
......CWWWWWWWWWWC......
......CWLLLLLLWWWC......
......CWLLWWLLLWWC......
......CWWWWWWWWWWC......
......CCCCCCCCCCCC......
.MMMMMMMMMMMMMMMMMMMMMMM
.MMMMMMMMMMMMMMMMMMMMMMM
`;

// 콘텐츠랩 — Content management
const THUMB_DASH = `
........................
....BBBBBBBBBBBBBBBB....
....BWWWWWWWWWWWWWWB....
....BWccccwwwwwwwwWB....
....BWccccwwwwwwwwWB....
....BWWWWWWWWWWWWWWB....
....BWaaaaaaaaWbbbbB....
....BWaaaaaaaaWbbbbB....
....BWaaaaaaaaWbbbbB....
....BWWWWWWWWWWWWWWB....
....BBBBBBBBBBBBBBBB....
........BBBBB...........
.....HHHHHHHHHHH........
.MMMMMMMMMMMMMMMMMMMMMMM
.MMMMMMMMMMMMMMMMMMMMMMM
`;

// 운동친구 — Fitness
const THUMB_FIT = `
........................
.........SS.............
.........SS.............
.......BBBBBB...........
......BBBBBBBB..........
......BBFFFFBB..........
......BBFFFFBB..........
.......BBBBBB...........
.........FF.............
....BBBBBBBBBBBB........
....BBBBBBBBBBBB........
......BBBBBBBB..........
.......BBBBBB...........
.......BB..BB...........
......BBB..BBB..........
.....BBBB..BBBB.........
.MMMMMMMMMMMMMMMMMMMMMMM
.MMMMMMMMMMMMMMMMMMMMMMM
`;

const THUMB_COLORS_BASE = {
  S: '#FFFFFF',           // sparkle/star highlight (default)
  W: '#FFFFFF',           // white surfaces
  B: '#2E2548',           // dark outline
  o: '#8B7BC4',           // accent purple
  M: 'rgba(255,255,255,0.30)', // ground line
  H: 'rgba(255,255,255,0.40)',
  c: '#D88BB8',
  C: '#FFFFFF',
  P: '#FFE89A',
  Y: '#FFB87F',
  r: '#D88BB8',
  R: '#FFFFFF',
  a: '#C4F1F9',
  b: '#FFF2C4',
  w: '#E0D7FF',
  L: '#5BA8B5',
  F: '#FF9FB8',
};

function ProjectThumb({ kind, size = 9 }) {
  let data;
  if (kind === 'delivery') data = THUMB_DELIVERY;
  else if (kind === 'cafe') data = THUMB_CAFE;
  else if (kind === 'chat') data = THUMB_CHAT;
  else if (kind === 'dash') data = THUMB_DASH;
  else if (kind === 'fit') data = THUMB_FIT;
  else data = THUMB_DELIVERY;
  return <PixelArt data={data} colors={THUMB_COLORS_BASE} size={size} />;
}

// Export to window for cross-file babel scope
Object.assign(window, {
  PixelArt,
  CharLead, CharPlanner, CharDev, CharDesigner,
  Cloud, Star, Heart, Sparkle, Diamond, Flower,
  IcoBrand, IcoWeb, IcoApp, IcoRocket, IcoChart, IcoChat, IcoSwatch, IcoFlag,
  ProjectThumb,
});