/* Six artefact sample diagrams — minimal Ink-on-Paper line work.
   stroke = currentColor (themes); one accent highlight each. */
function ArtefactSample({ kind }) {
  const c = 'currentColor';
  const a = 'var(--accent)';
  const base = { fill: 'none', stroke: c, strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', vectorEffect: 'non-scaling-stroke' };
  const acc = { ...base, stroke: a, strokeWidth: 1.8 };
  const dot = (x, y, r = 3.4, accent, k) => <circle key={k} cx={x} cy={y} r={r} fill="none" stroke={accent ? a : c} strokeWidth={accent ? 1.8 : 1.4} />;
  const vb = '0 0 240 150';

  switch (kind) {
    case 'actor-map':
      return (
        <svg viewBox={vb} preserveAspectRatio="xMidYMid meet">
          <path {...base} d="M120 75 L60 38 M120 75 L186 44 M120 75 L52 110 M120 75 L182 116 M120 75 L120 24 M60 38 L52 110 M186 44 L182 116" />
          <path {...acc} d="M60 38 L186 44" />
          {dot(120, 75, 8, true, 'c')}
          {dot(60, 38, 3.4, false, 'a')} {dot(186, 44, 3.4, false, 'b')} {dot(52, 110, 3.4, false, 'd')} {dot(182, 116, 3.4, false, 'e')} {dot(120, 24, 2.8, false, 'f')}
        </svg>
      );
    case 'blueprint':
      return (
        <svg viewBox={vb} preserveAspectRatio="xMidYMid meet">
          {[34, 66, 98, 130].map((y, i) => <line key={i} {...base} x1="14" y1={y} x2="226" y2={y} stroke={i === 1 ? a : c} strokeWidth={i === 1 ? 1.8 : 1} strokeDasharray={i === 1 ? '4 4' : ''} />)}
          {[28, 78, 128, 178].map((x, i) => (
            <g key={i}>
              <rect {...base} x={x} y="14" width="34" height="16" rx="2" />
              <rect {...base} x={x} y="42" width="34" height="16" rx="2" />
              <rect {...(i % 2 ? acc : base)} x={x} y="74" width="34" height="16" rx="2" />
              <rect {...base} x={x} y="106" width="34" height="16" rx="2" />
            </g>
          ))}
        </svg>
      );
    case 'persona':
      return (
        <svg viewBox={vb} preserveAspectRatio="xMidYMid meet">
          <circle {...base} cx="52" cy="50" r="26" />
          <circle {...base} cx="52" cy="42" r="9" />
          <path {...base} d="M34 70a18 14 0 0 1 36 0" />
          <line {...base} x1="96" y1="36" x2="210" y2="36" />
          <line {...base} x1="96" y1="50" x2="186" y2="50" />
          <line {...acc} x1="96" y1="64" x2="150" y2="64" />
          {[0, 1, 2, 3].map(i => <rect key={i} {...base} x={28 + i * 48} y="100" width="36" height="10" rx="2" stroke={i === 2 ? a : c} />)}
          {[0, 1, 2, 3].map(i => <line key={'b' + i} {...base} x1={28 + i * 48} y1="124" x2={28 + i * 48 + (i === 2 ? 30 : 18)} y2="124" strokeWidth="3" stroke={i === 2 ? a : c} />)}
        </svg>
      );
    case 'journey':
      return (
        <svg viewBox={vb} preserveAspectRatio="xMidYMid meet">
          <line {...base} x1="16" y1="128" x2="226" y2="128" strokeWidth="1" />
          {[16, 58, 100, 142, 184, 226].map((x, i) => <line key={i} {...base} x1={x} y1="124" x2={x} y2="132" strokeWidth="1" stroke="var(--border)" />)}
          <path {...acc} d="M30 60 C58 30 70 92 100 92 C132 92 138 40 162 48 C184 56 190 100 214 78" />
          {[[30, 60], [100, 92], [162, 48], [214, 78]].map(([x, y], i) => dot(x, y, 4, i === 2, 'j' + i))}
          <path {...base} d="M30 60 V128 M100 92 V128 M162 48 V128 M214 78 V128" strokeWidth="1" strokeDasharray="3 4" />
        </svg>
      );
    case 'empathy':
      return (
        <svg viewBox={vb} preserveAspectRatio="xMidYMid meet">
          <line {...base} x1="120" y1="16" x2="120" y2="134" />
          <line {...base} x1="20" y1="75" x2="220" y2="75" />
          <circle {...acc} cx="120" cy="75" r="20" />
          {[[60, 42], [180, 42], [60, 110], [180, 110]].map(([x, y], i) => (
            <g key={i}>
              <line {...base} x1={x - 30} y1={y} x2={x + 30} y2={y} />
              <line {...base} x1={x - 30} y1={y + 12} x2={x + 14} y2={y + 12} strokeWidth="1" />
            </g>
          ))}
        </svg>
      );
    case 'roadmap-game':
      return (
        <svg viewBox={vb} preserveAspectRatio="xMidYMid meet">
          {[24, 96, 168].map((x, i) => <rect key={i} {...base} x={x} y="14" width="48" height="122" rx="3" stroke="var(--border)" strokeWidth="1" />)}
          {[24, 96, 168].map((x, i) => <line key={'h' + i} {...base} x1={x + 8} y1="28" x2={x + 30} y2="28" strokeWidth="2.4" stroke={i === 1 ? a : c} />)}
          {[[30, 42], [30, 78], [102, 42], [102, 90], [174, 56]].map(([x, y], i) => <rect key={'c' + i} {...(i === 3 ? acc : base)} x={x} y={y} width="36" height="22" rx="2" />)}
          <path {...acc} d="M138 80 q12 -10 24 -16" strokeDasharray="3 4" />
          <path {...acc} d="M160 60 l4 4 4 -8" />
        </svg>
      );
    default: return null;
  }
}
window.ArtefactSample = ArtefactSample;