// Hand-drawn SVG doodles — generic, original marks
// Size via props; stroke uses currentColor.
const { useId } = React;

const SW = 2.2;

function Squiggle({ w = 120, h = 24, className, style }) {
  return (
    <svg viewBox="0 0 120 24" width={w} height={h} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 14 C 15 4, 25 24, 38 12 S 62 4, 75 16 S 100 6, 117 14" />
    </svg>
  );
}

function Sparkle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3 C 14.3 9, 15 13.5, 25 14 C 15 14.5, 14.3 19, 14 25 C 13.7 19, 13 14.5, 3 14 C 13 13.5, 13.7 9, 14 3Z" />
    </svg>
  );
}

function SparkleCluster({ s = 60, className, style }) {
  return (
    <svg viewBox="0 0 60 48" width={s} height={s * 0.8} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 6 C 18 14, 19 18, 30 19 C 19 20, 18 24, 18 32 C 18 24, 17 20, 6 19 C 17 18, 18 14, 18 6Z" />
      <path d="M46 22 C 46 28, 47 31, 56 32 C 47 33, 46 36, 46 42 C 46 36, 45 33, 36 32 C 45 31, 46 28, 46 22Z" />
    </svg>
  );
}

function HeartDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 23 C 6 17, 3 12, 6 8 C 9 4, 13 7, 14 10 C 15 7, 19 4, 22 8 C 25 12, 22 17, 14 23Z" />
    </svg>
  );
}

function ArrowLoop({ w = 120, h = 46, className, style }) {
  return (
    <svg viewBox="0 0 120 46" width={w} height={h} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 24 C 22 4, 55 4, 70 18 C 80 28, 72 38, 60 34 C 50 31, 54 22, 66 22 L 104 22" />
      <path d="M95 14 L 106 22 L 95 30" />
    </svg>
  );
}

function StarDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3 L 17 11 L 25 12 L 19 17 L 21 25 L 14 20 L 7 25 L 9 17 L 3 12 L 11 11 Z" />
    </svg>
  );
}

function MoonDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 4 C 11 4, 5 11, 6 19 C 7 25, 13 26, 18 24 C 11 22, 9 15, 13 9 C 15 6, 18 5, 20 4Z" />
    </svg>
  );
}

function DropDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3 C 8 11, 5 15, 5 19 C 5 24, 9 26, 14 26 C 19 26, 23 24, 23 19 C 23 15, 20 11, 14 3Z" />
    </svg>
  );
}

function PetalDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="14" cy="14" r="3" />
      <path d="M14 11 C 12 4, 7 4, 7 9 C 7 13, 11 13, 14 11Z" />
      <path d="M17 14 C 24 12, 24 7, 20 7 C 16 7, 15 11, 17 14Z" />
      <path d="M14 17 C 16 24, 21 24, 21 19 C 21 15, 17 15, 14 17Z" />
      <path d="M11 14 C 4 16, 4 21, 8 21 C 12 21, 13 17, 11 14Z" />
    </svg>
  );
}

function SpoonDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="10" cy="9" rx="6" ry="5" />
      <path d="M12 13 L 23 24" />
    </svg>
  );
}

function FoldDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 8 H 24" /><path d="M4 14 H 24" /><path d="M4 20 H 24" />
    </svg>
  );
}

function BubbleDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="10" cy="16" r="6" />
      <circle cx="20" cy="10" r="4" />
      <circle cx="22" cy="20" r="2.5" />
    </svg>
  );
}

function ShieldDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3 L 24 7 C 24 16, 20 22, 14 25 C 8 22, 4 16, 4 7 Z" />
      <path d="M10 14 L 13 17 L 18 11" />
    </svg>
  );
}

function StepsDoodle({ s = 28, className, style }) {
  return (
    <svg viewBox="0 0 28 28" width={s} height={s} className={className} style={style} fill="none"
         stroke="currentColor" strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 24 H 10 V 18 H 16 V 12 H 22 V 6" />
    </svg>
  );
}

