// Hand-drawn pen-and-ink icons — fine single-weight black strokes,
// organic confident contours, occasional cross-hatching, blue color flecks.
// Inspired by editorial illustration style.

const ICON_DEFAULTS = {
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.5,
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

// Lightbulb — ideas / strategy
const IconLightbulb = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Bulb glass — slightly lopsided organic */}
      <path d="M 32 8 C 22 8, 14 16, 14 26 C 14 32, 17 36, 20 40 C 22 43, 23 45, 23 48 L 41 48 C 41 45, 42 43, 44 40 C 47 36, 50 32, 50 26 C 50 16, 42 8, 32 8 Z"/>
      {/* Filament loops */}
      <path d="M 26 28 C 28 24, 30 24, 32 28 C 34 32, 36 32, 38 28"/>
      <path d="M 32 28 L 32 38"/>
      {/* Base threads */}
      <path d="M 24 51 L 40 51"/>
      <path d="M 25 54 L 39 54"/>
      <path d="M 27 57 C 29 60, 35 60, 37 57"/>
      {/* Light rays — accent */}
      <g stroke={accent} strokeWidth="1.75">
        <path d="M 32 2 L 32 5"/>
        <path d="M 8 16 L 11 18"/>
        <path d="M 56 16 L 53 18"/>
        <path d="M 12 4 L 14 7"/>
        <path d="M 52 4 L 50 7"/>
      </g>
      {/* Hatching shadow on right side of bulb */}
      <g strokeWidth="0.75" opacity="0.55">
        <path d="M 44 22 L 47 26"/>
        <path d="M 43 26 L 46 30"/>
        <path d="M 41 30 L 44 34"/>
      </g>
    </g>
  </svg>
);

// Compass — direction / guide. Loose, organic strokes — wobble, broken contours, off-center geometry.
const IconCompass = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Outer ring — wobbly, drawn in two overlapping passes that don't quite meet */}
      <path d="M 31 5 C 43 5.5, 56 16, 57.5 30 C 59 44, 47 57, 33 58 C 19 58.5, 7 47, 6 33 C 5.2 20, 16 7, 30 5.5"/>
      <path d="M 30 5.5 C 26 6, 22 7, 18 9"/>
      {/* Inner ring — slightly off-center, opens at top-left */}
      <path d="M 33 14 C 42 14, 49.5 22, 50 31.5 C 50.5 41, 42 50, 32.5 50 C 23 50, 15 42, 14.5 32 C 14 23, 21 15, 30 14.2"/>
      {/* Needle — north (accent) — irregular spear, not symmetrical */}
      <path d="M 31.5 12 L 35 30 L 32 28.5 L 29 31 Z" fill={accent} stroke={accent} strokeWidth="1.1"/>
      {/* Needle — south outline */}
      <path d="M 32 52 L 28.5 33 L 31.5 30.5 L 35 32 Z"/>
      {/* Center pin — hand-drawn dot, not perfect circle */}
      <path d="M 31 31.5 C 32 31, 33 31.5, 33 32.5 C 33 33.5, 32 33.5, 31.5 33 C 31 32.5, 31 32, 31 31.5 Z" fill="currentColor"/>
      {/* Cardinal ticks — uneven lengths and angles */}
      <path d="M 32 2 L 31.5 5"/>
      <path d="M 32.5 59 L 32 62.5"/>
      <path d="M 2 31.5 L 5.5 32"/>
      <path d="M 59 32.5 L 62 32"/>
      {/* Hatching shadow lower-right — uneven spacing & angle */}
      <g strokeWidth="0.7" opacity="0.55">
        <path d="M 47 43 L 52 49"/>
        <path d="M 43 47 L 49.5 53"/>
        <path d="M 40 52 L 45.5 56.5"/>
        <path d="M 50 40 L 53 43"/>
      </g>
      {/* Tiny tick marks around outer ring */}
      <g strokeWidth="0.6" opacity="0.5">
        <path d="M 50 13 L 48.5 15"/>
        <path d="M 14 13 L 15.5 15"/>
        <path d="M 50 51 L 48.5 49"/>
        <path d="M 13 50 L 15 48.5"/>
      </g>
    </g>
  </svg>
);

