/* planner-icons.jsx — SVG icons (paper-cut style) and mascots/stickers */

const Icon = {
  plus:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>,
  check: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m4 12 5 5 11-12"/></svg>,
  close: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>,
  left:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>,
  right: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>,
  save:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>,
  copy:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M5 16H4a1 1 0 0 1-1-1V5a2 2 0 0 1 2-2h10a1 1 0 0 1 1 1v1"/></svg>,
  trash: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>,
  print: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9V3h12v6M6 17H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="7"/></svg>,
  download: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>,
  star:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="m12 2 2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4Z" fill="#ffd84a"/></svg>,
  // Block type icons (chunky/paper)
  math:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 8h14M5 16h14M11 5l-4 14M17 5l-4 14"/></svg>,
  book:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2Z"/><path d="M8 7h6M8 11h6"/></svg>,
  pencil:() => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="m4 20 4-1 11-11-3-3L5 16Z"/><path d="m13 6 3 3"/></svg>,
  beaker:() => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="M9 3h6M10 3v6L5 19a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-10V3"/></svg>,
  palette:() => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="M12 3a9 9 0 1 0 0 18c1.5 0 2-1.5 1-2.5s-.5-2.5 1-2.5h2a4 4 0 0 0 4-4 9 9 0 0 0-8-9Z"/><circle cx="8" cy="10" r="1"/><circle cx="12" cy="7" r="1"/><circle cx="16" cy="10" r="1"/></svg>,
  music: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="M9 18V6l11-3v12"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="15" r="3"/></svg>,
  ball:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3v18M5 7c4 2 10 2 14 0M5 17c4-2 10-2 14 0"/></svg>,
  heart: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z"/></svg>,
  sun:   () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></svg>,
  rocket:() => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round"><path d="M12 2c4 3 6 7 6 11l-3 2h-6l-3-2c0-4 2-8 6-11Z"/><circle cx="12" cy="10" r="1.5"/><path d="m9 17-2 4 3-1 2 1 2-1 3 1-2-4"/></svg>
};

/* Mascots — one per day, paper-cut style */
const Mascot = {
  // Sun (Monday)
  sun: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2.5" strokeLinecap="round">
        <circle cx="32" cy="32" r="14" fill="#fff3b3"/>
        <g>
          <path d="M32 8v8M32 48v8M8 32h8M48 32h8M14 14l5 5M45 45l5 5M14 50l5-5M45 19l5-5"/>
        </g>
        <circle cx="27" cy="30" r="1.5" fill="#2a2438" stroke="none"/>
        <circle cx="37" cy="30" r="1.5" fill="#2a2438" stroke="none"/>
        <path d="M28 36c2 2 6 2 8 0" fill="none"/>
      </g>
    </svg>
  ),
  // Cloud (Tuesday)
  cloud: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2.5" strokeLinejoin="round">
        <path d="M16 40c-4 0-7-3-7-7s3-7 7-7c1-5 5-9 11-9s10 4 11 9c4 0 7 3 7 7s-3 7-7 7Z" fill="#fff"/>
        <circle cx="24" cy="34" r="1.5" fill="#2a2438" stroke="none"/>
        <circle cx="34" cy="34" r="1.5" fill="#2a2438" stroke="none"/>
        <path d="M25 40c1 2 5 2 7 0" fill="none"/>
      </g>
    </svg>
  ),
  // Rainbow (Wednesday)
  rainbow: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2" fill="none" strokeLinecap="round">
        <path d="M8 44a24 24 0 0 1 48 0" stroke="#ff7aa9" strokeWidth="4"/>
        <path d="M14 44a18 18 0 0 1 36 0" stroke="#ffc24c" strokeWidth="4"/>
        <path d="M20 44a12 12 0 0 1 24 0" stroke="#5cd6b1" strokeWidth="4"/>
        <path d="M26 44a6 6 0 0 1 12 0" stroke="#5ea7ff" strokeWidth="4"/>
        <ellipse cx="14" cy="48" rx="5" ry="3" fill="#fff" stroke="#2a2438"/>
        <ellipse cx="50" cy="48" rx="5" ry="3" fill="#fff" stroke="#2a2438"/>
      </g>
    </svg>
  ),
  // Star (Thursday)
  starm: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2.5" strokeLinejoin="round">
        <path d="m32 8 7 14 16 2-12 11 3 16-14-8-14 8 3-16L9 24l16-2Z" fill="#ffd84a"/>
        <circle cx="28" cy="26" r="1.5" fill="#2a2438" stroke="none"/>
        <circle cx="36" cy="26" r="1.5" fill="#2a2438" stroke="none"/>
        <path d="M28 32c2 2 6 2 8 0" fill="none"/>
      </g>
    </svg>
  ),
  // Moon (Friday)
  moon: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2.5" strokeLinejoin="round">
        <path d="M40 12a20 20 0 1 0 12 38A22 22 0 0 1 40 12Z" fill="#e6d6ff"/>
        <circle cx="34" cy="30" r="1.5" fill="#2a2438" stroke="none"/>
        <circle cx="42" cy="34" r="1.5" fill="#2a2438" stroke="none"/>
        <path d="M34 38c2 2 5 2 7-1" fill="none"/>
      </g>
    </svg>
  ),
  // Apple (Saturday)
  apple: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2.5" strokeLinejoin="round">
        <path d="M32 18c-2-4-7-5-10-3s-4 8 0 14 7 18 10 18 5-12 10-18 3-12 0-14-8-1-10 3Z" fill="#ff945c"/>
        <path d="M32 16c1-4 4-6 7-6" fill="none"/>
        <circle cx="27" cy="32" r="1.5" fill="#2a2438" stroke="none"/>
        <circle cx="37" cy="32" r="1.5" fill="#2a2438" stroke="none"/>
        <path d="M28 38c2 2 6 2 8 0" fill="none"/>
      </g>
    </svg>
  ),
  // Flower (Sunday)
  flower: () => (
    <svg viewBox="0 0 64 64">
      <g stroke="#2a2438" strokeWidth="2.5" strokeLinejoin="round">
        <circle cx="32" cy="20" r="6" fill="#c79fff"/>
        <circle cx="44" cy="28" r="6" fill="#c79fff"/>
        <circle cx="40" cy="42" r="6" fill="#c79fff"/>
        <circle cx="24" cy="42" r="6" fill="#c79fff"/>
        <circle cx="20" cy="28" r="6" fill="#c79fff"/>
        <circle cx="32" cy="32" r="6" fill="#ffd84a"/>
      </g>
    </svg>
  )
};

