// Hand — doodle-style line illustration: palm-up gesture with thumb on the
// left and the four fingers as scribbled overlapping curves on the right.
//
// Props:
//   s — width in px

const BauhausHand = ({ s = 200 }) => (
  <svg width={s} height={s} viewBox="0 0 400 400"
    style={{ display: 'block', overflow: 'visible' }}>
    {/* offset dark-blue sleeve cuff — peeks out behind the wrist */}
    <path d="M55 145 L 130 145 L 130 255 L 55 255 Z"
      fill="#1E3A6B" stroke="none"
      transform="translate(12 12)" />
    {/* offset skin color — peeks out from behind the palm + fingers area */}
    <path d="M 130 150 L 340 175 C 360 195, 360 220, 340 235 L 130 250 Z"
      fill="#F4C9B0" stroke="none"
      transform="translate(12 12)" />

    {/* thumb */}
    <path d="M67 156.22C96.7674 155.065 113.399 153.68 116.895 152.064C120.392 150.448 120.392 179.495 116.895 239.206C90.6391 244.758 74.0072 247.533 67 247.533"
      stroke="currentColor" strokeWidth="16"
      strokeLinecap="round" strokeLinejoin="round" fill="none" />
    {/* palm/wrist line */}
    <path d="M119.518 164.932H145.896C159.889 159.709 173.96 157.847 188.108 159.347C209.329 161.597 211.918 182.059 218.848 183.212C225.777 184.364 258.4 188.59 258.4 199.455C258.4 210.321 221.42 210.321 195.256 210.321"
      stroke="currentColor" strokeWidth="16"
      strokeLinecap="round" strokeLinejoin="round" fill="none" />
    {/* finger scribbles */}
    <path d="M236.727 184.364C229.764 181.286 226.416 179.718 226.683 179.659C264.782 171.238 291.587 171.238 294.551 181.484C295.997 186.481 283.946 189.739 258.399 191.257C298.601 186.541 319.363 185.782 320.683 188.98C322.663 193.776 292.27 204.584 279.734 205.454C267.199 206.325 330.337 194.566 333.703 206.923C337.07 219.28 274.076 232.095 239.329 234.337C204.582 236.579 154.705 223.963 126.801 226.082"
      stroke="currentColor" strokeWidth="16"
      strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

window.BauhausHand = BauhausHand;
