// stickers.jsx — tiny decorative SVG stickers used throughout the journal.
// All placeholder-level; swap for real illustrations later.

const Sticker = ({ kind = "heart", size = 40, rotate = 0, style = {} }) => {
  const common = { width: size, height: size, viewBox: "0 0 60 60", style: { transform: `rotate(${rotate}deg)`, ...style }, className: "sticker" };

  switch (kind) {
    case "heart":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFF8E6" stroke="#2B2620" strokeWidth="2"/>
          <path d="M30 44 C 14 34, 16 18, 24 18 C 28 18, 30 22, 30 24 C 30 22, 32 18, 36 18 C 44 18, 46 34, 30 44 Z"
                fill="#FF6B5B" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
          <ellipse cx="25" cy="26" rx="2" ry="3" fill="#fff" opacity="0.6"/>
        </svg>
      );
    case "music":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#B8E4DC" stroke="#2B2620" strokeWidth="2"/>
          <path d="M25 18 L 42 16 L 42 36" stroke="#2B2620" strokeWidth="3" fill="none" strokeLinecap="round"/>
          <ellipse cx="22" cy="38" rx="6" ry="4.5" fill="#2B2620"/>
          <ellipse cx="39" cy="36" rx="6" ry="4.5" fill="#2B2620"/>
          <line x1="25" y1="18" x2="42" y2="22" stroke="#2B2620" strokeWidth="2"/>
        </svg>
      );
    case "flower":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFF8E6" stroke="#2B2620" strokeWidth="2"/>
          {[0,60,120,180,240,300].map(a => (
            <ellipse key={a} cx="30" cy="18" rx="5" ry="8" fill="#FFC93C" stroke="#2B2620" strokeWidth="1.8"
                     transform={`rotate(${a} 30 30)`} />
          ))}
          <circle cx="30" cy="30" r="5" fill="#E8402C" stroke="#2B2620" strokeWidth="1.8"/>
        </svg>
      );
    case "book":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFE4A8" stroke="#2B2620" strokeWidth="2"/>
          <rect x="14" y="18" width="32" height="24" rx="2" fill="#fff" stroke="#2B2620" strokeWidth="2"/>
          <line x1="30" y1="19" x2="30" y2="41" stroke="#2B2620" strokeWidth="1.5"/>
          <line x1="18" y1="26" x2="27" y2="26" stroke="#2B2620" strokeWidth="1" opacity="0.5"/>
          <line x1="18" y1="30" x2="27" y2="30" stroke="#2B2620" strokeWidth="1" opacity="0.5"/>
          <line x1="33" y1="26" x2="42" y2="26" stroke="#2B2620" strokeWidth="1" opacity="0.5"/>
          <line x1="33" y1="30" x2="42" y2="30" stroke="#2B2620" strokeWidth="1" opacity="0.5"/>
        </svg>
      );
    case "star":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFC93C" stroke="#2B2620" strokeWidth="2"/>
          <path d="M30 12 L 34 24 L 47 24 L 37 32 L 41 44 L 30 37 L 19 44 L 23 32 L 13 24 L 26 24 Z"
                fill="#fff" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
        </svg>
      );
    case "home":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFD7CC" stroke="#2B2620" strokeWidth="2"/>
          <path d="M14 32 L 30 16 L 46 32 L 46 44 L 14 44 Z" fill="#E8402C" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
          <rect x="26" y="34" width="8" height="10" fill="#FFF8E6" stroke="#2B2620" strokeWidth="1.5"/>
        </svg>
      );
    case "ring":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFF8E6" stroke="#2B2620" strokeWidth="2"/>
          <circle cx="24" cy="34" r="8" fill="none" stroke="#FFC93C" strokeWidth="3"/>
          <circle cx="24" cy="34" r="8" fill="none" stroke="#2B2620" strokeWidth="1.5"/>
          <circle cx="36" cy="34" r="8" fill="none" stroke="#FF6B5B" strokeWidth="3"/>
          <circle cx="36" cy="34" r="8" fill="none" stroke="#2B2620" strokeWidth="1.5"/>
        </svg>
      );
    case "smile":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFC93C" stroke="#2B2620" strokeWidth="2"/>
          <circle cx="23" cy="26" r="2.5" fill="#2B2620"/>
          <circle cx="37" cy="26" r="2.5" fill="#2B2620"/>
          <path d="M21 34 Q 30 44 39 34" fill="none" stroke="#2B2620" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      );
    case "mountain":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#B8E4DC" stroke="#2B2620" strokeWidth="2"/>
          <path d="M8 44 L 22 22 L 30 32 L 38 20 L 52 44 Z" fill="#2FB5A6" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
          <path d="M18 28 L 22 22 L 26 28 Z" fill="#fff" stroke="#2B2620" strokeWidth="1.5"/>
          <path d="M34 26 L 38 20 L 42 26 Z" fill="#fff" stroke="#2B2620" strokeWidth="1.5"/>
        </svg>
      );
    case "glass":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFE4A8" stroke="#2B2620" strokeWidth="2"/>
          <path d="M20 18 L 40 18 L 36 36 L 24 36 Z" fill="#E8402C" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
          <line x1="30" y1="36" x2="30" y2="44" stroke="#2B2620" strokeWidth="2"/>
          <line x1="22" y1="44" x2="38" y2="44" stroke="#2B2620" strokeWidth="2" strokeLinecap="round"/>
          <ellipse cx="26" cy="22" rx="3" ry="1.5" fill="#fff" opacity="0.6"/>
        </svg>
      );
    case "note":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFD7CC" stroke="#2B2620" strokeWidth="2"/>
          <ellipse cx="22" cy="38" rx="5" ry="4" fill="#2B2620"/>
          <path d="M27 38 L 27 16 L 40 14" stroke="#2B2620" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M27 20 Q 32 18 37 17" stroke="#2B2620" strokeWidth="1.5" fill="none"/>
        </svg>
      );
    case "dove":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFF8E6" stroke="#2B2620" strokeWidth="2"/>
          <path d="M14 34 Q 20 20 32 22 Q 42 24 46 32 L 42 34 L 32 30 L 24 38 Z"
                fill="#fff" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
          <circle cx="40" cy="28" r="1.5" fill="#2B2620"/>
          <path d="M44 30 L 48 30" stroke="#FFC93C" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      );
    case "cross":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#FFD7CC" stroke="#2B2620" strokeWidth="2"/>
          <rect x="26" y="14" width="8" height="32" fill="#E8402C" stroke="#2B2620" strokeWidth="2"/>
          <rect x="18" y="22" width="24" height="8" fill="#E8402C" stroke="#2B2620" strokeWidth="2"/>
        </svg>
      );
    case "bridge":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="26" fill="#B8E4DC" stroke="#2B2620" strokeWidth="2"/>
          <path d="M8 38 Q 30 20 52 38" fill="none" stroke="#E8402C" strokeWidth="3" strokeLinecap="round"/>
          <line x1="18" y1="34" x2="18" y2="42" stroke="#2B2620" strokeWidth="2"/>
          <line x1="30" y1="28" x2="30" y2="42" stroke="#2B2620" strokeWidth="2"/>
          <line x1="42" y1="34" x2="42" y2="42" stroke="#2B2620" strokeWidth="2"/>
          <line x1="8" y1="42" x2="52" y2="42" stroke="#2B2620" strokeWidth="2"/>
        </svg>
      );
    case "sun":
      return (
        <svg {...common}>
          <circle cx="30" cy="30" r="12" fill="#FFC93C" stroke="#2B2620" strokeWidth="2"/>
          {[0,45,90,135,180,225,270,315].map(a => (
            <line key={a} x1="30" y1="10" x2="30" y2="14" stroke="#2B2620" strokeWidth="2" strokeLinecap="round"
                  transform={`rotate(${a} 30 30)`} />
          ))}
        </svg>
      );
    case "leaf":
      return (
        <svg {...common}>
          <path d="M12 46 Q 14 14 48 14 Q 48 38 24 46 Z" fill="#7FB069" stroke="#2B2620" strokeWidth="2" strokeLinejoin="round"/>
          <path d="M16 44 Q 28 30 42 18" fill="none" stroke="#2B2620" strokeWidth="1.5"/>
        </svg>
      );
    default:
      return null;
  }
};

