/* Stick-figure construction illustrations, SVG, monochrome, animated subtly. */

function StickConstruction({ scale = 1, animate = true }) {
  // A simple house being built by two stick figures. Lines stagger-draw.
  return (
    <svg viewBox="0 0 400 240" style={{ width: "100%", height: "auto", maxWidth: 480 }}
         fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {/* ground */}
      <line x1="0" y1="200" x2="400" y2="200" />
      {/* scaffolding */}
      <g style={animate ? { animation: "draw 2.4s ease forwards", strokeDasharray: 600, strokeDashoffset: 600 } : null}>
        <line x1="60" y1="200" x2="60" y2="80" />
        <line x1="180" y1="200" x2="180" y2="80" />
        <line x1="60" y1="80" x2="180" y2="80" />
        <line x1="60" y1="120" x2="180" y2="120" />
        <line x1="60" y1="160" x2="180" y2="160" />
      </g>
      {/* house frame */}
      <g style={animate ? { animation: "draw 2.6s 0.3s ease forwards", strokeDasharray: 900, strokeDashoffset: 900 } : null}>
        <path d="M210 200 L210 110 L300 70 L390 110 L390 200 Z" />
        <line x1="210" y1="110" x2="390" y2="110" />
        <line x1="300" y1="70" x2="300" y2="110" />
        <rect x="240" y="150" width="30" height="50" />
        <rect x="320" y="140" width="40" height="35" />
      </g>
      {/* worker 1, left */}
      <g style={animate ? { animation: "bobble 2.4s ease-in-out infinite" } : null}>
        <circle cx="90" cy="160" r="6" />
        <line x1="90" y1="166" x2="90" y2="184" />
        <line x1="90" y1="172" x2="78" y2="180" />
        <line x1="90" y1="172" x2="106" y2="168" />
        <line x1="90" y1="184" x2="82" y2="200" />
        <line x1="90" y1="184" x2="98" y2="200" />
        {/* hammer */}
        <line x1="106" y1="168" x2="118" y2="158" />
        <rect x="116" y="154" width="8" height="6" />
      </g>
      {/* worker 2, right (carrying plank) */}
      <g style={animate ? { animation: "bobble 2.6s 0.4s ease-in-out infinite" } : null}>
        <circle cx="340" cy="184" r="6" transform="translate(-100,0)" />
        <line x1="240" y1="190" x2="240" y2="208"/>
        <line x1="240" y1="195" x2="230" y2="190"/>
        <line x1="240" y1="195" x2="250" y2="190"/>
        <line x1="240" y1="208" x2="234" y2="220"/>
        <line x1="240" y1="208" x2="246" y2="220"/>
        <line x1="220" y1="190" x2="260" y2="190" />
      </g>
      {/* crane arm */}
      <g style={animate ? { animation: "swing 5s ease-in-out infinite" } : null} style={{ transformOrigin: "20px 30px" }}>
        <line x1="20" y1="30" x2="20" y2="200" />
        <line x1="20" y1="30" x2="160" y2="30" />
        <line x1="120" y1="30" x2="120" y2="56" />
        <rect x="112" y="56" width="16" height="12" />
      </g>
      {/* sun */}
      <circle cx="360" cy="36" r="10" />
      <line x1="360" y1="14" x2="360" y2="6"/>
      <line x1="382" y1="36" x2="390" y2="36"/>
      <line x1="376" y1="22" x2="382" y2="16"/>

      <style>{`
        @keyframes draw { to { stroke-dashoffset: 0; } }
        @keyframes bobble { 50% { transform: translateY(-2px); } }
        @keyframes swing { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
      `}</style>
    </svg>
  );
}

function StickBlueprint() {
  return (
    <svg viewBox="0 0 320 220" style={{ width: "100%", height: "auto" }}
         fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round">
      <rect x="20" y="20" width="280" height="180" strokeDasharray="3 4"/>
      {/* floor plan */}
      <path d="M50 60 L260 60 L260 180 L50 180 Z"/>
      <line x1="50" y1="120" x2="260" y2="120"/>
      <line x1="160" y1="60" x2="160" y2="180"/>
      <line x1="200" y1="120" x2="200" y2="180"/>
      {/* doors / windows */}
      <path d="M85 60 a 12 12 0 0 1 24 0" />
      <path d="M210 120 a 12 12 0 0 0 24 0" />
      {/* dimension lines */}
      <line x1="50" y1="40" x2="260" y2="40"/>
      <line x1="50" y1="35" x2="50" y2="45"/>
      <line x1="260" y1="35" x2="260" y2="45"/>
      <text x="148" y="36" fontSize="9" fill="currentColor" stroke="none">18.4 m</text>
    </svg>
  );
}

function StickHandshake() {
  return (
    <svg viewBox="0 0 320 200" style={{ width: "100%", height: "auto" }}
         fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {/* Two stick figures shaking hands across the funding gap */}
      <line x1="0" y1="170" x2="320" y2="170"/>
      <circle cx="70" cy="80" r="10"/>
      <line x1="70" y1="90" x2="70" y2="130"/>
      <line x1="70" y1="100" x2="50" y2="115"/>
      <line x1="70" y1="105" x2="135" y2="115"/>
      <line x1="70" y1="130" x2="56" y2="170"/>
      <line x1="70" y1="130" x2="84" y2="170"/>

      <circle cx="250" cy="80" r="10"/>
      <line x1="250" y1="90" x2="250" y2="130"/>
      <line x1="250" y1="100" x2="270" y2="115"/>
      <line x1="250" y1="105" x2="185" y2="115"/>
      <line x1="250" y1="130" x2="236" y2="170"/>
      <line x1="250" y1="130" x2="264" y2="170"/>

      {/* handshake bubble */}
      <circle cx="160" cy="115" r="14" strokeDasharray="2 3"/>
      <path d="M150 115 L170 115 M158 110 L162 120"/>
      {/* labels */}
      <text x="44" y="60" fontSize="10" fill="currentColor" stroke="none">Developer</text>
      <text x="222" y="60" fontSize="10" fill="currentColor" stroke="none">Capital</text>
    </svg>
  );
}

Object.assign(window, { StickConstruction, StickBlueprint, StickHandshake });