/* Krytz · Hand-drawn animated workflow illustrations
 *
 * Six SVG scenes, one per loop stage. Each draws itself with
 * stroke-dasharray + custom keyframes, hand-drawn feel via slight path
 * irregularities and rounded caps. All animate independently, looping.
 */

function WorkflowIllustrations() {
  const steps = [
    { num: '01', label: 'Capture',  desc: 'Text, voice, files — into the system.',         scene: <SceneCapture /> },
    { num: '02', label: 'Extract',  desc: 'Fragments become tasks, dates, blockers.',     scene: <SceneExtract /> },
    { num: '03', label: 'Compute',  desc: 'Seven signals weighed in real time.',           scene: <SceneCompute /> },
    { num: '04', label: 'Decide',   desc: 'One Primary. Three Next. Rest, quiet.',         scene: <SceneDecide />  },
    { num: '05', label: 'Execute',  desc: 'You act — the system records the move.',        scene: <SceneExecute /> },
    { num: '06', label: 'Learn',    desc: 'Behavior tunes weights for tomorrow.',          scene: <SceneLearn />   },
  ];

  return (
    <div className="wf-illus">
      {steps.map((s) => (
        <article key={s.num} className="wf-cell">
          <div className="wf-scene">{s.scene}</div>
          <div className="wf-meta">
            <span className="wf-num">{s.num}</span>
            <h4 className="wf-h">{s.label}</h4>
            <p className="wf-p">{s.desc}</p>
          </div>
        </article>
      ))}
    </div>
  );
}

/* ── Shared SVG defaults ──────────────────────────────────────────────── */
const Defs = () => (
  <defs>
    <filter id="wf-pencil" x="-20%" y="-20%" width="140%" height="140%">
      {/* tiny turbulence for a hand-drawn jitter */}
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3"/>
      <feDisplacementMap in="SourceGraphic" scale="0.6"/>
    </filter>
  </defs>
);

/* 01 · Capture — pen draws a wiggly line, voice waves rise, then fragments fly in */
function SceneCapture() {
  return (
    <svg viewBox="0 0 200 140" className="wf-svg wf-capture">
      <Defs/>
      <g filter="url(#wf-pencil)">
        {/* Notebook page */}
        <rect x="34" y="22" width="132" height="86" rx="6"
              fill="#FFFFFF" stroke="#0E1320" strokeWidth="1.4"/>
        {/* Ruled lines (draw in sequence) */}
        <path className="wf-stroke wf-draw d0" d="M44 42 q44 -2 88 0 q22 1 22 0" />
        <path className="wf-stroke wf-draw d1" d="M44 58 q40 -1 70 1 q14 0 28 -1" />
        <path className="wf-stroke wf-draw d2" d="M44 74 q30 1 60 -1 q26 1 40 0" />
        <path className="wf-stroke wf-draw d3" d="M44 90 q22 -1 44 0 q18 1 36 -1" />
        {/* Pen tip dot following last line */}
        <circle className="wf-pen" r="2.6" cx="0" cy="0" fill="#1B2A4A"/>
        {/* Mic icon w/ pulses */}
        <g transform="translate(168 96)">
          <rect x="-5" y="-10" width="10" height="14" rx="5" fill="#1B2A4A"/>
          <path d="M-9 0 a9 9 0 0 0 18 0" stroke="#1B2A4A" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
          <line x1="0" y1="5" x2="0" y2="11" stroke="#1B2A4A" strokeWidth="1.6" strokeLinecap="round"/>
          <circle className="wf-wave w0" cx="0" cy="-3" r="9" fill="none" stroke="#1B2A4A" strokeWidth="1"/>
          <circle className="wf-wave w1" cx="0" cy="-3" r="9" fill="none" stroke="#1B2A4A" strokeWidth="1"/>
        </g>
      </g>
    </svg>
  );
}