// ── Chibi characters for Ed + Sharon ──────────────────────────────
// Loose, cute, placeholder-level. Refine later.
const ChibiEd = ({ size = 140 }) => (
  <svg width={size} height={size} viewBox="0 0 160 200">
    {/* body */}
    <path d="M40 140 Q 40 120 56 118 L 104 118 Q 120 120 120 140 L 124 196 L 36 196 Z"
          fill="#ffffff" stroke="#2B2620" strokeWidth="3" strokeLinejoin="round"/>
    {/* collar / shirt details */}
    <line x1="80" y1="120" x2="80" y2="160" stroke="#2B2620" strokeWidth="2"/>
    <circle cx="80" cy="132" r="1.5" fill="#2B2620"/>
    <circle cx="80" cy="144" r="1.5" fill="#2B2620"/>
    {/* neck */}
    <rect x="72" y="108" width="16" height="14" fill="#F5D3B8" stroke="#2B2620" strokeWidth="2.5"/>
    {/* head */}
    <ellipse cx="80" cy="76" rx="38" ry="40" fill="#F5D3B8" stroke="#2B2620" strokeWidth="3"/>
    {/* hair — salt and pepper */}
    <path d="M44 60 Q 46 40 80 36 Q 114 40 116 62 Q 108 50 80 52 Q 52 50 44 60 Z"
          fill="#4A4A4A" stroke="#2B2620" strokeWidth="2.5" strokeLinejoin="round"/>
    <path d="M52 58 Q 56 52 64 54" stroke="#fff" strokeWidth="2" fill="none" opacity="0.5"/>
    {/* beard */}
    <path d="M52 82 Q 56 104 80 106 Q 104 104 108 82 Q 104 94 80 96 Q 56 94 52 82 Z"
          fill="#6A6A6A" stroke="#2B2620" strokeWidth="2.5" strokeLinejoin="round"/>
    {/* eyes */}
    <ellipse cx="66" cy="76" rx="3" ry="4" fill="#2B2620"/>
    <ellipse cx="94" cy="76" rx="3" ry="4" fill="#2B2620"/>
    <circle cx="65" cy="74.5" r="1" fill="#fff"/>
    <circle cx="93" cy="74.5" r="1" fill="#fff"/>
    {/* cheeks */}
    <ellipse cx="56" cy="88" rx="5" ry="3" fill="#FF9F8A" opacity="0.6"/>
    <ellipse cx="104" cy="88" rx="5" ry="3" fill="#FF9F8A" opacity="0.6"/>
    {/* smile */}
    <path d="M72 92 Q 80 96 88 92" fill="none" stroke="#2B2620" strokeWidth="2.2" strokeLinecap="round"/>
  </svg>
);

