// Custom hand-drawn SVG icons + class silhouettes for KingdomTale
// All exported to window for cross-script availability.

const Ornament = ({ className = "" }) => (
  <svg viewBox="0 0 200 24" className={className} aria-hidden="true">
    <g fill="none" stroke="currentColor" strokeWidth="1">
      <path d="M0 12 L70 12" />
      <path d="M130 12 L200 12" />
      <path d="M85 12 L100 4 L115 12 L100 20 Z" />
      <circle cx="100" cy="12" r="2" fill="currentColor" />
      <path d="M70 12 L78 8 M70 12 L78 16" />
      <path d="M130 12 L122 8 M130 12 L122 16" />
    </g>
  </svg>
);

const Crown = ({ className = "" }) => (
  <svg viewBox="0 0 64 48" className={className} aria-hidden="true">
    <path d="M4 36 L8 12 L20 26 L32 6 L44 26 L56 12 L60 36 Z M4 36 L60 36 L58 44 L6 44 Z"
      fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="miter"/>
    <circle cx="8" cy="12" r="2" fill="currentColor"/>
    <circle cx="32" cy="6" r="2.5" fill="currentColor"/>
    <circle cx="56" cy="12" r="2" fill="currentColor"/>
  </svg>
);

const Swords = ({ className = "" }) => (
  <svg viewBox="0 0 64 64" className={className} aria-hidden="true">
    <g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="miter">
      <path d="M8 8 L12 4 L40 32 L36 36 Z"/>
      <path d="M36 36 L44 44 M40 40 L48 48"/>
      <path d="M56 8 L52 4 L24 32 L28 36 Z"/>
      <path d="M28 36 L20 44 M24 40 L16 48"/>
    </g>
  </svg>
);

const Shield = ({ className = "" }) => (
  <svg viewBox="0 0 48 56" className={className} aria-hidden="true">
    <path d="M24 4 L44 10 L42 32 C42 44 24 52 24 52 C24 52 6 44 6 32 L4 10 Z"
      fill="none" stroke="currentColor" strokeWidth="1.5"/>
    <path d="M24 14 L24 42 M14 22 L34 22" stroke="currentColor" strokeWidth="1"/>
  </svg>
);

const Skull = ({ className = "" }) => (
  <svg viewBox="0 0 48 56" className={className} aria-hidden="true">
    <path d="M8 22 C8 12 14 6 24 6 C34 6 40 12 40 22 L40 36 L34 40 L34 48 L30 48 L30 44 L26 44 L26 48 L22 48 L22 44 L18 44 L18 48 L14 48 L14 40 L8 36 Z"
      fill="none" stroke="currentColor" strokeWidth="1.5"/>
    <circle cx="18" cy="26" r="3" fill="currentColor"/>
    <circle cx="30" cy="26" r="3" fill="currentColor"/>
    <path d="M22 34 L26 34 M24 30 L24 36" stroke="currentColor"/>
  </svg>
);

const Flame = ({ className = "" }) => (
  <svg viewBox="0 0 48 56" className={className} aria-hidden="true">
    <path d="M24 4 C20 14 12 18 12 30 C12 42 18 50 24 50 C30 50 36 42 36 30 C36 24 32 20 30 16 C30 22 26 24 26 18 C26 14 24 10 24 4 Z"
      fill="none" stroke="currentColor" strokeWidth="1.5"/>
  </svg>
);

const Tower = ({ className = "" }) => (
  <svg viewBox="0 0 48 56" className={className} aria-hidden="true">
    <g fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M8 50 L8 18 L16 18 L16 14 L20 14 L20 18 L28 18 L28 14 L32 14 L32 18 L40 18 L40 50 Z"/>
      <path d="M14 18 L14 12 L18 12 L18 18 M30 18 L30 12 L34 12 L34 18"/>
      <path d="M20 50 L20 36 L28 36 L28 50"/>
      <circle cx="24" cy="28" r="3"/>
    </g>
  </svg>
);

const Banner = ({ className = "" }) => (
  <svg viewBox="0 0 48 56" className={className} aria-hidden="true">
    <g fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M24 4 L24 52 M22 4 L26 4"/>
      <path d="M24 10 L40 12 L36 22 L40 32 L24 30 Z"/>
      <circle cx="32" cy="20" r="2.5"/>
    </g>
  </svg>
);