const DAY_MASCOTS = [Mascot.sun, Mascot.cloud, Mascot.rainbow, Mascot.starm, Mascot.moon, Mascot.apple, Mascot.flower];

/* Stickers — small playful elements */
const Sticker = {
  star: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <path d="m16 3 4 9 10 1-7.5 7 2 10L16 25 7.5 30l2-10L2 13l10-1Z" fill="#ffd84a" stroke="#2a2438" strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  ),
  heart: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <path d="M16 28s-11-7-11-15a5 5 0 0 1 11-3 5 5 0 0 1 11 3c0 8-11 15-11 15Z" fill="#ff7aa9" stroke="#2a2438" strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  ),
  rainbow: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <path d="M3 24a13 13 0 0 1 26 0" fill="none" stroke="#ff7aa9" strokeWidth="3"/>
      <path d="M6 24a10 10 0 0 1 20 0" fill="none" stroke="#ffc24c" strokeWidth="3"/>
      <path d="M9 24a7 7 0 0 1 14 0" fill="none" stroke="#5cd6b1" strokeWidth="3"/>
      <path d="M12 24a4 4 0 0 1 8 0" fill="none" stroke="#5ea7ff" strokeWidth="3"/>
      <path d="M3 24h26" stroke="#2a2438" strokeWidth="1.5"/>
    </svg>
  ),
  sparkle: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <path d="m16 4 2.5 9.5L28 16l-9.5 2.5L16 28l-2.5-9.5L4 16l9.5-2.5Z" fill="#b07cff" stroke="#2a2438" strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  ),
  smile: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <circle cx="16" cy="16" r="13" fill="#ffd84a" stroke="#2a2438" strokeWidth="2"/>
      <circle cx="12" cy="14" r="1.5" fill="#2a2438"/>
      <circle cx="20" cy="14" r="1.5" fill="#2a2438"/>
      <path d="M11 19c2 3 8 3 10 0" fill="none" stroke="#2a2438" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  flower: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <circle cx="16" cy="8" r="4" fill="#ff7aa9" stroke="#2a2438" strokeWidth="2"/>
      <circle cx="24" cy="16" r="4" fill="#ff7aa9" stroke="#2a2438" strokeWidth="2"/>
      <circle cx="16" cy="24" r="4" fill="#ff7aa9" stroke="#2a2438" strokeWidth="2"/>
      <circle cx="8" cy="16" r="4" fill="#ff7aa9" stroke="#2a2438" strokeWidth="2"/>
      <circle cx="16" cy="16" r="4" fill="#ffd84a" stroke="#2a2438" strokeWidth="2"/>
    </svg>
  ),
  cloud: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <path d="M8 22c-2.5 0-4-2-4-4s1.5-4 4-4c.5-3 3-5 6-5s5 2 6 5c2.5 0 4 2 4 4s-1.5 4-4 4Z" fill="#fff" stroke="#2a2438" strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  ),
  rocket: (props={}) => (
    <svg viewBox="0 0 32 32" {...props}>
      <path d="M16 3c3 2 5 5 5 9v6l-2 1h-6l-2-1v-6c0-4 2-7 5-9Z" fill="#5ea7ff" stroke="#2a2438" strokeWidth="2" strokeLinejoin="round"/>
      <circle cx="16" cy="12" r="2" fill="#fff" stroke="#2a2438" strokeWidth="1.5"/>
      <path d="m12 22-2 4 3-1 2 1 2-1 3 1-2-4" fill="#ff7aa9" stroke="#2a2438" strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  )
};

const STICKER_LIST = [
  { id: "star",    label: "Star" },
  { id: "heart",   label: "Heart" },
  { id: "rainbow", label: "Rainbow" },
  { id: "sparkle", label: "Sparkle" },
  { id: "smile",   label: "Smile" },
  { id: "flower",  label: "Flower" },
  { id: "cloud",   label: "Cloud" },
  { id: "rocket",  label: "Rocket" }
];

Object.assign(window, { Icon, Mascot, DAY_MASCOTS, Sticker, STICKER_LIST });