function BottleDoodle({ s = 120, className, style }) {
  return (
    <svg viewBox="0 0 100 100" width={s} height={s} className={className} style={style} fill="none"
      stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
      {/* nipple */}
      <path d="M42 12 Q50 6 58 12 L60 20 L40 20 Z" />
      {/* collar */}
      <rect x="38" y="20" width="24" height="8" rx="2" />
      {/* bottle body */}
      <path d="M36 28 Q34 36 34 50 L34 80 Q34 92 50 92 Q66 92 66 80 L66 50 Q66 36 64 28" />
      {/* measurement lines */}
      <path d="M40 44 L46 44 M40 54 L46 54 M40 64 L46 64" strokeWidth="2" />
      {/* bubble + sparkle accents */}
      <circle cx="56" cy="58" r="3" />
      <circle cx="54" cy="72" r="2" />
    </svg>
  );
}

function RattleDoodle({ s = 120, className, style }) {
  return (
    <svg viewBox="0 0 100 100" width={s} height={s} className={className} style={style} fill="none"
      stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
      {/* round head */}
      <circle cx="34" cy="38" r="22" />
      {/* star inside */}
      <path d="M34 28 L36 36 L44 36 L38 41 L40 49 L34 44 L28 49 L30 41 L24 36 L32 36 Z" strokeWidth="2.2" />
      {/* handle */}
      <path d="M52 52 L76 76" />
      {/* ball end */}
      <circle cx="80" cy="80" r="8" />
      {/* squiggles */}
      <path d="M62 32 Q66 28 70 32 Q74 36 70 40" strokeWidth="2" />
    </svg>
  );
}

function PacifierDoodle({ s = 120, className, style }) {
  return (
    <svg viewBox="0 0 100 100" width={s} height={s} className={className} style={style} fill="none"
      stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
      {/* outer ring handle */}
      <circle cx="50" cy="30" r="14" />
      {/* shield */}
      <ellipse cx="50" cy="58" rx="24" ry="14" />
      {/* inner shield detail */}
      <ellipse cx="50" cy="58" rx="16" ry="8" strokeWidth="2" />
      {/* nipple */}
      <path d="M42 72 Q42 84 50 86 Q58 84 58 72" />
      {/* tiny hearts */}
      <path d="M20 42 q-3 -3 0 -6 q3 3 0 6" strokeWidth="2" />
      <path d="M84 46 q-3 -3 0 -6 q3 3 0 6" strokeWidth="2" />
    </svg>
  );
}

function OnesieDoodle({ s = 120, className, style }) {
  return (
    <svg viewBox="0 0 100 100" width={s} height={s} className={className} style={style} fill="none"
      stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
      {/* neckline */}
      <path d="M38 18 Q50 14 62 18" />
      {/* shoulders + sleeves */}
      <path d="M38 18 L22 28 L18 40 L28 44 L32 34" />
      <path d="M62 18 L78 28 L82 40 L72 44 L68 34" />
      {/* body */}
      <path d="M32 34 L30 78 Q30 84 36 84 L40 84 L40 76 L44 76 Q50 78 56 76 L60 76 L60 84 L64 84 Q70 84 70 78 L68 34" />
      {/* leg hem */}
      <path d="M40 76 L40 72 M60 76 L60 72" strokeWidth="2" />
      {/* heart on chest */}
      <path d="M44 44 q-4 -4 0 -8 q4 4 8 0 q4 4 0 8 q-4 4 -8 0" strokeWidth="2.2" />
    </svg>
  );
}

const GLYPHS = {
  petal: PetalDoodle, fold: FoldDoodle, drop: DropDoodle, heart: HeartDoodle,
  spoon: SpoonDoodle, moon: MoonDoodle, star: StarDoodle, arrow: ArrowLoop,
  bubble: BubbleDoodle, shield: ShieldDoodle, steps: StepsDoodle, sparkle: Sparkle,
  bottle: BottleDoodle, rattle: RattleDoodle, pacifier: PacifierDoodle, onesie: OnesieDoodle,
};

function Glyph({ name, ...rest }) {
  const C = GLYPHS[name] || Sparkle;
  return <C {...rest} />;
}

Object.assign(window, {
  Squiggle, Sparkle, SparkleCluster, HeartDoodle, ArrowLoop,
  StarDoodle, MoonDoodle, DropDoodle, PetalDoodle, SpoonDoodle,
  FoldDoodle, BubbleDoodle, ShieldDoodle, StepsDoodle, Glyph,
  BottleDoodle, RattleDoodle, PacifierDoodle, OnesieDoodle,
});