// stickers.jsx — 30 hand-drawn watercolor SVG stickers for the dream collage
// Each sticker exports { id, name, nameEn, categories, keywords, render() }
// Style: 1.4px ink stroke, soft watercolor wash underneath in palette colors.

const INK = "#2a2018";
const WINE = "#8b3a3a";
const FOREST = "#3a5a4a";
const GOLD = "#c89668";
const ROSE = "#c97b7b";
const DUST = "#6b7a8f";
const NIGHT = "#2a3856";

// Shared filter for watercolor edge wobble
const WC_FILTER = (
  <filter id="wc" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" seed="3" />
    <feDisplacementMap in="SourceGraphic" scale="2.5" />
  </filter>
);

const wash = (d, color, opacity = 0.32) => (
  <path d={d} fill={color} opacity={opacity} filter="url(#wc)" />
);

const ink = (d, extra = {}) => (
  <path
    d={d}
    fill="none"
    stroke={INK}
    strokeWidth="1.4"
    strokeLinecap="round"
    strokeLinejoin="round"
    {...extra}
  />
);

// ============== STICKERS ==============
const STICKERS = [
  // --- celestial ---
  {
    id: "moon-crescent",
    name: "三日月",
    nameEn: "The Crescent",
    categories: ["celestial"],
    keywords: ["月", "夜", "眠り", "三日月", "光", "moon", "夢"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 30,20 C 65,18 78,38 70,62 C 60,86 32,86 22,68 C 38,72 56,60 56,40 C 56,28 46,22 30,20 Z", GOLD, 0.45)}
        {ink("M 32,18 C 67,18 80,38 72,62 C 62,86 32,86 22,66 C 40,72 58,62 58,40 C 58,28 48,20 32,18 Z")}
        {ink("M 40,30 C 45,32 47,35 46,38", { strokeWidth: 0.8, opacity: 0.5 })}
      </svg>
    ),
  },
  {
    id: "moon-full",
    name: "満月",
    nameEn: "Full Moon",
    categories: ["celestial"],
    keywords: ["月", "満月", "夜", "光", "moon", "fullmoon"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,15 C 75,15 86,32 86,52 C 86,75 70,86 50,86 C 30,86 14,75 14,52 C 14,32 25,15 50,15 Z", GOLD, 0.4)}
        {ink("M 50,16 C 74,16 84,32 84,52 C 84,74 70,84 50,84 C 30,84 16,74 16,52 C 16,32 26,16 50,16 Z")}
        {ink("M 36,40 C 40,42 42,46 40,50", { strokeWidth: 0.7, opacity: 0.6 })}
        {ink("M 60,38 C 65,40 67,45 64,48", { strokeWidth: 0.7, opacity: 0.6 })}
        {ink("M 48,60 C 54,62 58,66 56,72", { strokeWidth: 0.7, opacity: 0.6 })}
      </svg>
    ),
  },
  {
    id: "star",
    name: "星",
    nameEn: "Star",
    categories: ["celestial"],
    keywords: ["星", "光", "夜", "star", "希望"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,14 L 56,42 L 86,46 L 60,58 L 70,86 L 50,68 L 30,86 L 40,58 L 14,46 L 44,42 Z", WINE, 0.32)}
        {ink("M 50,14 L 56,42 L 86,46 L 60,58 L 70,86 L 50,68 L 30,86 L 40,58 L 14,46 L 44,42 Z")}
      </svg>
    ),
  },
  {
    id: "constellation",
    name: "星座",
    nameEn: "Constellation",
    categories: ["celestial"],
    keywords: ["星座", "夜空", "占い", "stars"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {ink("M 18,30 L 38,46 L 60,28 L 78,52 L 64,76 L 32,68 Z", { strokeWidth: 1, opacity: 0.6 })}
        {[[18,30],[38,46],[60,28],[78,52],[64,76],[32,68]].map(([x,y],i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="4" fill={GOLD} opacity="0.5" filter="url(#wc)"/>
            <circle cx={x} cy={y} r="2.2" fill={INK}/>
          </g>
        ))}
      </svg>
    ),
  },
  {
    id: "cloud",
    name: "雲",
    nameEn: "Cloud",
    categories: ["celestial", "nature"],
    keywords: ["雲", "空", "ふわふわ", "cloud"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 22,58 C 14,58 12,46 22,42 C 22,30 38,28 44,38 C 50,28 68,30 70,42 C 84,44 84,58 74,60 L 22,60 Z", DUST, 0.4)}
        {ink("M 22,58 C 14,58 12,46 22,42 C 22,30 38,28 44,38 C 50,28 68,30 70,42 C 84,44 84,58 74,60 L 22,60 Z")}
        {ink("M 28,68 L 36,68", { strokeWidth: 0.9 })}
        {ink("M 48,68 L 56,68", { strokeWidth: 0.9 })}
        {ink("M 64,68 L 70,68", { strokeWidth: 0.9 })}
      </svg>
    ),
  },
  {
    id: "comet",
    name: "彗星",
    nameEn: "Comet",
    categories: ["celestial"],
    keywords: ["彗星", "流れ星", "comet", "願い"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 70,28 C 76,28 82,36 80,42 C 78,46 70,46 66,42 C 62,38 64,28 70,28 Z", GOLD, 0.5)}
        {wash("M 64,42 L 20,80 L 28,82 L 64,46 Z", GOLD, 0.3)}
        {ink("M 70,28 C 76,28 82,36 80,42 C 78,46 70,46 66,42 C 62,38 64,28 70,28 Z")}
        {ink("M 64,42 L 22,80", { strokeWidth: 1 })}
        {ink("M 68,46 L 26,84", { strokeWidth: 0.7, opacity: 0.6 })}
        {ink("M 60,38 L 18,76", { strokeWidth: 0.7, opacity: 0.6 })}
      </svg>
    ),
  },

  // --- objects ---
  {
    id: "key",
    name: "鍵",
    nameEn: "The Key",
    categories: ["object"],
    keywords: ["鍵", "秘密", "扉", "解く", "key"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 30,30 C 18,30 16,46 26,50 L 26,76 L 32,76 L 32,82 L 38,82 L 38,72 L 38,52 C 46,48 46,32 30,30 Z", WINE, 0.4)}
        {ink("M 30,30 C 18,30 14,42 22,48 C 26,52 32,52 36,50 L 36,76 L 30,76 L 30,82 M 36,72 L 30,72")}
        {ink("M 30,40 C 30,36 36,36 36,40 C 36,44 30,44 30,40 Z")}
      </svg>
    ),
  },
  {
    id: "door",
    name: "扉",
    nameEn: "The Door",
    categories: ["object", "architecture"],
    keywords: ["扉", "ドア", "出口", "入口", "door", "選択"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 26,18 L 74,18 L 74,86 L 26,86 Z", WINE, 0.32)}
        {ink("M 26,86 L 26,22 C 26,18 28,16 32,16 L 68,16 C 72,16 74,18 74,22 L 74,86")}
        {ink("M 32,24 L 68,24 L 68,76 L 32,76 Z")}
        {ink("M 50,24 L 50,76", { strokeWidth: 0.8, opacity: 0.6 })}
        {ink("M 42,52 C 42,50 44,50 44,52 C 44,54 42,54 42,52 Z")}
      </svg>
    ),
  },
  {
    id: "mirror",
    name: "鏡",
    nameEn: "The Mirror",
    categories: ["object"],
    keywords: ["鏡", "自分", "影", "mirror", "真実"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,16 C 30,16 22,30 22,50 C 22,68 32,80 50,80 C 68,80 78,68 78,50 C 78,30 70,16 50,16 Z", DUST, 0.3)}
        {ink("M 50,18 C 32,18 24,32 24,52 C 24,68 34,78 50,78 C 66,78 76,68 76,52 C 76,32 68,18 50,18 Z")}
        {ink("M 50,24 C 38,24 32,34 32,50", { strokeWidth: 0.8, opacity: 0.7 })}
        {ink("M 46,82 L 54,82 L 56,90 L 44,90 Z")}
      </svg>
    ),
  },
  {
    id: "clock",
    name: "時計",
    nameEn: "The Hour",
    categories: ["object"],
    keywords: ["時計", "時間", "clock", "刻"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,16 C 70,16 84,32 84,52 C 84,72 70,86 50,86 C 30,86 16,72 16,52 C 16,32 30,16 50,16 Z", GOLD, 0.3)}
        {ink("M 50,16 C 70,16 84,32 84,52 C 84,72 70,86 50,86 C 30,86 16,72 16,52 C 16,32 30,16 50,16 Z")}
        {ink("M 50,52 L 50,28", { strokeWidth: 1.6 })}
        {ink("M 50,52 L 66,58")}
        {ink("M 50,22 L 50,26", { strokeWidth: 0.8 })}
        {ink("M 50,78 L 50,82", { strokeWidth: 0.8 })}
        {ink("M 22,52 L 26,52", { strokeWidth: 0.8 })}
        {ink("M 74,52 L 78,52", { strokeWidth: 0.8 })}
        <circle cx="50" cy="52" r="1.8" fill={INK}/>
      </svg>
    ),
  },
  {
    id: "book",
    name: "本",
    nameEn: "The Book",
    categories: ["object"],
    keywords: ["本", "物語", "書物", "book", "記憶"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 18,28 L 50,34 L 82,28 L 82,76 L 50,82 L 18,76 Z", WINE, 0.3)}
        {ink("M 18,28 C 28,22 42,24 50,32 C 58,24 72,22 82,28 L 82,76 C 72,72 60,72 50,80 C 40,72 28,72 18,76 Z")}
        {ink("M 50,32 L 50,80", { strokeWidth: 0.8 })}
        {ink("M 26,40 L 42,42", { strokeWidth: 0.6, opacity: 0.6 })}
        {ink("M 26,50 L 42,52", { strokeWidth: 0.6, opacity: 0.6 })}
        {ink("M 58,42 L 74,40", { strokeWidth: 0.6, opacity: 0.6 })}
        {ink("M 58,52 L 74,50", { strokeWidth: 0.6, opacity: 0.6 })}
      </svg>
    ),
  },
  {
    id: "candle",
    name: "蝋燭",
    nameEn: "Candle",
    categories: ["object"],
    keywords: ["蝋燭", "ろうそく", "炎", "光", "candle"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,16 C 56,22 56,30 50,34 C 44,30 44,22 50,16 Z", GOLD, 0.6)}
        {wash("M 40,40 L 60,40 L 60,84 L 40,84 Z", ROSE, 0.35)}
        {ink("M 50,14 C 56,22 56,32 50,36 C 44,32 44,22 50,14 Z")}
        {ink("M 50,36 L 50,42", { strokeWidth: 0.8 })}
        {ink("M 40,42 L 60,42 L 60,84 L 40,84 Z")}
        {ink("M 40,46 L 60,46", { strokeWidth: 0.6, opacity: 0.5 })}
      </svg>
    ),
  },
  {
    id: "staircase",
    name: "階段",
    nameEn: "Staircase",
    categories: ["object", "architecture"],
    keywords: ["階段", "登る", "降りる", "stairs"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 14,82 L 30,82 L 30,66 L 46,66 L 46,50 L 62,50 L 62,34 L 78,34 L 78,82 Z", DUST, 0.3)}
        {ink("M 14,82 L 30,82 L 30,66 L 46,66 L 46,50 L 62,50 L 62,34 L 78,34 L 78,18", { strokeWidth: 1.4 })}
        {ink("M 78,82 L 14,82", { strokeWidth: 1.2 })}
        {ink("M 30,82 L 30,86", { strokeWidth: 0.7 })}
      </svg>
    ),
  },
  {
    id: "window",
    name: "窓",
    nameEn: "Window",
    categories: ["object", "architecture"],
    keywords: ["窓", "光", "外", "window"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 24,18 L 76,18 L 76,82 L 24,82 Z", GOLD, 0.32)}
        {ink("M 24,18 L 76,18 L 76,82 L 24,82 Z")}
        {ink("M 50,20 L 50,80")}
        {ink("M 26,50 L 74,50")}
        {ink("M 20,84 L 80,84", { strokeWidth: 1.4 })}
      </svg>
    ),
  },
  {
    id: "ladder",
    name: "梯子",
    nameEn: "Ladder",
    categories: ["object"],
    keywords: ["梯子", "登る", "ladder", "天"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {ink("M 36,14 L 28,90")}
        {ink("M 64,14 L 72,90")}
        {ink("M 34,28 L 70,26", { strokeWidth: 1.2 })}
        {ink("M 33,44 L 69,42", { strokeWidth: 1.2 })}
        {ink("M 32,60 L 70,58", { strokeWidth: 1.2 })}
        {ink("M 31,76 L 71,74", { strokeWidth: 1.2 })}
      </svg>
    ),
  },
  {
    id: "envelope",
    name: "手紙",
    nameEn: "Letter",
    categories: ["object"],
    keywords: ["手紙", "便り", "letter", "メッセージ"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 16,30 L 84,30 L 84,76 L 16,76 Z", ROSE, 0.3)}
        {ink("M 16,30 L 84,30 L 84,76 L 16,76 Z")}
        {ink("M 16,30 L 50,56 L 84,30")}
        {ink("M 16,76 L 38,52", { strokeWidth: 0.7, opacity: 0.6 })}
        {ink("M 84,76 L 62,52", { strokeWidth: 0.7, opacity: 0.6 })}
      </svg>
    ),
  },

  // --- nature ---
  {
    id: "tree",
    name: "木",
    nameEn: "The Tree",
    categories: ["nature"],
    keywords: ["木", "森", "tree", "成長", "根"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,14 C 74,14 84,38 76,52 C 84,62 76,76 60,72 C 58,80 42,80 40,72 C 24,76 16,62 24,52 C 16,38 26,14 50,14 Z", FOREST, 0.4)}
        {ink("M 50,14 C 70,14 82,32 76,48 C 86,58 78,76 60,72 C 58,80 42,80 40,72 C 22,76 14,58 24,48 C 18,32 30,14 50,14 Z")}
        {ink("M 50,72 L 50,88", { strokeWidth: 1.4 })}
        {ink("M 50,80 L 44,86", { strokeWidth: 1 })}
        {ink("M 50,80 L 56,86", { strokeWidth: 1 })}
      </svg>
    ),
  },
  {
    id: "mountain",
    name: "山",
    nameEn: "Mountain",
    categories: ["nature"],
    keywords: ["山", "高い", "mountain", "頂"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 8,82 L 36,38 L 50,58 L 64,30 L 92,82 Z", DUST, 0.35)}
        {ink("M 8,82 L 36,38 L 50,58 L 64,30 L 92,82")}
        {ink("M 36,38 L 30,46 L 40,48 L 36,38 Z", { fill: "rgba(244,236,216,0.8)" })}
        {ink("M 64,30 L 58,40 L 70,42 L 64,30 Z", { fill: "rgba(244,236,216,0.8)" })}
        {ink("M 8,82 L 92,82", { strokeWidth: 1.2 })}
      </svg>
    ),
  },
  {
    id: "ocean",
    name: "海",
    nameEn: "The Sea",
    categories: ["nature"],
    keywords: ["海", "波", "水", "sea", "深い"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 8,50 C 20,42 32,56 50,48 C 68,40 80,54 92,46 L 92,86 L 8,86 Z", DUST, 0.45)}
        {ink("M 8,46 C 22,38 32,54 50,46 C 68,38 80,52 92,44", { strokeWidth: 1.2 })}
        {ink("M 8,58 C 22,52 32,66 50,60 C 68,54 80,68 92,60", { strokeWidth: 1 })}
        {ink("M 8,72 C 22,68 32,78 50,74 C 68,70 80,80 92,74", { strokeWidth: 0.9 })}
        {ink("M 28,38 C 32,34 36,36 38,40", { strokeWidth: 0.8 })}
        {ink("M 64,32 C 68,28 72,30 74,34", { strokeWidth: 0.8 })}
      </svg>
    ),
  },
  {
    id: "rose",
    name: "薔薇",
    nameEn: "The Rose",
    categories: ["nature", "plant"],
    keywords: ["薔薇", "ばら", "rose", "愛", "花"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,20 C 64,20 72,32 70,46 C 80,52 76,68 64,68 C 60,80 40,80 36,68 C 24,68 20,52 30,46 C 28,32 36,20 50,20 Z", WINE, 0.45)}
        {ink("M 50,28 C 60,28 64,38 56,44 C 64,46 64,58 54,58 C 52,66 48,66 46,58 C 36,58 36,46 44,44 C 36,38 40,28 50,28 Z")}
        {ink("M 50,38 C 54,40 54,46 50,48 C 46,46 46,40 50,38 Z")}
        {ink("M 50,72 L 50,90", { strokeWidth: 1.2 })}
        {ink("M 50,80 C 44,78 38,82 38,86", { strokeWidth: 1 })}
        {ink("M 50,84 C 56,82 62,84 64,88", { strokeWidth: 1 })}
      </svg>
    ),
  },
  {
    id: "leaf",
    name: "葉",
    nameEn: "Leaf",
    categories: ["nature", "plant"],
    keywords: ["葉", "leaf", "草"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,16 C 76,30 78,66 50,84 C 22,66 24,30 50,16 Z", FOREST, 0.45)}
        {ink("M 50,16 C 76,30 78,66 50,84 C 22,66 24,30 50,16 Z")}
        {ink("M 50,16 L 50,84", { strokeWidth: 0.9 })}
        {ink("M 50,30 L 40,38", { strokeWidth: 0.7 })}
        {ink("M 50,30 L 60,38", { strokeWidth: 0.7 })}
        {ink("M 50,44 L 36,52", { strokeWidth: 0.7 })}
        {ink("M 50,44 L 64,52", { strokeWidth: 0.7 })}
        {ink("M 50,58 L 38,66", { strokeWidth: 0.7 })}
        {ink("M 50,58 L 62,66", { strokeWidth: 0.7 })}
      </svg>
    ),
  },
  {
    id: "feather",
    name: "羽根",
    nameEn: "Feather",
    categories: ["nature"],
    keywords: ["羽根", "羽", "feather", "軽い"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 38,14 C 60,18 72,40 68,60 C 64,72 50,72 42,66 C 32,70 22,82 18,86 C 18,80 24,68 32,60 C 28,52 32,32 38,14 Z", DUST, 0.4)}
        {ink("M 38,14 C 60,18 72,40 68,60 C 64,72 50,72 42,66 C 32,70 22,82 18,86")}
        {ink("M 38,14 C 32,32 28,52 34,62", { strokeWidth: 1 })}
        {ink("M 40,28 C 50,32 56,36 56,42", { strokeWidth: 0.7 })}
        {ink("M 36,40 C 48,44 56,48 60,54", { strokeWidth: 0.7 })}
        {ink("M 34,54 C 46,56 56,60 62,64", { strokeWidth: 0.7 })}
      </svg>
    ),
  },

  // --- animals ---
  {
    id: "butterfly",
    name: "蝶",
    nameEn: "The Butterfly",
    categories: ["animal"],
    keywords: ["蝶", "ちょう", "変化", "butterfly", "夢"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,38 C 28,18 14,28 18,50 C 22,68 38,62 50,52 C 62,62 78,68 82,50 C 86,28 72,18 50,38 Z", WINE, 0.35)}
        {wash("M 50,54 C 32,68 22,82 30,86 C 40,84 46,72 50,64 C 54,72 60,84 70,86 C 78,82 68,68 50,54 Z", ROSE, 0.4)}
        {ink("M 50,36 C 30,16 14,28 18,48 C 22,66 36,60 50,52")}
        {ink("M 50,36 C 70,16 86,28 82,48 C 78,66 64,60 50,52")}
        {ink("M 50,52 C 36,66 24,82 30,86 C 38,84 46,74 50,66 C 54,74 62,84 70,86 C 76,82 64,66 50,52")}
        {ink("M 50,32 L 50,70", { strokeWidth: 0.8 })}
        {ink("M 50,32 C 46,26 48,20 50,18", { strokeWidth: 0.9 })}
        {ink("M 50,32 C 54,26 52,20 50,18", { strokeWidth: 0.9 })}
      </svg>
    ),
  },
  {
    id: "fish",
    name: "魚",
    nameEn: "The Fish",
    categories: ["animal"],
    keywords: ["魚", "水", "泳ぐ", "fish"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 18,50 C 30,30 60,30 72,50 C 60,70 30,70 18,50 Z M 72,50 L 90,38 L 88,50 L 90,62 Z", DUST, 0.4)}
        {ink("M 18,50 C 30,32 60,32 72,50 C 60,68 30,68 18,50 Z")}
        {ink("M 72,50 L 90,38 L 86,50 L 90,62 Z")}
        {ink("M 28,50 C 32,44 38,42 44,44", { strokeWidth: 0.8 })}
        {ink("M 30,56 C 36,58 42,58 46,56", { strokeWidth: 0.7 })}
        <circle cx="32" cy="46" r="2" fill={INK}/>
      </svg>
    ),
  },
  {
    id: "bird",
    name: "鳥",
    nameEn: "The Bird",
    categories: ["animal"],
    keywords: ["鳥", "とり", "飛ぶ", "bird", "自由"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 40,42 C 56,38 70,42 78,50 C 70,62 56,66 44,62 C 36,72 26,76 22,72 C 28,66 34,58 36,52 C 28,48 30,40 40,42 Z", WINE, 0.4)}
        {ink("M 36,52 C 42,40 60,38 76,48 C 80,52 76,58 70,58 C 66,68 50,72 40,66")}
        {ink("M 40,66 C 34,74 24,78 22,74 C 26,68 32,62 36,56", { strokeWidth: 1.1 })}
        {ink("M 76,48 L 86,46", { strokeWidth: 1 })}
        <circle cx="68" cy="48" r="1.4" fill={INK}/>
        {ink("M 48,50 C 52,46 58,46 62,50", { strokeWidth: 0.7 })}
      </svg>
    ),
  },
  {
    id: "cat",
    name: "猫",
    nameEn: "The Cat",
    categories: ["animal"],
    keywords: ["猫", "ねこ", "cat"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 32,40 L 28,20 L 42,32 L 58,32 L 72,20 L 68,40 C 78,46 80,64 68,72 C 60,82 40,82 32,72 C 20,64 22,46 32,40 Z", GOLD, 0.4)}
        {ink("M 32,40 L 28,20 L 42,32")}
        {ink("M 68,40 L 72,20 L 58,32")}
        {ink("M 32,40 C 22,46 20,64 32,72 C 40,82 60,82 68,72 C 80,64 78,46 68,40 C 60,36 40,36 32,40 Z")}
        <circle cx="42" cy="54" r="1.8" fill={INK}/>
        <circle cx="58" cy="54" r="1.8" fill={INK}/>
        {ink("M 50,62 L 48,66 L 52,66 Z", { fill: WINE })}
        {ink("M 48,68 C 48,72 52,72 52,68", { strokeWidth: 0.9 })}
        {ink("M 30,60 L 22,58", { strokeWidth: 0.6 })}
        {ink("M 30,64 L 22,64", { strokeWidth: 0.6 })}
        {ink("M 70,60 L 78,58", { strokeWidth: 0.6 })}
        {ink("M 70,64 L 78,64", { strokeWidth: 0.6 })}
      </svg>
    ),
  },
  {
    id: "snake",
    name: "蛇",
    nameEn: "The Serpent",
    categories: ["animal"],
    keywords: ["蛇", "へび", "snake", "変化"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 80,20 C 60,24 56,40 70,46 C 84,52 84,68 60,72 C 36,76 24,68 22,80 L 28,82 C 30,72 40,82 60,78 C 86,72 90,52 76,46 C 64,40 66,28 82,26 Z", FOREST, 0.4)}
        {ink("M 82,20 C 60,22 54,40 70,46 C 86,52 86,70 60,74 C 36,78 26,70 22,82")}
        {ink("M 22,82 C 18,82 16,80 16,76 L 22,76", { strokeWidth: 1 })}
        <circle cx="78" cy="24" r="1" fill={INK}/>
        {ink("M 18,80 L 14,82", { strokeWidth: 0.8 })}
        {ink("M 18,80 L 16,84", { strokeWidth: 0.8 })}
      </svg>
    ),
  },
  {
    id: "owl",
    name: "梟",
    nameEn: "The Owl",
    categories: ["animal"],
    keywords: ["梟", "ふくろう", "owl", "知恵", "夜"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,18 C 70,18 80,38 78,58 C 76,76 64,86 50,86 C 36,86 24,76 22,58 C 20,38 30,18 50,18 Z", DUST, 0.4)}
        {ink("M 50,20 C 32,20 22,38 24,58 C 26,76 36,84 50,84 C 64,84 74,76 76,58 C 78,38 68,20 50,20 Z")}
        {ink("M 38,28 L 32,18 M 62,28 L 68,18")}
        {/* eyes */}
        {ink("M 38,46 m -8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0", { fill: "white", opacity: 0.9 })}
        {ink("M 62,46 m -8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0", { fill: "white", opacity: 0.9 })}
        <circle cx="38" cy="46" r="3" fill={INK}/>
        <circle cx="62" cy="46" r="3" fill={INK}/>
        {/* beak */}
        {ink("M 50,52 L 46,60 L 54,60 Z", { fill: GOLD })}
        {/* feathers */}
        {ink("M 32,62 C 36,68 32,76 28,78", { strokeWidth: 0.8 })}
        {ink("M 68,62 C 64,68 68,76 72,78", { strokeWidth: 0.8 })}
        {ink("M 42,70 C 44,76 56,76 58,70", { strokeWidth: 0.8 })}
      </svg>
    ),
  },
  {
    id: "deer",
    name: "鹿",
    nameEn: "The Deer",
    categories: ["animal"],
    keywords: ["鹿", "しか", "deer", "森"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,38 C 38,40 36,56 42,70 L 40,86 L 46,86 L 48,72 L 52,72 L 54,86 L 60,86 L 58,70 C 64,56 62,40 50,38 Z", GOLD, 0.4)}
        {ink("M 50,40 C 40,42 38,56 44,70 L 42,84 L 46,84 L 48,72 L 52,72 L 54,84 L 58,84 L 56,70 C 62,56 60,42 50,40 Z")}
        {ink("M 44,30 C 38,22 36,14 40,12 C 42,16 44,22 46,28")}
        {ink("M 56,30 C 62,22 64,14 60,12 C 58,16 56,22 54,28")}
        {ink("M 42,18 C 36,14 32,16 36,20", { strokeWidth: 0.8 })}
        {ink("M 58,18 C 64,14 68,16 64,20", { strokeWidth: 0.8 })}
        <circle cx="46" cy="48" r="1.2" fill={INK}/>
        <circle cx="54" cy="48" r="1.2" fill={INK}/>
        {ink("M 50,54 C 48,56 52,56 50,54 Z", { fill: INK })}
      </svg>
    ),
  },

  // --- abstract / element ---
  {
    id: "eye",
    name: "目",
    nameEn: "The Eye",
    categories: ["abstract", "person"],
    keywords: ["目", "視る", "見つめる", "eye"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 12,50 C 30,30 70,30 88,50 C 70,70 30,70 12,50 Z", DUST, 0.32)}
        {ink("M 12,50 C 30,30 70,30 88,50 C 70,70 30,70 12,50 Z")}
        <circle cx="50" cy="50" r="12" fill={GOLD} opacity="0.5" filter="url(#wc)"/>
        <circle cx="50" cy="50" r="12" fill="none" stroke={INK} strokeWidth="1.4"/>
        <circle cx="50" cy="50" r="5" fill={INK}/>
        {ink("M 18,38 L 14,32", { strokeWidth: 0.8 })}
        {ink("M 50,28 L 50,22", { strokeWidth: 0.8 })}
        {ink("M 82,38 L 86,32", { strokeWidth: 0.8 })}
      </svg>
    ),
  },
  {
    id: "tear",
    name: "涙",
    nameEn: "The Tear",
    categories: ["abstract"],
    keywords: ["涙", "泣く", "tear", "悲しみ", "雨"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,14 C 70,40 72,68 50,84 C 28,68 30,40 50,14 Z", DUST, 0.5)}
        {ink("M 50,14 C 70,40 72,68 50,84 C 28,68 30,40 50,14 Z")}
        {ink("M 50,30 C 46,40 46,52 50,60", { strokeWidth: 0.8, opacity: 0.5 })}
      </svg>
    ),
  },
  {
    id: "flame",
    name: "炎",
    nameEn: "The Flame",
    categories: ["abstract"],
    keywords: ["炎", "火", "情熱", "flame", "fire"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,12 C 62,28 72,40 70,58 C 68,76 56,86 50,86 C 44,86 32,76 30,58 C 28,40 38,28 50,12 Z", WINE, 0.45)}
        {wash("M 50,32 C 56,42 60,50 58,60 C 56,72 52,80 50,80 C 48,80 44,72 42,60 C 40,50 44,42 50,32 Z", GOLD, 0.6)}
        {ink("M 50,12 C 62,28 72,40 70,58 C 68,76 56,86 50,86 C 44,86 32,76 30,58 C 28,40 38,28 50,12 Z")}
        {ink("M 50,32 C 56,42 60,52 58,62 C 56,74 52,82 50,82 C 48,82 44,74 42,62 C 40,52 44,42 50,32 Z", { opacity: 0.7 })}
      </svg>
    ),
  },
  {
    id: "hand",
    name: "手",
    nameEn: "The Hand",
    categories: ["abstract", "person"],
    keywords: ["手", "te", "hand", "つかむ"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 32,86 L 30,52 C 30,46 36,46 36,52 L 36,38 C 36,30 44,30 44,38 L 44,32 C 44,22 52,22 52,32 L 52,38 C 52,30 60,30 60,38 L 60,52 C 60,62 64,68 64,76 L 64,86 Z", ROSE, 0.4)}
        {ink("M 32,86 L 30,52 C 30,46 36,46 36,52 L 36,38 C 36,30 44,30 44,38 L 44,32 C 44,22 52,22 52,32 L 52,38 C 52,30 60,30 60,38 L 60,52 C 60,62 64,68 64,76 L 64,86")}
        {ink("M 36,52 L 36,68", { strokeWidth: 0.7, opacity: 0.5 })}
        {ink("M 44,38 L 44,66", { strokeWidth: 0.7, opacity: 0.5 })}
        {ink("M 52,38 L 52,66", { strokeWidth: 0.7, opacity: 0.5 })}
      </svg>
    ),
  },
  {
    id: "spiral",
    name: "渦",
    nameEn: "The Spiral",
    categories: ["abstract"],
    keywords: ["渦", "うず", "spiral", "迷路", "螺旋"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {ink("M 50,50 m -2,0 a 2,2 0 1,1 4,0 a 4,4 0 1,1 -8,0 a 8,8 0 1,1 16,0 a 14,14 0 1,1 -28,0 a 22,22 0 1,1 44,0 a 32,32 0 1,1 -64,0", { strokeWidth: 1.4 })}
      </svg>
    ),
  },
  {
    id: "rain",
    name: "雨",
    nameEn: "The Rain",
    categories: ["nature", "abstract"],
    keywords: ["雨", "あめ", "rain", "涙"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 22,30 C 14,30 12,18 22,14 C 22,4 38,4 44,12 C 50,4 68,4 70,14 C 84,16 84,30 74,32 L 22,32 Z", DUST, 0.4)}
        {ink("M 22,32 C 14,32 12,20 22,16 C 22,6 38,6 44,14 C 50,6 68,6 70,16 C 84,18 84,32 74,34 L 22,34 Z")}
        {ink("M 30,42 L 26,56", { strokeWidth: 1.2 })}
        {ink("M 44,42 L 40,60", { strokeWidth: 1.2 })}
        {ink("M 58,42 L 54,56", { strokeWidth: 1.2 })}
        {ink("M 72,42 L 68,60", { strokeWidth: 1.2 })}
        {ink("M 36,68 L 32,84", { strokeWidth: 1 })}
        {ink("M 52,72 L 48,86", { strokeWidth: 1 })}
        {ink("M 66,68 L 62,82", { strokeWidth: 1 })}
      </svg>
    ),
  },
  {
    id: "crystal",
    name: "結晶",
    nameEn: "Crystal",
    categories: ["object", "abstract"],
    keywords: ["結晶", "宝石", "crystal", "石"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,14 L 78,40 L 62,84 L 38,84 L 22,40 Z", WINE, 0.35)}
        {ink("M 50,14 L 78,40 L 62,84 L 38,84 L 22,40 Z")}
        {ink("M 22,40 L 50,14 L 78,40")}
        {ink("M 50,14 L 50,84")}
        {ink("M 22,40 L 50,84")}
        {ink("M 78,40 L 50,84")}
        {ink("M 22,40 L 38,84", { strokeWidth: 0.8, opacity: 0.6 })}
        {ink("M 78,40 L 62,84", { strokeWidth: 0.8, opacity: 0.6 })}
      </svg>
    ),
  },
  {
    id: "mushroom",
    name: "茸",
    nameEn: "Mushroom",
    categories: ["plant", "nature"],
    keywords: ["茸", "きのこ", "mushroom"],
    render: () => (
      <svg viewBox="0 0 100 100">
        {WC_FILTER}
        {wash("M 50,18 C 28,18 14,40 22,48 C 36,52 64,52 78,48 C 86,40 72,18 50,18 Z", WINE, 0.5)}
        {wash("M 38,48 L 40,86 L 60,86 L 62,48 Z", ROSE, 0.3)}
        {ink("M 50,20 C 30,20 16,40 24,48 C 38,52 62,52 76,48 C 84,40 70,20 50,20 Z")}
        {ink("M 38,48 L 40,84 C 40,88 60,88 60,84 L 62,48")}
        <circle cx="38" cy="34" r="3" fill={"#f4ecd8"} opacity="0.8"/>
        <circle cx="58" cy="30" r="2" fill={"#f4ecd8"} opacity="0.8"/>
        <circle cx="64" cy="42" r="2.5" fill={"#f4ecd8"} opacity="0.8"/>
        <circle cx="46" cy="42" r="2" fill={"#f4ecd8"} opacity="0.8"/>
      </svg>
    ),
  },
];