// Flag on staff — independence / banner
const IconFlag = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Staff */}
      <path d="M 14 4 C 14.5 18, 13.5 40, 14 60"/>
      {/* Pennant — accent stroke */}
      <path d="M 14 8 L 50 8 C 50 8, 44 18, 44 21 C 44 24, 50 32, 50 32 L 14 32" stroke={accent} strokeWidth="1.75"/>
      {/* Vertical fold lines */}
      <path d="M 22 11 C 22.5 17, 21.5 24, 22 30"/>
      <path d="M 32 10 C 32.5 18, 31.5 24, 32 31"/>
      <path d="M 41 11 C 41 17, 40 24, 41 30"/>
      {/* Top finial */}
      <circle cx="14" cy="4" r="2.25" fill="currentColor"/>
      {/* Ground tuft */}
      <path d="M 6 60 L 22 60"/>
      <path d="M 9 60 L 11 56"/>
      <path d="M 14 60 L 16 56"/>
      <path d="M 19 60 L 21 57"/>
    </g>
  </svg>
);

// Spark / starburst — hand-drawn radiating lines, varying lengths, slight wobble
const IconSpark = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Eight rays — each a wobbly curve, none perfectly straight */}
      <path d="M 32 6 C 32.5 12, 31.5 18, 32 24"/>
      <path d="M 32 40 C 31.5 46, 32.5 52, 32 58"/>
      <path d="M 6 32 C 12 32.5, 18 31.5, 24 32"/>
      <path d="M 40 32 C 46 31.5, 52 32.5, 58 32"/>
      <path d="M 14 14 C 18 18, 22 22, 25 25"/>
      <path d="M 39 39 C 42 42, 46 46, 50 50"/>
      <path d="M 50 14 C 46 18, 42 22, 39 25"/>
      <path d="M 25 39 C 22 42, 18 46, 14 50"/>
      {/* Center burst — organic blob */}
      <path d="M 30 28 C 34 28, 36 30, 36 32 C 36 35, 34 36, 31 36 C 28 36, 27 33, 28 30 Z" fill={accent} stroke={accent}/>
      {/* Small accent flecks */}
      <circle cx="22" cy="10" r="1" fill={accent} stroke="none"/>
      <circle cx="54" cy="22" r="1" fill={accent} stroke="none"/>
      <circle cx="10" cy="42" r="1" fill={accent} stroke="none"/>
    </g>
  </svg>
);

// Eye — vision / insight
const IconEye = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Almond outline */}
      <path d="M 4 32 C 14 16, 24 12, 32 12 C 40 12, 50 16, 60 32 C 50 48, 40 52, 32 52 C 24 52, 14 48, 4 32 Z"/>
      {/* Iris */}
      <circle cx="32" cy="32" r="11"/>
      {/* Pupil */}
      <circle cx="32" cy="32" r="4" fill="currentColor"/>
      {/* Iris detail rays */}
      <g strokeWidth="0.75" opacity="0.7">
        <path d="M 32 21 L 32 24"/>
        <path d="M 32 40 L 32 43"/>
        <path d="M 21 32 L 24 32"/>
        <path d="M 40 32 L 43 32"/>
        <path d="M 24 24 L 26 26"/>
        <path d="M 38 38 L 40 40"/>
      </g>
      {/* Highlight — accent fleck */}
      <circle cx="29" cy="29" r="1.5" fill={accent} stroke="none"/>
      {/* Hatching over upper lid */}
      <g strokeWidth="0.65" opacity="0.5">
        <path d="M 14 22 L 16 19"/>
        <path d="M 20 18 L 22 15"/>
        <path d="M 26 16 L 27 13"/>
      </g>
    </g>
  </svg>
);

// Rocket — launch / momentum
const IconRocket = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Body */}
      <path d="M 32 6 C 38 12, 42 22, 42 34 L 42 44 L 22 44 L 22 34 C 22 22, 26 12, 32 6 Z"/>
      {/* Window */}
      <circle cx="32" cy="24" r="5"/>
      <circle cx="32" cy="24" r="2" fill={accent} stroke={accent}/>
      {/* Fins */}
      <path d="M 22 36 L 14 50 L 22 44"/>
      <path d="M 42 36 L 50 50 L 42 44"/>
      {/* Flame */}
      <path d="M 26 44 C 26 50, 28 54, 30 58 C 31 54, 32 52, 32 50 C 32 52, 33 54, 34 58 C 36 54, 38 50, 38 44" stroke={accent} strokeWidth="1.75"/>
      {/* Body hatching right side */}
      <g strokeWidth="0.7" opacity="0.5">
        <path d="M 36 16 L 38 20"/>
        <path d="M 36 22 L 38 26"/>
        <path d="M 36 28 L 38 32"/>
        <path d="M 36 34 L 38 38"/>
      </g>
    </g>
  </svg>
);

