// doodles.jsx — hand-drawn SVG accents (circles, squiggles, arrows, hearts)
// All use currentColor so they inherit from their parent's color.

function CircleScribble({ stroke = "currentColor", strokeWidth = 2.2, ...rest }) {
  // Hand-drawn ellipse with slight overshoot
  return (
    <svg viewBox="0 0 200 80" fill="none" preserveAspectRatio="none" {...rest}>
      <path
        d="M 195 30
           C 195 12, 150 4, 100 4
           C 35 4, 5 22, 5 42
           C 5 64, 60 78, 110 76
           C 165 74, 198 58, 196 38
           C 195 30, 192 24, 188 22"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function SquiggleLine({ stroke = "currentColor", strokeWidth = 3, ...rest }) {
  return (
    <svg viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" {...rest}>
      <path
        d="M 2 8 C 16 2, 30 12, 46 6 S 74 2, 90 8 S 120 12, 138 6 S 168 2, 186 8 S 196 10, 198 8"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
      />
    </svg>
  );
}

function UnderlineThick({ stroke = "currentColor", strokeWidth = 8, ...rest }) {
  return (
    <svg viewBox="0 0 200 14" fill="none" preserveAspectRatio="none" {...rest}>
      <path
        d="M 4 8 C 40 4, 90 12, 140 6 S 190 10, 196 8"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        opacity="0.6"
      />
    </svg>
  );
}

function ArrowDoodle({ stroke = "currentColor", strokeWidth = 2.4, flip = false, ...rest }) {
  return (
    <svg viewBox="0 0 100 80" fill="none" {...rest} style={{ ...(rest.style || {}), transform: flip ? "scaleX(-1)" : undefined }}>
      <path
        d="M 8 12 C 20 8, 38 14, 50 28 C 62 42, 68 60, 70 70"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        fill="none"
      />
      <path
        d="M 60 60 L 70 72 L 82 64"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </svg>
  );
}

function HeartDoodle({ stroke = "currentColor", fill = "none", strokeWidth = 2.2, ...rest }) {
  return (
    <svg viewBox="0 0 32 30" fill={fill} {...rest}>
      <path
        d="M 16 26 C 10 22, 3 16, 3 10 C 3 5, 7 3, 10 3 C 13 3, 15 5, 16 8 C 17 5, 19 3, 22 3 C 25 3, 29 5, 29 10 C 29 16, 22 22, 16 26 Z"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinejoin="round"
        fill={fill}
      />
    </svg>
  );
}

function StarSpark({ fill = "currentColor", ...rest }) {
  return (
    <svg viewBox="0 0 24 24" fill={fill} {...rest}>
      <path d="M12 0 L13.5 9 L22 10.5 L13.5 12.5 L12 22 L10.5 12.5 L2 10.5 L10.5 9 Z" />
    </svg>
  );
}

function AsteriskDoodle({ stroke = "currentColor", strokeWidth = 2.4, ...rest }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" {...rest}>
      <path d="M12 3 L12 21 M 4.5 7 L 19.5 17 M 4.5 17 L 19.5 7" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" />
    </svg>
  );
}

function DotsCluster({ fill = "currentColor", ...rest }) {
  return (
    <svg viewBox="0 0 60 60" fill={fill} {...rest}>
      {[
        [6, 8], [22, 6], [40, 12], [54, 22],
        [10, 24], [28, 22], [46, 32],
        [14, 40], [32, 42], [50, 48],
        [20, 54], [38, 56]
      ].map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r="2.2" />
      ))}
    </svg>
  );
}

function Bracket({ stroke = "currentColor", strokeWidth = 2.4, side = "left", ...rest }) {
  // [ shaped bracket
  const d = side === "left"
    ? "M 20 4 L 6 4 L 6 76 L 20 76"
    : "M 4 4 L 18 4 L 18 76 L 4 76";
  return (
    <svg viewBox="0 0 24 80" fill="none" {...rest}>
      <path d={d} stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Notebook-style calendar icon (inspired by the Self-Study Map logo)
function CalendarDoodle({ stroke = "currentColor", accent = "var(--accent)", orange = "var(--orange)", blue = "var(--blue)", ...rest }) {
  return (
    <svg viewBox="0 0 120 130" fill="none" {...rest}>
      {/* Spiral binding */}
      {[20, 40, 60, 80, 100].map((x, i) => (
        <rect key={i} x={x - 6} y="4" width="12" height="18" rx="6" fill="#C9C2B0" stroke={stroke} strokeWidth="2" />
      ))}
      {/* Page */}
      <rect x="10" y="14" width="100" height="108" rx="3" fill="white" stroke={stroke} strokeWidth="2.4" />
      {/* Header letters */}
      <text x="25" y="44" fontFamily="'Plus Jakarta Sans', sans-serif" fontWeight="700" fontSize="14" fill={stroke}>M</text>
      <text x="55" y="44" fontFamily="'Plus Jakarta Sans', sans-serif" fontWeight="700" fontSize="14" fill={stroke}>T</text>
      <text x="85" y="44" fontFamily="'Plus Jakarta Sans', sans-serif" fontWeight="700" fontSize="14" fill={stroke}>W</text>
      {/* Divider */}
      <line x1="18" y1="52" x2="102" y2="52" stroke={stroke} strokeWidth="1.5" />
      {/* Columns */}
      <line x1="42" y1="52" x2="42" y2="116" stroke={stroke} strokeWidth="1.5" />
      <line x1="72" y1="52" x2="72" y2="116" stroke={stroke} strokeWidth="1.5" />
      {/* Content lines */}
      <line x1="22" y1="62" x2="36" y2="62" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
      <line x1="22" y1="70" x2="32" y2="70" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
      {/* Yellow bookmark */}
      <path d="M 22 88 L 22 108 L 28 102 L 34 108 L 34 88 Z" fill={accent} stroke={stroke} strokeWidth="1.8" strokeLinejoin="round" />
      {/* Heart */}
      <path d="M 57 76 C 53 73, 49 70, 49 66 C 49 63, 51 62, 53 62 C 55 62, 56 63, 57 65 C 58 63, 59 62, 61 62 C 63 62, 65 63, 65 66 C 65 70, 61 73, 57 76 Z" fill={orange} stroke={stroke} strokeWidth="1.8" strokeLinejoin="round" />
      <line x1="50" y1="86" x2="64" y2="86" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
      <line x1="50" y1="94" x2="62" y2="94" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
      {/* Blue bookmark */}
      <path d="M 82 62 L 82 80 L 88 74 L 94 80 L 94 62 Z" fill={blue} stroke={stroke} strokeWidth="1.8" strokeLinejoin="round" />
      <line x1="80" y1="90" x2="96" y2="90" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
      <line x1="80" y1="98" x2="92" y2="98" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

// Subtle dot grid as a background pattern
function DotGrid({ size = 200, dot = 1.3, gap = 16, color = "currentColor", opacity = 0.15, ...rest }) {
  const dots = [];
  for (let y = gap / 2; y < size; y += gap) {
    for (let x = gap / 2; x < size; x += gap) {
      dots.push(<circle key={`${x}-${y}`} cx={x} cy={y} r={dot} fill={color} opacity={opacity} />);
    }
  }
  return <svg viewBox={`0 0 ${size} ${size}`} {...rest}>{dots}</svg>;
}

Object.assign(window, {
  CircleScribble, SquiggleLine, UnderlineThick, ArrowDoodle,
  HeartDoodle, StarSpark, AsteriskDoodle, DotsCluster, Bracket,
  CalendarDoodle, DotGrid,
});