/* 02 · Extract — fragments fly into chip rows */
function SceneExtract() {
  return (
    <svg viewBox="0 0 200 140" className="wf-svg wf-extract">
      <Defs/>
      <g filter="url(#wf-pencil)">
        {/* Loose text scribbles top-left */}
        <path className="wf-stroke wf-draw d0" d="M20 30 q24 -4 46 0" />
        <path className="wf-stroke wf-draw d1" d="M20 42 q18 4 42 -2" />
        <path className="wf-stroke wf-draw d2" d="M20 54 q26 -3 46 2" />
        {/* Arrow */}
        <path className="wf-stroke wf-draw d3" d="M76 42 q14 4 26 0" />
        <path className="wf-stroke wf-draw d3" d="M98 38 l6 4 -6 4" />
        {/* Structured chips on the right */}
        <g className="wf-chip c0">
          <rect x="116" y="26" width="64" height="16" rx="8" fill="#E9E6F8" stroke="#1B2A4A" strokeWidth="1.2"/>
          <circle cx="124" cy="34" r="2.4" fill="#1B2A4A"/>
          <line x1="132" y1="34" x2="172" y2="34" stroke="#0E1320" strokeWidth="1.2" strokeLinecap="round"/>
        </g>
        <g className="wf-chip c1">
          <rect x="116" y="48" width="64" height="16" rx="8" fill="#FFFFFF" stroke="#1B2A4A" strokeWidth="1.2"/>
          <circle cx="124" cy="56" r="2.4" fill="#E58B2A"/>
          <line x1="132" y1="56" x2="172" y2="56" stroke="#0E1320" strokeWidth="1.2" strokeLinecap="round"/>
        </g>
        <g className="wf-chip c2">
          <rect x="116" y="70" width="64" height="16" rx="8" fill="#FFFFFF" stroke="#1B2A4A" strokeWidth="1.2"/>
          <circle cx="124" cy="78" r="2.4" fill="#D8493A"/>
          <line x1="132" y1="78" x2="172" y2="78" stroke="#0E1320" strokeWidth="1.2" strokeLinecap="round"/>
        </g>
        <g className="wf-chip c3">
          <rect x="116" y="92" width="64" height="16" rx="8" fill="#FFFFFF" stroke="#1B2A4A" strokeWidth="1.2"/>
          <circle cx="124" cy="100" r="2.4" fill="#1B7A52"/>
          <line x1="132" y1="100" x2="172" y2="100" stroke="#0E1320" strokeWidth="1.2" strokeLinecap="round"/>
        </g>
      </g>
    </svg>
  );
}

/* 03 · Compute — animated bar weights with labels */
function SceneCompute() {
  const bars = [
    { y: 36, width: 128, label: 'urgency'  },
    { y: 58, width: 114, label: 'depend.'  },
    { y: 80, width: 124, label: 'deadline' },
    { y: 102, width: 84, label: 'effort'   },
  ];
  return (
    <svg viewBox="0 0 200 140" className="wf-svg wf-compute">
      <Defs/>
      <g filter="url(#wf-pencil)">
        {/* Frame */}
        <rect x="20" y="22" width="160" height="96" rx="8"
              fill="#FFFFFF" stroke="#0E1320" strokeWidth="1.4"/>
        {bars.map((b, i) => (
          <g key={i}>
            {/* Track */}
            <line x1="34" x2="166" y1={b.y} y2={b.y}
                  stroke="#F3F0EC" strokeWidth="5" strokeLinecap="round"/>
            {/* Fill — drawn via stroke-dashoffset */}
            <line className={`wf-bar b${i}`} x1="34" x2={34 + b.width} y1={b.y} y2={b.y}
                  stroke="#1B2A4A" strokeWidth="5" strokeLinecap="round"
                  style={{ strokeDasharray: b.width, strokeDashoffset: b.width, '--w': b.width }}/>
          </g>
        ))}
        {/* Labels */}
        <g fontFamily="monospace" fontSize="6.5" fill="#0E1320">
          {bars.map((b, i) => (
            <text key={i} x="34" y={b.y - 4}>{b.label}</text>
          ))}
        </g>
        {/* Tick = decision marker */}
        <circle className="wf-pulse" cx="170" cy="36" r="3" fill="#1B2A4A"/>
      </g>
    </svg>
  );
}