// Target — focus / goals
const IconTarget = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      <path d="M 32 6 C 46 6, 58 18, 58 32 C 58 46, 46 58, 32 58 C 18 58, 6 46, 6 32 C 6 18, 18 6, 32 6 Z"/>
      <path d="M 32 14 C 42 14, 50 22, 50 32 C 50 42, 42 50, 32 50 C 22 50, 14 42, 14 32 C 14 22, 22 14, 32 14 Z"/>
      <path d="M 32 22 C 38 22, 42 26, 42 32 C 42 38, 38 42, 32 42 C 26 42, 22 38, 22 32 C 22 26, 26 22, 32 22 Z"/>
      <circle cx="32" cy="32" r="3" fill={accent} stroke={accent}/>
      {/* Arrow piercing */}
      <path d="M 50 14 L 32 32" stroke="currentColor"/>
      <path d="M 50 14 L 46 14 M 50 14 L 50 18" stroke="currentColor"/>
      {/* Hatching */}
      <g strokeWidth="0.7" opacity="0.5">
        <path d="M 46 46 L 50 50"/>
        <path d="M 42 50 L 48 54"/>
      </g>
    </g>
  </svg>
);

// Brain — intelligence / thinking
const IconBrain = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Outer brain shape */}
      <path d="M 22 14 C 18 14, 14 18, 14 22 C 10 24, 8 28, 10 32 C 8 36, 10 40, 14 42 C 14 46, 18 50, 22 50 C 24 52, 28 52, 30 50 L 30 14 C 28 12, 24 12, 22 14 Z"/>
      <path d="M 42 14 C 46 14, 50 18, 50 22 C 54 24, 56 28, 54 32 C 56 36, 54 40, 50 42 C 50 46, 46 50, 42 50 C 40 52, 36 52, 34 50 L 34 14 C 36 12, 40 12, 42 14 Z"/>
      {/* Center division */}
      <path d="M 32 12 L 32 52"/>
      {/* Folds left */}
      <path d="M 16 22 C 20 22, 22 24, 24 26"/>
      <path d="M 14 32 C 18 32, 22 30, 26 34"/>
      <path d="M 16 42 C 20 42, 22 40, 26 42"/>
      {/* Folds right */}
      <path d="M 48 22 C 44 22, 42 24, 40 26"/>
      <path d="M 50 32 C 46 32, 42 30, 38 34"/>
      <path d="M 48 42 C 44 42, 42 40, 38 42"/>
      {/* Spark accent */}
      <circle cx="32" cy="32" r="2" fill={accent} stroke={accent}/>
    </g>
  </svg>
);

// Hand pointer — action / "this way"
const IconHand = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Pointing hand — schematic */}
      <path d="M 14 36 C 14 30, 18 28, 22 30 L 22 18 C 22 14, 26 14, 28 16 L 28 30 L 30 30 L 30 12 C 30 8, 34 8, 36 10 L 36 30 L 38 30 L 38 14 C 38 10, 42 10, 44 12 L 44 32 L 46 32 L 46 22 C 46 18, 50 18, 52 20 L 52 38 C 52 48, 46 56, 36 56 L 28 56 C 20 56, 14 50, 14 42 Z"/>
      {/* Knuckle creases */}
      <path d="M 24 40 C 28 41, 34 41, 40 40"/>
      {/* Cuff */}
      <path d="M 24 56 L 44 56"/>
      <path d="M 24 60 L 44 60"/>
      {/* Sparkle accent at fingertip */}
      <g stroke={accent} strokeWidth="1.5">
        <path d="M 38 4 L 38 8"/>
        <path d="M 34 6 L 36 8"/>
        <path d="M 42 6 L 40 8"/>
      </g>
    </g>
  </svg>
);

// Quill / pen — craft / writing
const IconQuill = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Feather curve */}
      <path d="M 56 8 C 40 14, 28 22, 22 34 C 18 42, 16 48, 14 54"/>
      <path d="M 56 8 C 50 18, 44 26, 36 32 C 32 36, 28 38, 24 40 L 14 54"/>
      {/* Barbs */}
      <path d="M 50 14 L 46 18"/>
      <path d="M 44 18 L 40 22"/>
      <path d="M 38 24 L 34 28"/>
      <path d="M 32 30 L 28 34"/>
      <path d="M 26 36 L 22 40"/>
      {/* Nib */}
      <path d="M 14 54 L 10 60"/>
      {/* Ink dot — accent */}
      <circle cx="9" cy="62" r="1.5" fill={accent} stroke={accent}/>
      {/* Squiggle line being written */}
      <path d="M 18 58 C 26 58, 34 60, 42 58" stroke={accent} strokeWidth="1.25"/>
    </g>
  </svg>
);

