// hand-icons.jsx — user's hand-drawn doodle icon set, inlined as React
// components so they inherit `color` (recolour to accent / ink). viewBox 128.

function HandIcon({ size = 32, color = 'currentColor', strokeWidth, title, children, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" role="img" aria-label={title}
      style={{ display: 'block', color, overflow: 'visible', ...style }}>
      <g stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"
        filter="url(#rough-pen-icon)">
        {children}
      </g>
    </svg>
  );
}

const IconTemple = (p) => (
  <HandIcon title="temple" {...p}>
    {/* finial */}
    <path d="M64 33 L64 24" strokeWidth="3.4" />
    <path d="M60 26 Q64 21 68 26" strokeWidth="3" />
    {/* six tiered roofs (meru), wide at base → narrow at top */}
    <path d="M30 92 L64 78 L98 92" strokeWidth="4.2" />
    <path d="M30 92 Q64 96 98 92" strokeWidth="4.2" />
    <path d="M35 80 L64 67 L93 80" strokeWidth="4" />
    <path d="M35 80 Q64 84 93 80" strokeWidth="4" />
    <path d="M39 69 L64 57 L89 69" strokeWidth="3.8" />
    <path d="M39 69 Q64 73 89 69" strokeWidth="3.8" />
    <path d="M43 59 L64 48 L85 59" strokeWidth="3.6" />
    <path d="M43 59 Q64 63 85 59" strokeWidth="3.6" />
    <path d="M47 50 L64 40 L81 50" strokeWidth="3.4" />
    <path d="M47 50 Q64 54 81 50" strokeWidth="3.4" />
    <path d="M51 42 L64 33 L77 42" strokeWidth="3.2" />
    <path d="M51 42 Q64 46 77 42" strokeWidth="3.2" />
    {/* body / gate under the meru */}
    <path d="M49 104 L49 92 M79 104 L79 92" strokeWidth="4" />
    <path d="M58 104 L58 96 Q64 92 70 96 L70 104" strokeWidth="3.4" />
    {/* stepped base */}
    <path d="M40 104 L88 104" strokeWidth="4.2" />
    <path d="M34 104 L31 112 M94 104 L97 112" strokeWidth="3.4" />
    <path d="M31 112 L97 112" strokeWidth="4.2" />
    <path d="M20 116 Q44 113 64 116" strokeWidth="2.6" opacity="0.6" />
    <path d="M70 116 Q92 113 108 116" strokeWidth="2.6" opacity="0.6" />
    {/* two small side shrines */}
    <path d="M25 104 L25 92" strokeWidth="3.2" />
    <path d="M20 92 L25 85 L30 92" strokeWidth="3" />
    <path d="M20 92 Q25 95 30 92" strokeWidth="3" />
    <path d="M103 104 L103 92" strokeWidth="3.2" />
    <path d="M98 92 L103 85 L108 92" strokeWidth="3" />
    <path d="M98 92 Q103 95 108 92" strokeWidth="3" />
  </HandIcon>
);

const IconOffering = (p) => (
  <HandIcon title="canang sari offering" {...p}>
    <path d="M34 88 C44 93 84 93 96 88" strokeWidth="5" />
    <path d="M37 67 L91 67" strokeWidth="4.5" />
    <path d="M32 89 L39 67" strokeWidth="4.5" />
    <path d="M97 88 L91 67" strokeWidth="4.5" />
    <path d="M37 80 C51 83 78 83 93 80" strokeWidth="3.2" />
    <path d="M39 73 C52 76 77 76 90 73" strokeWidth="2.8" opacity=".65" />
    <path d="M44 89 L44 68" strokeWidth="2.5" opacity=".7" />
    <path d="M56 91 L55 67" strokeWidth="2.5" opacity=".7" />
    <path d="M70 91 L71 67" strokeWidth="2.5" opacity=".7" />
    <path d="M84 90 L84 68" strokeWidth="2.5" opacity=".7" />
    <path d="M40 66 C46 54 55 46 64 44 C76 42 88 50 93 66" strokeWidth="4" />
    <path d="M42 63 C35 48 40 38 50 29 C52 46 55 55 61 64" strokeWidth="4" />
    <path d="M58 62 C56 45 59 31 66 18 C73 36 73 50 69 64" strokeWidth="4" />
    <path d="M72 64 C77 49 87 39 99 33 C96 50 90 60 80 66" strokeWidth="4" />
    <path d="M49 61 C54 57 59 56 64 57" strokeWidth="2.5" opacity=".55" />
    <circle cx="52" cy="74" r="1.8" fill="currentColor" stroke="none" />
    <circle cx="64" cy="78" r="1.8" fill="currentColor" stroke="none" />
    <circle cx="78" cy="73" r="1.8" fill="currentColor" stroke="none" />
    <circle cx="88" cy="84" r="1.6" fill="currentColor" stroke="none" />
  </HandIcon>
);

