// Decorative doodles — small inline SVGs to sprinkle through the UI.
// All Notion-friendly: hand-drawn feel, single-stroke, slightly imperfect.
// Export to window.Doodles.

const D = ({ children, w = 24, h = 24, className = '', style = {}, color = 'currentColor', ...rest }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className={className} style={style} {...rest}>
    {children}
  </svg>
);

const Doodles = {
  // four-point sparkle
  Sparkle: ({ size = 18, color, className, style }) => (
    <D w={size} h={size} color={color} className={className} style={style}>
      <path d="M12 3 v6 M12 15 v6 M3 12 h6 M15 12 h6"/>
      <path d="m6 6 3 3 M18 18l-3-3 M6 18l3-3 M18 6l-3 3" opacity="0.55"/>
    </D>
  ),
  // wavy underline
  Scribble: ({ w = 80, h = 12, color, className, style }) => (
    <D w={w} h={h} color={color} className={className} style={style}>
      <path d={`M2 ${h-3} Q ${w*0.2} 2, ${w*0.4} ${h-3} T ${w*0.78} ${h-3} T ${w-2} ${h-3}`}/>
    </D>
  ),
  // dashed swoosh arc
  DashedSwoosh: ({ w = 90, h = 30, color, className, style }) => (
    <D w={w} h={h} color={color} className={className} style={style}>
      <path d={`M3 ${h-4} Q ${w/2} -6, ${w-3} ${h-4}`} strokeDasharray="2 4"/>
    </D>
  ),
  // sun-burst radial lines from a tiny dot
  Burst: ({ size = 28, color, className, style }) => (
    <D w={size} h={size} color={color} className={className} style={style}>
      <circle cx="14" cy="14" r="1.5" fill={color} stroke="none"/>
      {Array.from({ length: 8 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 8;
        const x1 = 14 + Math.cos(a) * 5; const y1 = 14 + Math.sin(a) * 5;
        const x2 = 14 + Math.cos(a) * 10; const y2 = 14 + Math.sin(a) * 10;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} opacity={i % 2 ? 1 : 0.55}/>;
      })}
    </D>
  ),
  // soft squiggle (looks like 〰)
  Squiggle: ({ w = 60, h = 16, color, className, style }) => (
    <D w={w} h={h} color={color} className={className} style={style}>
      <path d={`M3 ${h/2} q ${w/8} -${h/2.2}, ${w/4} 0 t ${w/4} 0 t ${w/4} 0`}/>
    </D>
  ),
  // a small bouncing dot constellation
  Constellation: ({ w = 80, h = 40, color, className, style }) => (
    <D w={w} h={h} color={color} className={className} style={style}>
      <circle cx="6" cy="24" r="1.6" fill={color} stroke="none"/>
      <circle cx="22" cy="10" r="1.6" fill={color} stroke="none"/>
      <circle cx="40" cy="22" r="1.6" fill={color} stroke="none"/>
      <circle cx="58" cy="8" r="1.6" fill={color} stroke="none"/>
      <circle cx="74" cy="22" r="1.6" fill={color} stroke="none"/>
      <path d="M6 24 L22 10 L40 22 L58 8 L74 22" strokeDasharray="2 3" opacity="0.55"/>
    </D>
  ),
  // arrow that loops (like Notion "look here")
  ArrowLoop: ({ w = 64, h = 56, color, className, style, flip = false }) => (
    <D w={w} h={h} color={color} className={className} style={{ transform: flip ? 'scaleX(-1)' : undefined, ...style }}>
      <path d="M8 8 q 24 -8, 40 12 q 8 16 -10 26"/>
      <path d="m38 42 0 8 8 -4"/>
    </D>
  ),
  // 3 dots
  ThreeDots: ({ color, className, style }) => (
    <D w={20} h={6} color={color} className={className} style={style}>
      <circle cx="3" cy="3" r="1.6" fill={color} stroke="none"/>
      <circle cx="10" cy="3" r="1.6" fill={color} stroke="none"/>
      <circle cx="17" cy="3" r="1.6" fill={color} stroke="none"/>
    </D>
  ),
  // a tiny "highlighter" rect behind text
  Highlighter: ({ w = 110, h = 14, color, className, style }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox={`0 0 ${w} ${h}`} className={className} style={style}>
      <path d={`M2 ${h-4} L ${w-6} ${h-4} L ${w-2} ${h-7} L ${w-8} 2 L 4 2 Z`} fill={color || 'currentColor'} opacity="0.18"/>
    </svg>
  ),
};

// Floating sparkle field — random small marks within a parent box. Pure decorative.
function SparkleField({ count = 5, color = 'oklch(0.55 0.18 280)', seed = 7, className = '' }) {
  // deterministic positions
  let s = seed;
  const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  return (
    <div className={'pointer-events-none absolute inset-0 overflow-hidden ' + className} aria-hidden="true">
      {Array.from({ length: count }).map((_, i) => {
        const left = (rand() * 100).toFixed(1) + '%';
        const top = (rand() * 100).toFixed(1) + '%';
        const size = 10 + Math.round(rand() * 14);
        const rot = (rand() * 360).toFixed(0);
        const op = 0.4 + rand() * 0.5;
        return (
          <div key={i} style={{ position: 'absolute', left, top, transform: `rotate(${rot}deg)`, opacity: op, color }}>
            <Doodles.Sparkle size={size}/>
          </div>
        );
      })}
    </div>
  );
}

window.Doodles = Doodles;
window.SparkleField = SparkleField;