// Hand-drawn line-art vignettes per question — gold ink on wine
const VIG_PROPS = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };

const Vignettes = {
  // Q1 — industry: anvil/gear (industry mark)
  1: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <circle cx="40" cy="40" r="18" />
      <circle cx="40" cy="40" r="6" />
      <g>{[0,45,90,135,180,225,270,315].map(a => (
        <line key={a} x1="40" y1="40" x2={40 + 28*Math.cos(a*Math.PI/180)} y2={40 + 28*Math.sin(a*Math.PI/180)}
              transform={`rotate(${a} 40 40)`} strokeDasharray="2 4" opacity=".5"/>
      ))}</g>
      {[0,45,90,135,180,225,270,315].map(a => (
        <rect key={a} x="38" y="14" width="4" height="6" transform={`rotate(${a} 40 40)`}/>
      ))}
    </svg>
  ),
  // Q2 — quill / scroll (description)
  2: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <path d="M16 22 Q14 18 18 16 L56 16 Q60 14 62 18 L62 56 Q64 60 60 62 L22 62 Q18 64 16 60 Z"/>
      <path d="M22 26 L52 26 M22 32 L48 32 M22 38 L52 38 M22 44 L42 44"/>
      <path d="M58 14 L72 8 L70 22 Z" />
      <line x1="62" y1="18" x2="68" y2="14"/>
    </svg>
  ),
  // Q3 — globe / target market
  3: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <circle cx="40" cy="40" r="26"/>
      <ellipse cx="40" cy="40" rx="12" ry="26"/>
      <line x1="14" y1="40" x2="66" y2="40"/>
      <path d="M16 28 Q40 32 64 28 M16 52 Q40 48 64 52"/>
      <circle cx="40" cy="40" r="3" fill="currentColor"/>
    </svg>
  ),
  // Q4 — telescope / spotting customers
  4: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <path d="M14 50 L34 30 L52 48 L32 68 Z"/>
      <path d="M52 48 L62 38 L70 46 L60 56 Z"/>
      <line x1="38" y1="34" x2="56" y2="52"/>
      <circle cx="22" cy="58" r="2" fill="currentColor"/>
      <circle cx="66" cy="14" r="1.5" fill="currentColor"/>
      <circle cx="58" cy="20" r="1" fill="currentColor"/>
      <circle cx="72" cy="22" r="1" fill="currentColor"/>
    </svg>
  ),
  // Q5 — flag / objective banner
  5: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <line x1="20" y1="12" x2="20" y2="68"/>
      <path d="M20 18 L58 18 L52 28 L58 38 L20 38 Z"/>
      <circle cx="20" cy="10" r="2" fill="currentColor"/>
      <path d="M14 68 L26 68" />
    </svg>
  ),
  // Q6 — coin / pricing
  6: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <ellipse cx="40" cy="36" rx="22" ry="20" />
      <ellipse cx="40" cy="44" rx="22" ry="20" />
      <line x1="18" y1="36" x2="18" y2="44"/>
      <line x1="62" y1="36" x2="62" y2="44"/>
      <text x="40" y="42" fontSize="18" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="serif">¥</text>
    </svg>
  ),
  // Q7 — treasure chest / budget
  7: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <path d="M14 36 L14 64 L66 64 L66 36"/>
      <path d="M14 36 Q14 22 40 22 Q66 22 66 36"/>
      <line x1="14" y1="46" x2="66" y2="46"/>
      <rect x="36" y="42" width="8" height="10"/>
      <circle cx="40" cy="48" r="1" fill="currentColor"/>
      <path d="M22 22 L22 16 M58 22 L58 16" opacity=".6"/>
    </svg>
  ),
  // Q8 — crossed cannons / acquisition channels
  8: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <path d="M16 60 L52 24 M28 60 L64 24" />
      <circle cx="14" cy="62" r="6"/>
      <circle cx="26" cy="62" r="6"/>
      <path d="M52 22 L58 20 L60 22 L58 28 Z" fill="currentColor"/>
      <path d="M64 22 L70 20 L72 22 L70 28 Z" fill="currentColor"/>
    </svg>
  ),
  // Q9 — sails / media platforms
  9: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <line x1="40" y1="10" x2="40" y2="62"/>
      <path d="M40 14 L60 50 L40 50 Z"/>
      <path d="M40 14 L20 50 L40 50 Z" opacity=".6"/>
      <path d="M22 62 Q40 68 58 62 L62 70 L18 70 Z"/>
      <line x1="34" y1="10" x2="46" y2="10"/>
    </svg>
  ),
  // Q10 — anchor / experience
  10: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <circle cx="40" cy="20" r="5"/>
      <line x1="40" y1="25" x2="40" y2="60"/>
      <path d="M22 50 Q22 60 40 60 Q58 60 58 50"/>
      <line x1="32" y1="32" x2="48" y2="32"/>
      <path d="M18 50 L26 50 M54 50 L62 50"/>
    </svg>
  ),
  // Q11 — crossed swords / competitors
  11: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <path d="M18 18 L52 52 M62 18 L28 52"/>
      <path d="M14 14 L20 14 L20 22 L18 24 L12 18 Z" fill="currentColor"/>
      <path d="M66 14 L60 14 L60 22 L62 24 L68 18 Z" fill="currentColor"/>
      <line x1="50" y1="50" x2="56" y2="56"/>
      <line x1="30" y1="50" x2="24" y2="56"/>
      <circle cx="40" cy="40" r="2" fill="currentColor"/>
    </svg>
  ),
  // Q12 — wax-sealed letter / contact
  12: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <rect x="14" y="22" width="52" height="36" rx="2"/>
      <path d="M14 24 L40 44 L66 24"/>
      <circle cx="40" cy="56" r="8" fill="currentColor" opacity=".15"/>
      <circle cx="40" cy="56" r="8"/>
      <path d="M36 53 L40 60 L44 53 M37 56 L43 56" />
    </svg>
  ),
  // Done — treasure map
  done: () => (
    <svg viewBox="0 0 80 80" {...VIG_PROPS}>
      <path d="M12 18 L20 14 L32 18 L48 14 L60 18 L68 14 L68 62 L60 66 L48 62 L32 66 L20 62 L12 66 Z"/>
      <path d="M22 30 Q30 26 38 30 T56 30" opacity=".6"/>
      <path d="M22 44 Q34 40 42 44 T60 42" opacity=".6"/>
      <path d="M50 50 L56 56 M53 50 L53 56 M50 53 L56 53" />
      <text x="52" y="58" fontSize="6" fill="currentColor" stroke="none" fontFamily="serif">X</text>
    </svg>
  ),
};

window.Vignettes = Vignettes;