const IconIncense = (p) => (
  <HandIcon title="incense" {...p}>
    <path d="M35 95 C43 105 84 105 93 95" strokeWidth="5" />
    <path d="M34 93 C47 88 80 88 94 93" strokeWidth="5" />
    <path d="M43 102 C51 110 76 111 85 102" strokeWidth="2.5" opacity=".45" />
    <path d="M56 89 L78 42" strokeWidth="5" />
    <path d="M76 42 C72 32 82 29 78 18" strokeWidth="3.8" />
    <path d="M86 42 C94 33 89 28 91 20" strokeWidth="3.2" />
    <path d="M67 42 C61 33 66 28 63 21" strokeWidth="3.2" />
    <path d="M24 106 C34 104 45 105 54 106" strokeWidth="3" opacity=".65" />
    <path d="M78 106 C87 104 96 105 106 106" strokeWidth="3" opacity=".65" />
  </HandIcon>
);

const IconBasket = (p) => (
  <HandIcon title="woven basket" {...p}>
    <path d="M35 53 C36 32 50 20 64 20 C81 20 94 34 94 54" strokeWidth="4.7" />
    <path d="M31 54 C43 49 84 49 97 54" strokeWidth="5" />
    <path d="M35 57 C35 76 40 96 49 105 C58 110 78 110 88 104 C94 95 98 73 95 57" strokeWidth="5" />
    <path d="M43 64 C56 67 76 67 89 64" strokeWidth="2.8" opacity=".8" />
    <path d="M40 78 C54 82 77 82 92 78" strokeWidth="2.8" opacity=".8" />
    <path d="M44 93 C57 96 76 96 86 93" strokeWidth="2.8" opacity=".8" />
    <path d="M48 56 L49 105" strokeWidth="2.7" opacity=".75" />
    <path d="M61 53 L60 109" strokeWidth="2.7" opacity=".75" />
    <path d="M75 53 L76 109" strokeWidth="2.7" opacity=".75" />
    <path d="M88 56 L86 104" strokeWidth="2.7" opacity=".75" />
    <path d="M39 68 C50 63 77 90 91 86" strokeWidth="2.3" opacity=".45" />
    <path d="M89 68 C77 63 51 90 39 86" strokeWidth="2.3" opacity=".45" />
  </HandIcon>
);

const IconFlower = (p) => (
  <HandIcon title="flower" {...p}>
    <path d="M64 65 C58 43 42 31 30 40 C18 49 27 67 52 69" strokeWidth="5" />
    <path d="M64 64 C73 42 92 34 101 47 C109 60 91 72 68 68" strokeWidth="5" />
    <path d="M62 67 C44 73 31 90 42 101 C53 111 69 94 66 71" strokeWidth="5" />
    <path d="M67 68 C87 73 103 87 94 100 C85 113 68 96 67 71" strokeWidth="5" />
    <path d="M65 63 C64 43 74 27 88 30 C102 34 96 55 69 66" strokeWidth="5" />
    <path d="M63 72 C59 87 55 101 48 111" strokeWidth="4" />
    <path d="M61 65 C57 61 60 55 65 55 C71 55 74 62 70 67 C68 70 63 70 61 65 Z" strokeWidth="3.5" />
    <path d="M63 64 C54 59 45 54 37 48" strokeWidth="2" opacity=".45" />
    <path d="M66 65 C76 58 84 53 94 50" strokeWidth="2" opacity=".45" />
    <path d="M64 70 C59 80 53 88 47 96" strokeWidth="2" opacity=".45" />
  </HandIcon>
);

const IconSun = (p) => (
  <HandIcon title="sun" {...p}>
    <path d="M64 43 C76 42 85 52 85 64 C86 77 76 86 64 86 C51 86 42 77 42 64 C42 52 52 43 64 43 Z" strokeWidth="5" />
    <path d="M64 16 L64 29" strokeWidth="5" />
    <path d="M64 99 L64 112" strokeWidth="5" />
    <path d="M16 64 L29 64" strokeWidth="5" />
    <path d="M99 64 L112 64" strokeWidth="5" />
    <path d="M30 30 L39 39" strokeWidth="4.5" />
    <path d="M89 89 L98 98" strokeWidth="4.5" />
    <path d="M98 30 L89 39" strokeWidth="4.5" />
    <path d="M39 89 L30 98" strokeWidth="4.5" />
    <path d="M48 53 C54 47 70 46 78 56" strokeWidth="2" opacity=".45" />
  </HandIcon>
);