/* 04 · Decide — three queue rows, one rises to "Primary" */
function SceneDecide() {
  return (
    <svg viewBox="0 0 200 140" className="wf-svg wf-decide">
      <Defs/>
      <g filter="url(#wf-pencil)">
        <rect x="18" y="20" width="164" height="100" rx="8"
              fill="#FFFFFF" stroke="#0E1320" strokeWidth="1.4"/>
        {/* Primary slot */}
        <rect x="28" y="30" width="144" height="22" rx="6" fill="#E9E6F8" stroke="#1B2A4A" strokeWidth="1.2"/>
        <text x="36" y="45" fontFamily="monospace" fontSize="7" fill="#2C3E6B" letterSpacing="0.1em">PRIMARY</text>
        <g className="wf-promote">
          <rect x="36" y="36" width="100" height="10" rx="4" fill="#FFFFFF" stroke="#1B2A4A" strokeWidth="1"/>
          <line x1="44" y1="41" x2="124" y2="41" stroke="#0E1320" strokeWidth="1.1" strokeLinecap="round"/>
        </g>
        {/* Next rows */}
        <g className="wf-next n0">
          <rect x="28" y="60" width="144" height="14" rx="4" fill="#FFFFFF" stroke="#F3F0EC" strokeWidth="1"/>
          <circle cx="36" cy="67" r="2" fill="#E58B2A"/>
          <line x1="44" y1="67" x2="120" y2="67" stroke="#46524F" strokeWidth="1" strokeLinecap="round"/>
        </g>
        <g className="wf-next n1">
          <rect x="28" y="78" width="144" height="14" rx="4" fill="#FFFFFF" stroke="#F3F0EC" strokeWidth="1"/>
          <circle cx="36" cy="85" r="2" fill="#828B87"/>
          <line x1="44" y1="85" x2="114" y2="85" stroke="#46524F" strokeWidth="1" strokeLinecap="round"/>
        </g>
        <g className="wf-next n2">
          <rect x="28" y="96" width="144" height="14" rx="4" fill="#FFFFFF" stroke="#F3F0EC" strokeWidth="1"/>
          <circle cx="36" cy="103" r="2" fill="#828B87"/>
          <line x1="44" y1="103" x2="108" y2="103" stroke="#46524F" strokeWidth="1" strokeLinecap="round"/>
        </g>
      </g>
    </svg>
  );
}

/* 05 · Execute — checkbox ticks, arrow shoots out */
function SceneExecute() {
  return (
    <svg viewBox="0 0 200 140" className="wf-svg wf-execute">
      <Defs/>
      <g filter="url(#wf-pencil)">
        {[0,1,2].map(i => (
          <g key={i}>
            <rect x="30" y={32 + i*26} width="14" height="14" rx="3"
                  fill="#FFFFFF" stroke="#0E1320" strokeWidth="1.3"/>
            <path className={`wf-tick t${i}`} d={`M33 ${39 + i*26} l3.5 4 l7.5 -8`}
                  fill="none" stroke="#1B7A52" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <line x1="52" y1={39 + i*26} x2="138" y2={39 + i*26}
                  stroke="#0E1320" strokeWidth="1.2" strokeLinecap="round"/>
          </g>
        ))}
        {/* Burst arrow */}
        <g transform="translate(150 70)">
          <path className="wf-stroke wf-draw d0" d="M-6 0 q14 -2 24 0" />
          <path className="wf-stroke wf-draw d1" d="M14 -6 l6 6 -6 6" />
          {/* speed lines */}
          <line className="wf-speed s0" x1="-20" y1="-8" x2="-8" y2="-8" />
          <line className="wf-speed s1" x1="-22" y1="0"  x2="-10" y2="0" />
          <line className="wf-speed s2" x1="-20" y1="8"  x2="-8" y2="8" />
        </g>
      </g>
    </svg>
  );
}

/* 06 · Learn — circular feedback arrow with a brain-dot pulse */
function SceneLearn() {
  return (
    <svg viewBox="0 0 200 140" className="wf-svg wf-learn">
      <Defs/>
      <g filter="url(#wf-pencil)" transform="translate(100 70)">
        {/* Outer loop arrow */}
        <path className="wf-loop"
              d="M -36 0 a 36 36 0 1 0 36 -36"
              fill="none" stroke="#1B2A4A" strokeWidth="2.2"
              strokeLinecap="round"/>
        <path className="wf-loop-head" d="M -2 -38 l 6 4 -6 4"
              fill="none" stroke="#1B2A4A" strokeWidth="2.2"
              strokeLinecap="round" strokeLinejoin="round"/>
        {/* Inner node */}
        <circle className="wf-core" r="11" fill="#FFFFFF" stroke="#0E1320" strokeWidth="1.4"/>
        <circle r="3.4" fill="#1B2A4A">
          <animate attributeName="r" values="3.4;4.6;3.4" dur="1.8s" repeatCount="indefinite"/>
        </circle>
        {/* Orbiting tick */}
        <g className="wf-orbit">
          <circle cx="38" cy="0" r="3.2" fill="#1B7A52"/>
        </g>
      </g>
    </svg>
  );
}

window.WorkflowIllustrations = WorkflowIllustrations;