const Bolt = ({ className = "" }) => (
  <svg viewBox="0 0 48 56" className={className} aria-hidden="true">
    <path d="M28 4 L10 32 L22 32 L18 52 L38 22 L26 22 Z"
      fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="miter"/>
  </svg>
);

// ============================================================
// CLASS SILHOUETTES — heraldic, monumental, simple
// ============================================================

const KnightSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Helmet */}
      <path d="M50 14 L70 14 L74 22 L74 38 L66 38 L66 46 L54 46 L54 38 L46 38 L46 22 Z" />
      <rect x="54" y="26" width="12" height="4" fill="#000"/>
      {/* Plume */}
      <path d="M58 4 L62 4 L60 16 Z"/>
      {/* Pauldrons */}
      <path d="M32 50 L60 44 L88 50 L92 70 L80 64 L80 84 L40 84 L40 64 L28 70 Z"/>
      {/* Torso/skirt */}
      <path d="M40 84 L80 84 L84 130 L70 138 L60 132 L50 138 L36 130 Z"/>
      {/* Legs */}
      <path d="M44 138 L56 132 L58 184 L46 188 Z"/>
      <path d="M62 132 L74 138 L72 188 L60 184 Z"/>
      {/* Sword */}
      <path d="M96 60 L102 60 L102 150 L96 150 Z"/>
      <path d="M86 64 L112 64 L112 70 L86 70 Z"/>
      <path d="M97 150 L101 150 L99 162 Z"/>
      {/* Shield */}
      <path d="M10 70 L28 64 L30 110 C30 122 20 130 20 130 C20 130 10 122 10 110 Z"/>
    </g>
  </svg>
);

const MechanicianSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Goggled helm */}
      <path d="M48 12 L72 12 L76 26 L76 44 L70 50 L50 50 L44 44 L44 26 Z"/>
      <circle cx="55" cy="32" r="5" fill="#000"/>
      <circle cx="65" cy="32" r="5" fill="#000"/>
      <circle cx="55" cy="32" r="2" fill="currentColor"/>
      <circle cx="65" cy="32" r="2" fill="currentColor"/>
      {/* Body — bulky/mechanical */}
      <path d="M30 56 L60 50 L90 56 L94 80 L78 78 L82 110 L38 110 L42 78 L26 80 Z"/>
      {/* Gear */}
      <circle cx="60" cy="78" r="8" fill="#000"/>
      <circle cx="60" cy="78" r="4" fill="currentColor"/>
      {/* Legs */}
      <path d="M40 110 L82 110 L78 188 L66 188 L62 138 L58 138 L54 188 L42 188 Z"/>
      {/* Wrench/weapon */}
      <path d="M96 70 L106 70 L106 150 L96 150 Z"/>
      <path d="M92 64 L110 64 L114 74 L110 80 L92 80 Z"/>
    </g>
  </svg>
);

const PikemanSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Helmet — pointed kettle */}
      <path d="M48 10 L72 10 L78 28 L72 42 L48 42 L42 28 Z"/>
      <rect x="54" y="28" width="12" height="4" fill="#000"/>
      {/* Body */}
      <path d="M34 48 L60 42 L86 48 L90 68 L78 64 L80 100 L40 100 L42 64 L30 68 Z"/>
      {/* Legs */}
      <path d="M44 100 L60 96 L76 100 L72 188 L60 184 L48 188 Z"/>
      {/* Pike — long shaft, diagonal */}
      <path d="M22 8 L28 4 L108 188 L102 192 Z"/>
      <path d="M22 8 L34 4 L36 18 L26 22 Z"/>
    </g>
  </svg>
);

const ArcherSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Hood */}
      <path d="M52 8 L68 8 L78 18 L78 36 L66 44 L54 44 L42 36 L42 18 Z"/>
      <path d="M54 30 L66 30 L62 38 L58 38 Z" fill="#000"/>
      {/* Cape body */}
      <path d="M36 48 L60 44 L84 48 L92 78 L82 92 L86 130 L76 138 L60 134 L44 138 L34 130 L38 92 L28 78 Z"/>
      {/* Legs */}
      <path d="M48 138 L60 134 L72 138 L70 188 L58 186 L50 188 Z"/>
      {/* Bow */}
      <path d="M14 50 C24 40 24 130 14 120 L18 118 C26 128 26 42 18 52 Z"/>
      {/* String */}
      <path d="M18 52 L18 118" stroke="currentColor" strokeWidth="1" fill="none"/>
      {/* Quiver arrow */}
      <path d="M88 30 L92 28 L100 70 L96 72 Z"/>
    </g>
  </svg>
);

const AtalantaSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Crested helmet (Greek style) */}
      <path d="M48 18 L72 18 L74 38 L66 44 L54 44 L46 38 Z"/>
      <path d="M54 6 L66 6 L70 18 L50 18 Z"/>
      <rect x="56" y="28" width="8" height="4" fill="#000"/>
      {/* Lithe body */}
      <path d="M40 50 L60 44 L80 50 L86 76 L78 80 L82 116 L38 116 L42 80 L34 76 Z"/>
      {/* Legs (athletic) */}
      <path d="M46 116 L60 112 L74 116 L70 188 L60 184 L50 188 Z"/>
      {/* Spear */}
      <path d="M94 10 L102 10 L102 150 L94 150 Z"/>
      <path d="M92 4 L104 4 L98 16 Z"/>
      {/* Small round shield */}
      <path d="M16 80 C16 64 32 64 32 80 C32 96 16 96 16 80 Z"/>
      <circle cx="24" cy="80" r="4" fill="#000"/>
    </g>
  </svg>
);

const MagicianSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Pointed hat */}
      <path d="M40 50 L60 4 L80 50 Z"/>
      <rect x="38" y="48" width="44" height="6"/>
      {/* Face shadow */}
      <path d="M50 54 L70 54 L68 70 L52 70 Z"/>
      {/* Robe — wide flowing */}
      <path d="M30 76 L60 70 L90 76 L100 130 L86 138 L78 188 L42 188 L34 138 L20 130 Z"/>
      {/* Belt */}
      <path d="M40 116 L80 116 L82 124 L38 124 Z" fill="#000"/>
      {/* Staff with orb */}
      <path d="M100 30 L106 30 L106 160 L100 160 Z"/>
      <circle cx="103" cy="24" r="8"/>
      <circle cx="103" cy="24" r="4" fill="#000"/>
    </g>
  </svg>
);

const PriestessSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Veil/headdress */}
      <path d="M44 12 L76 12 L82 30 L76 50 L44 50 L38 30 Z"/>
      <path d="M50 26 L70 26 L66 40 L54 40 Z" fill="#000"/>
      {/* Crown band */}
      <path d="M48 12 L72 12 L70 18 L50 18 Z" fill="#000"/>
      <circle cx="60" cy="14" r="2" fill="currentColor"/>
      {/* Robe — long and flowing */}
      <path d="M30 56 L60 50 L90 56 L96 100 L92 188 L28 188 L24 100 Z"/>
      {/* Cross/holy mark */}
      <rect x="56" y="100" width="8" height="24" fill="#000"/>
      <rect x="48" y="108" width="24" height="8" fill="#000"/>
      {/* Wand */}
      <path d="M100 60 L106 60 L106 150 L100 150 Z"/>
      <path d="M96 56 L110 56 L103 48 Z"/>
    </g>
  </svg>
);

const ShamanSilhouette = ({ className = "" }) => (
  <svg viewBox="0 0 120 200" className={className} aria-hidden="true">
    <g fill="currentColor">
      {/* Skull mask / horned headdress */}
      <path d="M44 12 L76 12 L82 32 L76 50 L44 50 L38 32 Z"/>
      {/* Horns */}
      <path d="M36 24 L26 8 L40 18 Z"/>
      <path d="M84 24 L94 8 L80 18 Z"/>
      <rect x="52" y="28" width="6" height="6" fill="#000"/>
      <rect x="62" y="28" width="6" height="6" fill="#000"/>
      {/* Body with ragged cloak */}
      <path d="M28 56 L60 50 L92 56 L100 90 L90 100 L96 140 L80 188 L40 188 L24 140 L30 100 L20 90 Z"/>
      {/* Bone necklace */}
      <ellipse cx="60" cy="68" rx="14" ry="3" fill="#000"/>
      {/* Curved staff with bones */}
      <path d="M100 40 C108 50 108 130 100 140 L96 138 C102 130 102 50 96 42 Z"/>
      <circle cx="100" cy="38" r="4"/>
      <circle cx="100" cy="142" r="3"/>
    </g>
  </svg>
);

Object.assign(window, {
  Ornament, Crown, Swords, Shield, Skull, Flame, Tower, Banner, Bolt,
  KnightSilhouette, MechanicianSilhouette, PikemanSilhouette, ArcherSilhouette,
  AtalantaSilhouette, MagicianSilhouette, PriestessSilhouette, ShamanSilhouette,
});