/* ============================================================
   mascots.jsx — ドット(8bit)2案：ピコ & ぽやん(パンダ)
   props.pose: "stand" | "wave" | "sleep"
   ============================================================ */

const ZZZ = () => (
  <div className="zzz"><span>Z</span><span>z</span><span>z</span></div>
);

/* ---------- ピクセル描画 ---------- */
function PixelSprite({ rows, palette, cell = 11 }) {
  const W = Math.max(...rows.map((r) => r.length));
  const H = rows.length;
  const cells = [];
  rows.forEach((row, r) => {
    for (let c = 0; c < row.length; c++) {
      const ch = row[c];
      if (ch === "." || ch === " ") continue;
      const isEye = ch === "d";
      const closed = ch === "-";
      if ((isEye || closed) && palette.dbase) {
        // 目の下に黒(またはボディ色)のベースを敷く → まばたきで縮んでも背景が透けない
        cells.push(
          <rect
            key={`${r}-${c}-b`}
            x={c * cell}
            y={r * cell}
            width={cell + 0.5}
            height={cell + 0.5}
            fill={palette.dbase}
          />
        );
      }
      cells.push(
        <rect
          key={`${r}-${c}`}
          className={isEye ? "px-eye" : ""}
          x={c * cell}
          y={closed ? r * cell + cell * 0.42 : r * cell}
          width={cell + 0.5}
          height={closed ? cell * 0.32 : cell + 0.5}
          fill={palette[ch] || "var(--ink)"}
        />
      );
    }
  });
  return (
    <svg width={W * cell} height={H * cell} shapeRendering="crispEdges">
      {cells}
    </svg>
  );
}

/* ---------- 汎用ピクセルキャラ ---------- */
function PixelCreature({ pose = "stand", cls, palette, stand, sleep, wave, handColor }) {
  const rows = pose === "sleep" ? sleep : pose === "wave" ? (wave || stand) : stand;
  const sq = (bg) => ({ width: 11, height: 11, background: bg });
  return (
    <div className={`mascot pixel ${cls} pose-${pose}`}>
      <div className="bob">
        <ZZZ />
        <PixelSprite rows={rows} palette={palette} />
        {pose === "wave" && (
          <div className="px-hand" style={{ position: "absolute", top: 24, right: 1, display: "grid", gridTemplateColumns: "11px 11px", gridTemplateRows: "11px 11px" }}>
            <div style={{ ...sq(handColor), gridArea: "1 / 2" }}></div>
            <div style={{ ...sq(handColor), gridArea: "2 / 1" }}></div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   ① ピコ — 8bitドット（セージ）／頭ぺたんこ・両手つき
   ============================================================ */
const PICO_PAL = {
  o: "var(--sage)", s: "var(--sage-d)", a: "var(--sage)",
  d: "var(--ink)", dbase: "var(--sage)", p: "var(--blush)", m: "var(--ink)", "-": "var(--ink)",
};
//   0123456789012345
const PICO_STAND = [
  "...oooooooooo...",
  "..oooooooooooo..",
  "..oooooooooooo..",
  "..oooooooooooo..",
  "..oodoooooodoo..",
  ".aopooommooopoa.",
  "a.oooooooooooo.a",
  "..oooooooooooo..",
  "...oo......oo...",
  "...ss......ss...",
];
const PICO_WAVE = [
  "...oooooooooo...",
  "..oooooooooooo..",
  "..oooooooooooo..",
  "..oooooooooooo..",
  "..oodoooooodoo..",
  ".aopooommooopo..",
  "a.oooooooooooo..",
  "..oooooooooooo..",
  "...oo......oo...",
  "...ss......ss...",
];
const PICO_SLEEP = [
  "...oooooooooo...",
  "..oooooooooooo..",
  "..oooooooooooo..",
  "..oooooooooooo..",
  "..oo-oooooo-oo..",
  ".aopooommooopoa.",
  "a.oooooooooooo.a",
  "..oooooooooooo..",
  "...oo......oo...",
  "...ss......ss...",
];
function Pixel({ pose = "stand" }) {
  return (
    <PixelCreature pose={pose} cls="pico" palette={PICO_PAL}
      stand={PICO_STAND} wave={PICO_WAVE} sleep={PICO_SLEEP} handColor="var(--sage)" />
  );
}

/* ============================================================
   ② ぽやん — ドット化パンダ（ピコとおそろいの8bit）
   ============================================================ */
const PANDA_PAL = {
  o: "oklch(0.93 0.006 80)", k: "var(--ink)", a: "var(--ink)", s: "var(--ink)",
  d: "#ffffff", dbase: "var(--ink)", p: "var(--blush)", m: "var(--ink)", "-": "var(--ink)",
};
//   0123456789012345
const PANDA_STAND = [
  "...kk......kk...",
  "..oooooooooooo..",
  "..ookkooookkoo..",
  "..oodkooookdoo..",
  "..opoookkooopo..",
  "..ooooommooooo..",
  ".kooooooooooook.",
  "k.oooooooooooo.k",
  "...oooooooooo...",
  "...kk......kk...",
  "...kk......kk...",
];
const PANDA_WAVE = [
  "...kk......kk...",
  "..oooooooooooo..",
  "..ookkooookkoo..",
  "..oodkooookdoo..",
  "..opoookkooopo..",
  "..ooooommooooo..",
  ".koooooooooooo..",
  "k.oooooooooooo..",
  "...oooooooooo...",
  "...kk......kk...",
  "...kk......kk...",
];
const PANDA_SLEEP = [
  "...kk......kk...",
  "..oooooooooooo..",
  "..ookkooookkoo..",
  "..ookkooookkoo..",
  "..opoookkooopo..",
  "..ooooommooooo..",
  ".kooooooooooook.",
  "k.oooooooooooo.k",
  "...oooooooooo...",
  "...kk......kk...",
  "...kk......kk...",
];
function PixelPanda({ pose = "stand" }) {
  return (
    <PixelCreature pose={pose} cls="poyan" palette={PANDA_PAL}
      stand={PANDA_STAND} wave={PANDA_WAVE} sleep={PANDA_SLEEP} handColor="var(--ink)" />
  );
}

/* ---------- アイコン用クロップ ---------- */
function Avatar({ Comp, scale, ty, bg }) {
  return (
    <div className="avatar" style={{ background: bg }}>
      <div className="avatar-inner" style={{ transform: `translate(-50%, -50%) scale(${scale}) translateY(${ty}px)` }}>
        <Comp pose="stand" />
      </div>
    </div>
  );
}

/* ---------- レジストリ（2案） ---------- */
const MASCOTS = [
  {
    id: "pico", no: "01", name: "ピコ", roman: "Piko",
    Comp: Pixel, tint: "var(--sage)",
    desc: "8bitドットの相棒。頭はぺたんと平ら、両手をぱたぱた。",
    avatar: { scale: 1.35, ty: 3, bg: "oklch(0.94 0.02 150)" },
  },
  {
    id: "poyan", no: "02", name: "ぽやん", roman: "Poyan",
    Comp: PixelPanda, tint: "oklch(0.80 0.05 235)",
    desc: "パンダをドットに。ピコとおそろいの8bit仲間。",
    avatar: { scale: 1.2, ty: 0, bg: "oklch(0.93 0.03 235)" },
  },
];

Object.assign(window, { Pixel, PixelPanda, PixelSprite, PixelCreature, Avatar, ZZZ, MASCOTS });