// Hand-drawn SVG decorations — leaves, insects, squiggles
// All strokes use currentColor so parents can tint via CSS color.

const LeafSprig = ({ size = 64, style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={style}>
    <path d="M10 54 C20 30 38 16 58 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    <path d="M22 38 C28 32 30 26 28 18 C22 22 18 28 22 38 Z" fill="currentColor" opacity="0.65"/>
    <path d="M34 28 C40 24 44 20 44 12 C38 14 32 20 34 28 Z" fill="currentColor" opacity="0.85"/>
    <path d="M18 48 C22 44 24 40 22 34 C17 37 14 43 18 48 Z" fill="currentColor" opacity="0.45"/>
  </svg>
);

const LeafSingle = ({ size = 48, style }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" fill="none" style={style}>
    <path d="M8 40 C10 22 22 8 42 6 C40 26 28 42 8 40 Z" fill="currentColor" opacity="0.85"/>
    <path d="M10 38 L38 10" stroke="var(--paper)" strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
  </svg>
);

const Butterfly = ({ size = 72, style }) => (
  <svg width={size} height={size} viewBox="0 0 72 72" fill="none" style={style}>
    <ellipse cx="36" cy="36" rx="1.4" ry="12" fill="currentColor"/>
    <path d="M36 32 C26 18 12 18 10 30 C10 42 22 46 36 38 Z" fill="currentColor" opacity="0.75"/>
    <path d="M36 32 C46 18 60 18 62 30 C62 42 50 46 36 38 Z" fill="currentColor" opacity="0.75"/>
    <path d="M36 40 C28 50 16 52 14 46 C14 40 24 38 36 44 Z" fill="currentColor" opacity="0.55"/>
    <path d="M36 40 C44 50 56 52 58 46 C58 40 48 38 36 44 Z" fill="currentColor" opacity="0.55"/>
    <circle cx="36" cy="24" r="2" fill="currentColor"/>
    <path d="M34 22 C32 18 30 16 28 15 M38 22 C40 18 42 16 44 15" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
  </svg>
);

const Mushroom = ({ size = 48, style }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" fill="none" style={style}>
    <path d="M8 24 C8 14 15 8 24 8 C33 8 40 14 40 24 Z" fill="currentColor"/>
    <circle cx="18" cy="18" r="2.5" fill="var(--paper)" opacity="0.85"/>
    <circle cx="28" cy="14" r="2" fill="var(--paper)" opacity="0.85"/>
    <circle cx="32" cy="20" r="1.5" fill="var(--paper)" opacity="0.85"/>
    <rect x="18" y="24" width="12" height="16" rx="2" fill="currentColor" opacity="0.45"/>
  </svg>
);

const Beetle = ({ size = 56, style }) => (
  <svg width={size} height={size} viewBox="0 0 56 56" fill="none" style={style}>
    <ellipse cx="28" cy="32" rx="14" ry="18" fill="currentColor"/>
    <path d="M28 14 L28 48" stroke="var(--paper)" strokeWidth="1" opacity="0.4"/>
    <path d="M20 18 L14 10 M36 18 L42 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    <circle cx="20" cy="22" r="1.5" fill="var(--paper)" opacity="0.6"/>
    <circle cx="36" cy="22" r="1.5" fill="var(--paper)" opacity="0.6"/>
  </svg>
);

const Squiggle = ({ width = 120, style }) => (
  <svg width={width} height="24" viewBox="0 0 120 24" fill="none" style={style}>
    <path d="M2 12 Q 12 2, 22 12 T 42 12 T 62 12 T 82 12 T 102 12 T 118 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </svg>
);

const SunBurst = ({ size = 120, style }) => (
  <svg width={size} height={size} viewBox="0 0 120 120" fill="none" style={style}>
    <circle cx="60" cy="60" r="22" fill="currentColor" opacity="0.9"/>
    {Array.from({length:12}).map((_,i)=>{
      const a = (i/12)*Math.PI*2;
      const x1 = 60 + Math.cos(a)*34;
      const y1 = 60 + Math.sin(a)*34;
      const x2 = 60 + Math.cos(a)*52;
      const y2 = 60 + Math.sin(a)*52;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.6"/>;
    })}
  </svg>
);

const DashedLeafDivider = ({ width = 240, style }) => (
  <svg width={width} height="20" viewBox="0 0 240 20" fill="none" style={style}>
    <line x1="0" y1="10" x2="100" y2="10" stroke="currentColor" strokeWidth="1" strokeDasharray="3 5" opacity="0.6"/>
    <path d="M112 4 C106 8 106 12 112 16 C118 12 118 8 112 4 Z" fill="currentColor"/>
    <path d="M120 10 L130 6 M130 6 L135 10" stroke="currentColor" strokeWidth="1" strokeLinecap="round" opacity="0.6"/>
    <line x1="140" y1="10" x2="240" y2="10" stroke="currentColor" strokeWidth="1" strokeDasharray="3 5" opacity="0.6"/>
  </svg>
);

const Acorn = ({ size = 40, style }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={style}>
    <ellipse cx="20" cy="24" rx="10" ry="12" fill="currentColor" opacity="0.85"/>
    <path d="M8 14 C8 10 12 8 20 8 C28 8 32 10 32 14 C32 16 28 18 20 18 C12 18 8 16 8 14 Z" fill="currentColor"/>
    <line x1="20" y1="8" x2="20" y2="4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

const Dragonfly = ({ size = 72, style }) => (
  <svg width={size} height={size} viewBox="0 0 72 72" fill="none" style={style}>
    <ellipse cx="36" cy="36" rx="1.2" ry="18" fill="currentColor"/>
    <ellipse cx="20" cy="30" rx="14" ry="4" fill="currentColor" opacity="0.55" transform="rotate(-15 20 30)"/>
    <ellipse cx="52" cy="30" rx="14" ry="4" fill="currentColor" opacity="0.55" transform="rotate(15 52 30)"/>
    <ellipse cx="22" cy="40" rx="12" ry="3" fill="currentColor" opacity="0.4" transform="rotate(10 22 40)"/>
    <ellipse cx="50" cy="40" rx="12" ry="3" fill="currentColor" opacity="0.4" transform="rotate(-10 50 40)"/>
    <circle cx="36" cy="20" r="2.5" fill="currentColor"/>
  </svg>
);

Object.assign(window, {
  LeafSprig, LeafSingle, Butterfly, Mushroom, Beetle, Squiggle, SunBurst, DashedLeafDivider, Acorn, Dragonfly
});