const ChibiSharon = ({ size = 140 }) => (
  <svg width={size} height={size} viewBox="0 0 160 200">
    {/* body */}
    <path d="M42 142 Q 42 122 58 120 L 102 120 Q 118 122 118 142 L 122 196 L 38 196 Z"
          fill="#ffffff" stroke="#2B2620" strokeWidth="3" strokeLinejoin="round"/>
    {/* blouse detail */}
    <path d="M70 120 L 80 138 L 90 120" fill="none" stroke="#2B2620" strokeWidth="2"/>
    {/* neck */}
    <rect x="72" y="110" width="16" height="14" fill="#F5D3B8" stroke="#2B2620" strokeWidth="2.5"/>
    {/* necklace */}
    <path d="M66 120 Q 80 128 94 120" fill="none" stroke="#FFC93C" strokeWidth="2" strokeLinecap="round"/>
    {/* head */}
    <ellipse cx="80" cy="76" rx="38" ry="40" fill="#F5D3B8" stroke="#2B2620" strokeWidth="3"/>
    {/* hair — brown, shoulder length, center part */}
    <path d="M42 58 Q 50 30 80 28 Q 110 30 118 58 L 120 110 Q 110 98 104 80 Q 100 64 80 60 Q 60 64 56 80 Q 50 98 40 110 Z"
          fill="#5C3A2E" stroke="#2B2620" strokeWidth="2.5" strokeLinejoin="round"/>
    <line x1="80" y1="32" x2="80" y2="56" stroke="#2B2620" strokeWidth="1.5" opacity="0.4"/>
    <path d="M52 54 Q 56 46 66 48" stroke="#fff" strokeWidth="2" fill="none" opacity="0.3"/>
    {/* eyes */}
    <ellipse cx="66" cy="78" rx="3" ry="4" fill="#2B2620"/>
    <ellipse cx="94" cy="78" rx="3" ry="4" fill="#2B2620"/>
    <circle cx="65" cy="76.5" r="1" fill="#fff"/>
    <circle cx="93" cy="76.5" r="1" fill="#fff"/>
    {/* eyebrows */}
    <path d="M60 70 Q 66 68 72 71" fill="none" stroke="#2B2620" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M88 71 Q 94 68 100 70" fill="none" stroke="#2B2620" strokeWidth="1.8" strokeLinecap="round"/>
    {/* cheeks */}
    <ellipse cx="58" cy="92" rx="5" ry="3" fill="#FF9F8A" opacity="0.6"/>
    <ellipse cx="102" cy="92" rx="5" ry="3" fill="#FF9F8A" opacity="0.6"/>
    {/* smile */}
    <path d="M74 94 Q 80 98 86 94" fill="none" stroke="#2B2620" strokeWidth="2.2" strokeLinecap="round"/>
  </svg>
);

// ── Tiny decorative doodles (sprinkled on page backgrounds) ──
const DoodleSparkle = ({ size = 16, color = "#E8402C", style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" style={style}>
    <path d="M10 1 L 11.5 8.5 L 19 10 L 11.5 11.5 L 10 19 L 8.5 11.5 L 1 10 L 8.5 8.5 Z"
          fill={color} stroke="#2B2620" strokeWidth="1.2" strokeLinejoin="round"/>
  </svg>
);
const DoodleSquiggle = ({ size = 40, color = "#2FB5A6", style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 60 20" style={style}>
    <path d="M2 10 Q 10 2, 18 10 T 34 10 T 50 10 T 58 10"
          fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round"/>
  </svg>
);
const DoodleDot = ({ color = "#FFC93C", size = 10, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 10 10" style={style}>
    <circle cx="5" cy="5" r="3.5" fill={color} stroke="#2B2620" strokeWidth="1"/>
  </svg>
);

Object.assign(window, { Sticker, ChibiEd, ChibiSharon, DoodleSparkle, DoodleSquiggle, DoodleDot });