// Network / interlinked figures — hand-drawn people-icon cluster
const IconNetwork = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS} strokeLinejoin="round">
      {/* Top node — head, drawn as wobbly polyline (not a clean ellipse) */}
      <path d="M 31.4 7.8 C 34.6 7.6 37.3 9.7 37.5 12.7 C 37.7 15.9 35.1 18.4 32.1 18.5 C 28.7 18.6 26.5 16.1 26.6 13.1 C 26.6 10.2 28.6 8.0 31.4 7.8 Z"/>
      {/* shoulders — two scratchy passes */}
      <path d="M 25.6 24.2 C 27.6 20.4 36.1 19.9 38.6 23.8"/>
      <path d="M 26.4 25.0 C 28.4 21.5 35.6 21.2 37.8 24.6" opacity="0.55"/>

      {/* Bottom-left node */}
      <path d="M 13.6 37.8 C 16.7 37.6 19.3 39.6 19.4 42.7 C 19.6 45.9 17.0 48.3 14.0 48.4 C 10.7 48.5 8.6 46.0 8.7 43.0 C 8.8 40.2 10.8 38.0 13.6 37.8 Z"/>
      <path d="M 7.7 53.9 C 9.7 50.2 18.0 49.7 20.5 53.6"/>
      <path d="M 8.5 54.7 C 10.4 51.3 17.6 51.0 19.7 54.3" opacity="0.55"/>

      {/* Bottom-right node */}
      <path d="M 49.6 37.8 C 52.7 37.6 55.3 39.6 55.4 42.7 C 55.6 45.9 53.0 48.3 50.0 48.4 C 46.7 48.5 44.6 46.0 44.7 43.0 C 44.8 40.2 46.8 38.0 49.6 37.8 Z"/>
      <path d="M 43.7 53.9 C 45.7 50.2 54.0 49.7 56.5 53.6"/>
      <path d="M 44.5 54.7 C 46.4 51.3 53.6 51.0 55.7 54.3" opacity="0.55"/>

      {/* Connecting hand-drawn arcs — wobbled, with a second slightly-offset 'sketch' pass */}
      <path d="M 27.8 22.4 C 24.2 25.4 20.6 29.8 17.6 36.2" stroke={accent}/>
      <path d="M 28.2 23.0 C 24.8 26.0 21.0 30.4 18.2 36.0" stroke={accent} opacity="0.55"/>

      <path d="M 36.2 22.4 C 40.4 25.6 43.6 30.0 46.4 36.2" stroke={accent}/>
      <path d="M 35.8 23.2 C 40.0 26.4 43.2 30.6 45.8 36.0" stroke={accent} opacity="0.55"/>

      <path d="M 19.8 44.4 C 27.6 41.6 36.6 41.6 44.2 44.2" stroke={accent}/>
      <path d="M 20.4 45.0 C 28.0 42.4 36.0 42.4 43.6 44.8" stroke={accent} opacity="0.55"/>

      {/* Tiny accent ticks at midpoints */}
      <path d="M 24.4 30.8 L 25.6 32.0" stroke={accent} strokeWidth="1.4"/>
      <path d="M 39.4 30.8 L 38.2 32.0" stroke={accent} strokeWidth="1.4"/>
      <circle cx="32" cy="36" r="1.4" fill={accent} stroke="none"/>
    </g>
  </svg>
);

// Megaphone — voice / amplification
const IconMegaphone = ({ size = 64, accent = "#1AA5F5", style }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" style={{ overflow: "visible", ...style }} aria-hidden="true">
    <g {...ICON_DEFAULTS}>
      {/* Cone */}
      <path d="M 8 26 L 8 38 L 30 44 L 50 56 L 50 8 L 30 20 Z"/>
      {/* Inner divider */}
      <path d="M 30 20 L 30 44"/>
      {/* Handle */}
      <path d="M 18 38 L 14 50 L 22 50 L 24 40"/>
      {/* Sound waves — accent */}
      <g stroke={accent} strokeWidth="1.5">
        <path d="M 54 18 C 58 22, 58 42, 54 46"/>
        <path d="M 58 14 C 62 22, 62 42, 58 50"/>
      </g>
    </g>
  </svg>
);

window.IconLightbulb = IconLightbulb;
window.IconCompass = IconCompass;
window.IconFlag = IconFlag;
window.IconSpark = IconSpark;
window.IconEye = IconEye;
window.IconRocket = IconRocket;
window.IconTarget = IconTarget;
window.IconBrain = IconBrain;
window.IconHand = IconHand;
window.IconQuill = IconQuill;
window.IconNetwork = IconNetwork;
window.IconMegaphone = IconMegaphone;