const IconHeart = (p) => (
  <HandIcon title="heart" {...p}>
    <path d="M64 106 C49 87 28 72 25 50 C23 34 37 25 50 34 C58 39 62 49 64 55 C68 47 76 35 89 32 C103 29 113 41 110 57 C106 76 84 91 64 106 Z" strokeWidth="5.5" />
    <path d="M61 103 C47 86 30 70 29 51 C28 39 38 31 49 37 C56 41 60 51 63 58" strokeWidth="2.4" opacity=".55" />
    <path d="M71 43 C78 34 89 32 97 38" strokeWidth="2.4" opacity=".45" />
  </HandIcon>
);

const IconSmiley = (p) => (
  <HandIcon title="smiley" {...p}>
    <path d="M64 21 C88 20 105 38 106 62 C108 87 89 106 64 106 C39 106 21 88 21 64 C20 39 38 22 64 21 Z" strokeWidth="5.2" />
    <path d="M52 52 C52 57 52 58 52 61" strokeWidth="5.2" />
    <path d="M77 52 C78 56 78 58 77 61" strokeWidth="5.2" />
    <path d="M44 75 C52 87 75 91 86 75" strokeWidth="4.6" />
    <path d="M29 56 C32 37 47 28 65 27" strokeWidth="2.2" opacity=".45" />
  </HandIcon>
);

const IconSparkleDiamond = (p) => (
  <HandIcon title="sparkle" {...p}>
    <path d="M64 18 C69 43 84 58 110 64 C84 70 69 85 64 110 C59 85 44 70 18 64 C44 58 59 43 64 18 Z" strokeWidth="5" />
    <path d="M64 31 C68 47 79 59 96 64 C78 69 68 81 64 98 C60 81 50 69 32 64 C50 59 60 47 64 31 Z" strokeWidth="2.4" opacity=".5" />
  </HandIcon>
);

const IconSparkleCross = (p) => (
  <HandIcon title="sparkle" {...p}>
    <path d="M64 24 L64 44" strokeWidth="5.2" />
    <path d="M64 84 L64 104" strokeWidth="5.2" />
    <path d="M24 64 L44 64" strokeWidth="5.2" />
    <path d="M84 64 L104 64" strokeWidth="5.2" />
    <path d="M64 59 L64 69" strokeWidth="2.6" opacity=".45" />
    <path d="M59 64 L69 64" strokeWidth="2.6" opacity=".45" />
  </HandIcon>
);

const IconSteam = (p) => (
  <HandIcon title="steam" {...p}>
    <path d="M48 101 C34 89 37 73 51 62 C64 52 67 38 60 23" strokeWidth="5" />
    <path d="M67 104 C51 87 68 75 78 64 C92 50 84 33 78 21" strokeWidth="5" />
    <path d="M84 99 C99 84 90 70 75 59" strokeWidth="5" />
    <path d="M43 112 C47 111 51 112 55 114" strokeWidth="4" />
    <path d="M62 115 C67 113 72 114 76 117" strokeWidth="4" />
    <path d="M82 112 C86 110 90 111 93 114" strokeWidth="4" />
    <path d="M55 68 C67 57 71 44 66 31" strokeWidth="2.2" opacity=".45" />
    <path d="M76 70 C86 56 84 43 81 33" strokeWidth="2.2" opacity=".45" />
  </HandIcon>
);

const IconArrowCurve = (p) => (
  <HandIcon title="arrow" {...p}>
    <path d="M18 86 C36 62 60 50 94 44" strokeWidth="5.5" />
    <path d="M82 31 L106 43 L90 62" strokeWidth="5.5" />
    <path d="M22 82 C41 59 62 52 89 47" strokeWidth="2.4" opacity=".45" />
    <path d="M87 36 L103 43" strokeWidth="2.2" opacity=".45" />
  </HandIcon>
);

const IconArrowDashed = (p) => (
  <HandIcon title="arrow" {...p}>
    <path d="M23 91 C39 67 63 53 93 50" strokeWidth="5.2" strokeDasharray="8 11" />
    <path d="M82 36 L105 49 L88 67" strokeWidth="5.2" />
    <path d="M30 84 C48 64 67 57 90 54" strokeWidth="2.3" strokeDasharray="6 10" opacity=".4" />
  </HandIcon>
);

Object.assign(window, {
  HandIcon,
  IconTemple, IconOffering, IconIncense, IconBasket, IconFlower, IconSun,
  IconHeart, IconSmiley, IconSparkleDiamond, IconSparkleCross, IconSteam,
  IconArrowCurve, IconArrowDashed,
});