// annotations.jsx — hand-drawn "pen notes" layer.
// Thin, slightly wobbly single-stroke marks (rough-pen SVG filter),
// short handwritten captions, arrows / dashed guides, and a little decor
// (sparkles, hearts, smileys, steam). Kept calm — leave air.

/* Rough-pen displacement filter — mount once near root. */
function RoughDefs() {
  return (
    <svg width="0" height="0" aria-hidden="true" style={{ position: 'absolute' }}>
      <defs>
        <filter id="rough-pen" x="-25%" y="-25%" width="150%" height="150%">
          <feTurbulence type="fractalNoise" baseFrequency="0.018" numOctaves="3" seed="7" result="n" />
          <feDisplacementMap in="SourceGraphic" in2="n" scale="2.3" xChannelSelector="R" yChannelSelector="G" />
        </filter>
        <filter id="rough-pen-icon" x="-30%" y="-30%" width="160%" height="160%">
          <feTurbulence type="fractalNoise" baseFrequency="0.028" numOctaves="2" seed="11" result="n" />
          <feDisplacementMap in="SourceGraphic" in2="n" scale="3.4" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </defs>
    </svg>
  );
}

// shared svg props for a pen stroke
const penBase = (sw = 2) => ({
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: sw,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  filter: 'url(#rough-pen)',
});

/* Handwritten caption */
function HandText({ children, size = 30, rotate = 0, color = 'currentColor', weight = 500, style }) {
  return (
    <span style={{
      fontFamily: 'var(--hand)',
      fontWeight: weight,
      fontSize: size,
      lineHeight: 1.0,
      letterSpacing: '0.01em',
      color,
      display: 'inline-block',
      transform: `rotate(${rotate}deg)`,
      transformOrigin: 'center',
      whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
}

/* Open ellipse "circled" emphasis */
function CircleAround({ width = 130, color = 'currentColor', sw = 2, style }) {
  return (
    <svg width={width} viewBox="0 0 130 76" style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1"
        d="M101 13 C 66 1, 18 6, 12 36 C 7 62, 70 74, 106 60 C 130 51, 126 19, 92 11 C 84 9, 76 9, 70 10"
        {...penBase(sw)} />
    </svg>
  );
}

/* Squiggly underline (single, casual) */
function Underline({ width = 150, color = 'currentColor', sw = 2.2, style }) {
  return (
    <svg width={width} viewBox="0 0 160 18" style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1"
        d="M5 10 C 38 3, 70 14, 104 7 C 128 2, 146 9, 156 11"
        {...penBase(sw)} />
    </svg>
  );
}

/* Hand arrows — a few presets. variant picks a curve + arrowhead. */
function HandArrow({ variant = 'curveR', width = 64, color = 'currentColor', sw = 2, style }) {
  const presets = {
    // points right & slightly up
    curveR: { vb: '0 0 92 60', main: 'M6 46 C 24 50, 56 44, 78 22', head: ['M78 22 L 62 24', 'M78 22 L 72 38'] },
    // points down-left
    curveDL: { vb: '0 0 80 78', main: 'M68 8 C 64 38, 46 58, 16 66', head: ['M16 66 L 30 62', 'M16 66 L 22 52'] },
    // points down-right
    curveDR: { vb: '0 0 80 78', main: 'M12 8 C 16 38, 34 58, 64 66', head: ['M64 66 L 50 62', 'M64 66 L 58 52'] },
    // points down
    down: { vb: '0 0 44 80', main: 'M22 6 C 16 28, 28 48, 22 70', head: ['M22 70 L 12 56', 'M22 70 L 32 56'] },
  };
  const p = presets[variant] || presets.curveR;
  return (
    <svg width={width} viewBox={p.vb} style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1" d={p.main} {...penBase(sw)} />
      {p.head.map((d, i) => <path key={i} className="anno-draw" pathLength="1" d={d} {...penBase(sw)} />)}
    </svg>
  );
}

/* Dashed guide line (gentle curve) */
function DashGuide({ width = 120, color = 'currentColor', sw = 1.8, style }) {
  return (
    <svg width={width} viewBox="0 0 130 50" style={{ display: 'block', color, ...style }}>
      <path d="M6 38 C 36 10, 84 10, 124 30" {...penBase(sw)} strokeDasharray="1 7" />
    </svg>
  );
}

/* ---- small decor doodles (use sparingly) ---- */

function Sparkle({ width = 22, color = 'var(--accent)', sw = 1.8, style }) {
  return (
    <svg width={width} viewBox="0 0 28 28" style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1"
        d="M14 2 C 15 9, 19 13, 26 14 C 19 15, 15 19, 14 26 C 13 19, 9 15, 2 14 C 9 13, 13 9, 14 2 Z"
        {...penBase(sw)} />
    </svg>
  );
}

function Heart({ width = 22, color = 'var(--accent)', sw = 1.8, fill = true, style }) {
  return (
    <svg width={width} viewBox="0 0 30 28" style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1"
        d="M15 25 C 3 16, 2 8, 8 5 C 12.5 3, 15 7.5 15 10 C 15 7.5, 17.5 3, 22 5 C 28 8, 27 16, 15 25 Z"
        {...penBase(sw)} fill={fill ? 'currentColor' : 'none'} fillOpacity={fill ? 0.14 : 0} />
    </svg>
  );
}

function Smiley({ width = 30, color = 'currentColor', sw = 1.8, style }) {
  return (
    <svg width={width} viewBox="0 0 40 40" style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1"
        d="M33 16 C 30 4, 12 3, 7 15 C 2 27, 12 38, 24 37 C 35 36, 39 25, 35 16"
        {...penBase(sw)} />
      <path className="anno-draw" pathLength="1" d="M15 17 L 15 19" {...penBase(sw)} />
      <path className="anno-draw" pathLength="1" d="M26 16 L 26 18" {...penBase(sw)} />
      <path className="anno-draw" pathLength="1" d="M14 26 C 18 31, 25 30, 28 25" {...penBase(sw)} />
    </svg>
  );
}

function Steam({ width = 22, color = 'var(--ink-faint)', sw = 1.8, style }) {
  return (
    <svg width={width} viewBox="0 0 26 34" style={{ display: 'block', color, ...style }}>
      <path className="anno-draw" pathLength="1" d="M9 30 C 3 24, 13 19, 8 12 C 5 8, 9 4, 9 2" {...penBase(sw)} />
      <path className="anno-draw" pathLength="1" d="M18 30 C 12 24, 22 19, 17 12 C 14 8, 18 5, 18 3" {...penBase(sw)} />
    </svg>
  );
}

/* A positioned note wrapper: absolute placement + scroll draw-in via Reveal. */
function Note({ children, style, desktopOnly, color = 'var(--ink)' }) {
  return (
    <div className={`hand-note${desktopOnly ? ' hand-note--desktop' : ''}`} style={{
      position: 'absolute', zIndex: 4, pointerEvents: 'none', color, ...style,
    }}>
      <Reveal>{children}</Reveal>
    </div>
  );
}

Object.assign(window, {
  RoughDefs, HandText, CircleAround, Underline, HandArrow, DashGuide,
  Sparkle, Heart, Smiley, Steam, Note,
});