// recommendation: given a list of keyword strings, return sticker ids in relevance order
function recommendStickers(keywords) {
  const kws = keywords.map(k => k.toLowerCase().trim()).filter(Boolean);
  if (!kws.length) return STICKERS.map(s => s.id);

  const scored = STICKERS.map(s => {
    let score = 0;
    const haystack = [
      s.name, s.nameEn, ...s.keywords, ...s.categories,
    ].join(" ").toLowerCase();
    kws.forEach(kw => {
      if (!kw) return;
      // exact word match boost
      if (s.keywords.some(k => k.toLowerCase() === kw)) score += 5;
      // substring match
      if (haystack.includes(kw)) score += 2;
      // synonym buckets
      const syn = SYNONYMS[kw] || [];
      syn.forEach(syn => { if (haystack.includes(syn)) score += 1.5; });
    });
    return { s, score };
  });
  // Sort: high score first, then alpha
  scored.sort((a, b) => b.score - a.score);
  return scored.map(x => x.s.id);
}

const SYNONYMS = {
  "夜": ["月", "星", "moon", "夜空", "暗い"],
  "悲しい": ["涙", "雨", "tear"],
  "怖い": ["蛇", "炎", "暗い", "影"],
  "嬉しい": ["蝶", "光", "花", "星"],
  "海": ["魚", "波", "水"],
  "森": ["木", "鹿", "葉"],
  "空": ["雲", "鳥", "月", "星"],
  "光": ["蝋燭", "月", "炎", "星"],
  "迷う": ["扉", "鍵", "渦", "階段"],
  "誰か": ["手", "目", "人"],
  "変化": ["蝶", "蛇", "月"],
  "知る": ["梟", "本", "鏡"],
  "愛": ["薔薇", "蝶", "手紙"],
};

window.STICKERS = STICKERS;
window.recommendStickers = recommendStickers;