// Hand-drawn service illustrations for wf3
// Each illustration communicates the service at a glance.

const ServiceIllustration = ({ type }) => {
  const stroke = "#1a1a1a";
  const sw = 2.2;

  // Shared skin/hair palette
  const skin = "#ffd5cb";
  const hair = "#2a2118";

  // ---------------------------------------------------------------
  // FDE — "社内参画型": a client person + an FDE engineer working
  // side-by-side at one laptop. The shared laptop = embedded delivery.
  // ---------------------------------------------------------------
  if (type === "fde") {
    return (
      <svg viewBox="0 0 200 140" style={{ width: "100%", height: 130 }}>
        {/* desk surface */}
        <path d="M 15,108 L 185,108 L 180,118 L 20,118 Z"
              fill="#e8d4b8" stroke={stroke} strokeWidth={sw}/>

        {/* shared laptop in the middle */}
        <g transform="translate(100,90)">
          {/* screen */}
          <path d="M -30,-30 L 30,-30 L 30,0 L -30,0 Z"
                fill="#1a1a1a" stroke={stroke} strokeWidth={sw}/>
          {/* code on screen */}
          <path d="M -24,-24 l 10,0 M -24,-19 l 16,0 M -24,-14 l 7,0 M -24,-9 l 14,0 M -24,-4 l 10,0"
                stroke="#86f3c8" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
          <path d="M -4,-24 l 6,0 M -4,-19 l 12,0 M -4,-14 l 8,0 M -4,-9 l 14,0 M -4,-4 l 6,0"
                stroke="#ffd84a" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
          {/* keyboard base */}
          <path d="M -36,0 L 36,0 L 32,8 L -32,8 Z"
                fill="#fff" stroke={stroke} strokeWidth={sw}/>
          <path d="M -30,4 L 30,4" stroke={stroke} strokeWidth="1"/>
        </g>

        {/* LEFT person — client (suit, tie) */}
        <g transform="translate(45,72)">
          {/* body */}
          <path d="M -14,28 Q -14,10 0,10 Q 14,10 14,28 L 14,38 L -14,38 Z"
                fill="#c8e6ff" stroke={stroke} strokeWidth={sw}/>
          {/* tie */}
          <path d="M -3,10 L 0,14 L 3,10 L 2,28 L 0,32 L -2,28 Z"
                fill="#ff5c3a" stroke={stroke} strokeWidth="1.4"/>
          {/* arm reaching to laptop */}
          <path d="M 10,18 Q 26,22 34,26"
                stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round"/>
          {/* hand */}
          <circle cx="36" cy="27" r="3.5" fill={skin} stroke={stroke} strokeWidth="1.5"/>
          {/* head */}
          <circle cx="0" cy="0" r="10" fill={skin} stroke={stroke} strokeWidth={sw}/>
          {/* hair (tidy side part) */}
          <path d="M -9,-3 Q -8,-11 2,-10 Q 10,-10 9,-2 L 9,-5 Q 4,-7 -2,-5 Q -7,-3 -9,-3 Z"
                fill={hair} stroke={stroke} strokeWidth="1.4"/>
          {/* face */}
          <circle cx="-3" cy="1" r="1" fill={stroke}/>
          <circle cx="4" cy="1" r="1" fill={stroke}/>
          <path d="M -2,5 Q 0,6 3,5" stroke={stroke} strokeWidth="1.2" fill="none"/>
        </g>

        {/* RIGHT person — FDE engineer (hoodie) */}
        <g transform="translate(155,72)">
          {/* body */}
          <path d="M -14,28 Q -14,10 0,10 Q 14,10 14,28 L 14,38 L -14,38 Z"
                fill="#ffd84a" stroke={stroke} strokeWidth={sw}/>
          {/* hoodie strings */}
          <path d="M -3,12 L -3,20 M 3,12 L 3,20"
                stroke={stroke} strokeWidth="1.4" fill="none"/>
          {/* arm reaching to laptop */}
          <path d="M -10,18 Q -26,22 -34,26"
                stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round"/>
          <circle cx="-36" cy="27" r="3.5" fill={skin} stroke={stroke} strokeWidth="1.5"/>
          {/* head */}
          <circle cx="0" cy="0" r="10" fill={skin} stroke={stroke} strokeWidth={sw}/>
          {/* hair (messy) */}
          <path d="M -10,-2 Q -11,-11 -2,-12 Q 6,-13 10,-6 Q 11,-1 10,-2 Q 6,-6 2,-5 Q -3,-4 -6,-6 Q -9,-5 -10,-2 Z"
                fill={hair} stroke={stroke} strokeWidth="1.4"/>
          {/* glasses */}
          <circle cx="-3" cy="1" r="2.5" fill="none" stroke={stroke} strokeWidth="1.3"/>
          <circle cx="4" cy="1" r="2.5" fill="none" stroke={stroke} strokeWidth="1.3"/>
          <path d="M -0.5,1 L 1.5,1" stroke={stroke} strokeWidth="1.2"/>
          {/* smile */}
          <path d="M -2,5 Q 1,7 4,5" stroke={stroke} strokeWidth="1.2" fill="none"/>
        </g>

        {/* collab: speech overlap between them */}
        <g transform="translate(100,32)">
          <path d="M -22,-12 Q -22,-22 -12,-22 L 12,-22 Q 22,-22 22,-12 L 22,-4 Q 22,6 12,6 L 4,6 L 0,12 L -2,6 L -12,6 Q -22,6 -22,-4 Z"
                fill="#fff" stroke={stroke} strokeWidth={sw}/>
          {/* handshake icon inside */}
          <g transform="translate(0,-8)">
            <path d="M -10,0 L -3,-4 L 3,4 L 10,0"
                  stroke={stroke} strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <circle cx="-10" cy="0" r="2" fill="#ff5c3a" stroke={stroke} strokeWidth="1.2"/>
            <circle cx="10" cy="0" r="2" fill="#3b6cff" stroke={stroke} strokeWidth="1.2"/>
          </g>
        </g>

        {/* sparkle */}
        <path d="M 20,25 l0,5 M 17.5,27.5 l5,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
        <path d="M 180,30 l0,4 M 178,32 l4,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
      </svg>
    );
  }

  // ---------------------------------------------------------------
  // RPA — paper stack → robot → checked output.
  // Linear flow makes "automation" instantly readable.
  // ---------------------------------------------------------------
  if (type === "rpa") {
    return (
      <svg viewBox="0 0 200 140" style={{ width: "100%", height: 130 }}>
        {/* LEFT: messy stack of documents */}
        <g transform="translate(28,80)">
          <rect x="-16" y="-20" width="30" height="38" fill="#fff"
                stroke={stroke} strokeWidth={sw} transform="rotate(-10)"/>
          <rect x="-12" y="-26" width="30" height="38" fill="#fff"
                stroke={stroke} strokeWidth={sw} transform="rotate(4)"/>
          <rect x="-14" y="-32" width="30" height="38" fill="#fff"
                stroke={stroke} strokeWidth={sw}/>
          {/* lines on top doc */}
          <path d="M -9,-26 l 20,0 M -9,-21 l 16,0 M -9,-16 l 20,0 M -9,-11 l 14,0 M -9,-6 l 20,0"
                stroke={stroke} strokeWidth="1.2"/>
          {/* messy scribble */}
          <path d="M -8,-3 q 4,-2 8,0 t 8,0" stroke="#ff5c3a" strokeWidth="1.4" fill="none"/>
          {/* label */}
          <text x="0" y="32" fontFamily="Caveat" fontSize="13" textAnchor="middle" fontWeight="700" fill={stroke}>手作業</text>
        </g>

        {/* ARROW in */}
        <g stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round">
          <path d="M 54,60 L 76,60"/>
          <path d="M 72,56 L 76,60 L 72,64"/>
        </g>

        {/* CENTER: robot with gear head (the RPA engine) */}
        <g transform="translate(100,62)">
          {/* shadow */}
          <ellipse cx="0" cy="44" rx="26" ry="4" fill={stroke} opacity=".15"/>
          {/* body */}
          <rect x="-22" y="-4" width="44" height="36" rx="6"
                fill="#c8e6ff" stroke={stroke} strokeWidth={sw}/>
          {/* belt + screen */}
          <rect x="-14" y="4" width="28" height="14" rx="2"
                fill="#fff" stroke={stroke} strokeWidth={sw}/>
          <path d="M -10,11 L -2,7 L 2,13 L 10,9"
                stroke="#2fbf71" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          {/* arms */}
          <path d="M -22,8 L -32,16 L -30,22"
                stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round"/>
          <path d="M 22,8 L 32,16 L 30,22"
                stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round"/>
          <circle cx="-30" cy="22" r="3" fill="#ff5c3a" stroke={stroke} strokeWidth="1.4"/>
          <circle cx="30" cy="22" r="3" fill="#ff5c3a" stroke={stroke} strokeWidth="1.4"/>
          {/* legs */}
          <rect x="-14" y="32" width="8" height="8" fill="#c8e6ff" stroke={stroke} strokeWidth={sw}/>
          <rect x="6" y="32" width="8" height="8" fill="#c8e6ff" stroke={stroke} strokeWidth={sw}/>
          {/* neck */}
          <rect x="-3" y="-10" width="6" height="8" fill={stroke}/>
          {/* gear head */}
          <g transform="translate(0,-22)">
            {Array.from({length:8}).map((_,i)=>{
              const a = (i/8)*Math.PI*2;
              return <rect key={i} x="-3" y="-16" width="6" height="6"
                           fill="#ffd84a" stroke={stroke} strokeWidth="1.6"
                           transform={`rotate(${a*180/Math.PI})`}/>;
            })}
            <circle r="11" fill="#ffd84a" stroke={stroke} strokeWidth={sw}/>
            {/* eyes */}
            <circle cx="-4" cy="-1" r="1.6" fill={stroke}/>
            <circle cx="4" cy="-1" r="1.6" fill={stroke}/>
            {/* antenna */}
            <line x1="0" y1="-16" x2="0" y2="-22" stroke={stroke} strokeWidth="1.6"/>
            <circle cx="0" cy="-24" r="2" fill="#ff5c3a" stroke={stroke} strokeWidth="1.2"/>
          </g>
        </g>

        {/* ARROW out */}
        <g stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round">
          <path d="M 138,60 L 160,60"/>
          <path d="M 156,56 L 160,60 L 156,64"/>
        </g>

        {/* RIGHT: tidy output with checkmark */}
        <g transform="translate(176,80)">
          <rect x="-14" y="-32" width="28" height="38" fill="#d8f5c2"
                stroke={stroke} strokeWidth={sw}/>
          <path d="M -9,-25 l 18,0 M -9,-19 l 14,0 M -9,-13 l 18,0"
                stroke={stroke} strokeWidth="1.2"/>
          {/* big check */}
          <path d="M -8,-4 L -2,3 L 10,-12"
                stroke="#2fbf71" strokeWidth="3" fill="none"
                strokeLinecap="round" strokeLinejoin="round"/>
          <text x="0" y="24" fontFamily="Caveat" fontSize="13" textAnchor="middle" fontWeight="700" fill={stroke}>自動完了</text>
        </g>

        {/* sparkles around the robot */}
        <path d="M 60,25 l0,5 M 57.5,27.5 l5,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
        <path d="M 145,25 l0,5 M 142.5,27.5 l5,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
      </svg>
    );
  }

  // ---------------------------------------------------------------
  // AI — brain-chip with data pouring in, decisions coming out.
  // ---------------------------------------------------------------
  if (type === "ai") {
    return (
      <svg viewBox="0 0 200 140" style={{ width: "100%", height: 130 }}>
        {/* data streams flowing IN from the left */}
        <g>
          {/* little data cards */}
          <g transform="translate(18,40)">
            <rect x="-8" y="-6" width="18" height="12" fill="#fff" stroke={stroke} strokeWidth="1.6"/>
            <path d="M -5,-2 l 12,0 M -5,2 l 8,0" stroke={stroke} strokeWidth="1"/>
          </g>
          <g transform="translate(22,70)">
            <rect x="-8" y="-6" width="18" height="12" fill="#fff" stroke={stroke} strokeWidth="1.6"/>
            <path d="M -5,-2 l 12,0 M -5,2 l 10,0" stroke={stroke} strokeWidth="1"/>
          </g>
          <g transform="translate(18,100)">
            <rect x="-8" y="-6" width="18" height="12" fill="#fff" stroke={stroke} strokeWidth="1.6"/>
            <path d="M -5,-2 l 12,0 M -5,2 l 7,0" stroke={stroke} strokeWidth="1"/>
          </g>
          {/* arrows to the chip */}
          <g stroke={stroke} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeDasharray="2 2">
            <path d="M 30,40 L 72,55"/>
            <path d="M 34,70 L 72,70"/>
            <path d="M 30,100 L 72,84"/>
          </g>
        </g>

        {/* CENTER: AI brain chip */}
        <g transform="translate(105,68)">
          {/* chip frame */}
          <rect x="-32" y="-26" width="64" height="52" rx="8"
                fill="#e4ccff" stroke={stroke} strokeWidth={sw}/>
          {/* chip pins */}
          {[-16,0,16].map((y,i)=>(
            <g key={i}>
              <path d={`M -32,${y} l -6,0`} stroke={stroke} strokeWidth="1.6"/>
              <path d={`M 32,${y} l 6,0`} stroke={stroke} strokeWidth="1.6"/>
            </g>
          ))}
          {[-16,0,16].map((x,i)=>(
            <g key={i}>
              <path d={`M ${x},-26 l 0,-6`} stroke={stroke} strokeWidth="1.6"/>
              <path d={`M ${x},26 l 0,6`} stroke={stroke} strokeWidth="1.6"/>
            </g>
          ))}
          {/* brain inside */}
          <g>
            {/* two hemispheres outline */}
            <path d="M -2,-16 Q -20,-16 -22,-4 Q -26,2 -22,10 Q -20,20 -4,18 L -4,-14 Z"
                  fill="#ffd5cb" stroke={stroke} strokeWidth={sw}/>
            <path d="M 2,-16 Q 20,-16 22,-4 Q 26,2 22,10 Q 20,20 4,18 L 4,-14 Z"
                  fill="#ffd5cb" stroke={stroke} strokeWidth={sw}/>
            {/* center gap */}
            <path d="M 0,-16 L 0,18" stroke={stroke} strokeWidth="1.4"/>
            {/* folds */}
            <path d="M -18,-6 Q -12,-4 -8,-8 M -20,4 Q -14,6 -8,2 M -16,12 Q -10,14 -6,10"
                  stroke={stroke} strokeWidth="1.3" fill="none"/>
            <path d="M 18,-6 Q 12,-4 8,-8 M 20,4 Q 14,6 8,2 M 16,12 Q 10,14 6,10"
                  stroke={stroke} strokeWidth="1.3" fill="none"/>
            {/* letters AI */}
            <text x="-12" y="5" fontFamily="Caveat" fontSize="12" fontWeight="700" textAnchor="middle" fill={stroke}>A</text>
            <text x="12" y="5" fontFamily="Caveat" fontSize="12" fontWeight="700" textAnchor="middle" fill={stroke}>I</text>
          </g>
        </g>

        {/* RIGHT: decision outputs */}
        <g>
          <g stroke={stroke} strokeWidth="1.6" fill="none" strokeLinecap="round">
            <path d="M 144,55 L 166,40"/>
            <path d="M 163,39 L 166,40 L 165,43"/>
            <path d="M 144,70 L 170,70"/>
            <path d="M 167,67 L 170,70 L 167,73"/>
            <path d="M 144,84 L 166,100"/>
            <path d="M 163,97 L 166,100 L 165,97"/>
          </g>
          {/* checkmark bubble */}
          <g transform="translate(180,40)">
            <circle r="9" fill="#d8f5c2" stroke={stroke} strokeWidth={sw}/>
            <path d="M -4,0 L -1,3 L 4,-3"
                  stroke="#2fbf71" strokeWidth="2" fill="none"
                  strokeLinecap="round" strokeLinejoin="round"/>
          </g>
          {/* chart bubble */}
          <g transform="translate(184,70)">
            <circle r="9" fill="#ffd84a" stroke={stroke} strokeWidth={sw}/>
            <path d="M -5,3 L -5,-2 M -1,3 L -1,-4 M 3,3 L 3,0"
                  stroke={stroke} strokeWidth="1.6" strokeLinecap="round"/>
          </g>
          {/* lightbulb bubble */}
          <g transform="translate(180,100)">
            <circle r="9" fill="#ffd5cb" stroke={stroke} strokeWidth={sw}/>
            <path d="M 0,-4 Q -4,-4 -4,-1 Q -4,2 -2,3 L -2,5 L 2,5 L 2,3 Q 4,2 4,-1 Q 4,-4 0,-4 Z"
                  fill="#fff" stroke={stroke} strokeWidth="1.4"/>
          </g>
        </g>

        {/* sparkles */}
        <path d="M 102,22 l0,6 M 99,25 l6,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
        <path d="M 70,30 l0,4 M 68,32 l4,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
      </svg>
    );
  }

  // ---------------------------------------------------------------
  // CONSULT — consultant pointing at a whiteboard/chart.
  // ---------------------------------------------------------------
  if (type === "consult") {
    return (
      <svg viewBox="0 0 200 140" style={{ width: "100%", height: 130 }}>
        {/* whiteboard */}
        <g transform="translate(110,68)">
          {/* board */}
          <rect x="-50" y="-42" width="100" height="72" rx="3"
                fill="#fff" stroke={stroke} strokeWidth={sw}/>
          {/* frame */}
          <rect x="-54" y="-46" width="108" height="80" rx="4"
                fill="none" stroke={stroke} strokeWidth="1.2"/>
          {/* legs */}
          <path d="M -30,34 L -36,56 M 30,34 L 36,56"
                stroke={stroke} strokeWidth={sw} strokeLinecap="round"/>

          {/* chart on board: rising bars + trendline */}
          <g>
            {/* axes */}
            <path d="M -38,22 L 38,22 M -38,22 L -38,-30"
                  stroke={stroke} strokeWidth="1.4" fill="none"/>
            {/* bars */}
            <rect x="-32" y="6"  width="10" height="16" fill="#ffd5cb" stroke={stroke} strokeWidth="1.4"/>
            <rect x="-18" y="-4" width="10" height="26" fill="#c8e6ff" stroke={stroke} strokeWidth="1.4"/>
            <rect x="-4"  y="-14" width="10" height="36" fill="#d8f5c2" stroke={stroke} strokeWidth="1.4"/>
            <rect x="10"  y="-22" width="10" height="44" fill="#ffd84a" stroke={stroke} strokeWidth="1.4"/>
            {/* trend arrow */}
            <path d="M -30,14 Q -10,2 10,-14 L 24,-26"
                  stroke="#ff5c3a" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
            <path d="M 20,-24 L 24,-26 L 24,-22"
                  stroke="#ff5c3a" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            {/* star at peak */}
            <path d="M 24,-30 l 1.5,3 l 3,0.5 l -2.2,2 l 0.6,3 l -2.9,-1.5 l -2.9,1.5 l 0.6,-3 l -2.2,-2 l 3,-0.5 Z"
                  fill="#ffd84a" stroke={stroke} strokeWidth="1.3"/>
          </g>
        </g>

        {/* consultant on the left, pointing */}
        <g transform="translate(40,78)">
          {/* body/suit */}
          <path d="M -14,30 Q -14,10 0,10 Q 14,10 14,30 L 14,42 L -14,42 Z"
                fill="#3b6cff" stroke={stroke} strokeWidth={sw}/>
          {/* shirt collar + tie */}
          <path d="M -4,10 L 0,16 L 4,10" stroke={stroke} strokeWidth="1.4" fill="#fff"/>
          <path d="M -2,16 L 2,16 L 3,28 L 0,32 L -3,28 Z"
                fill="#ff5c3a" stroke={stroke} strokeWidth="1.3"/>
          {/* pointer arm — extends toward the board with a stick */}
          <path d="M 12,16 Q 28,8 40,6"
                stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round"/>
          {/* hand */}
          <circle cx="40" cy="6" r="3.5" fill={skin} stroke={stroke} strokeWidth="1.4"/>
          {/* pointer stick */}
          <path d="M 40,6 L 64,-10"
                stroke={stroke} strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          <circle cx="64" cy="-10" r="2.2" fill="#ff5c3a" stroke={stroke} strokeWidth="1.2"/>
          {/* other arm holding clipboard */}
          <path d="M -12,18 Q -22,22 -22,30"
                stroke={stroke} strokeWidth={sw} fill="none" strokeLinecap="round"/>
          {/* clipboard */}
          <g transform="translate(-26,30)">
            <rect x="-7" y="-2" width="14" height="18" fill="#fff" stroke={stroke} strokeWidth="1.6"/>
            <rect x="-4" y="-5" width="8" height="5" fill="#ffd84a" stroke={stroke} strokeWidth="1.4"/>
            <path d="M -4,4 l 8,0 M -4,8 l 6,0 M -4,12 l 8,0" stroke={stroke} strokeWidth="1"/>
          </g>
          {/* head */}
          <circle cx="0" cy="0" r="10" fill={skin} stroke={stroke} strokeWidth={sw}/>
          {/* hair */}
          <path d="M -9,-3 Q -9,-12 0,-12 Q 10,-12 9,-3 Q 9,-6 4,-7 Q -2,-7 -5,-5 Q -8,-4 -9,-3 Z"
                fill={hair} stroke={stroke} strokeWidth="1.4"/>
          {/* face */}
          <circle cx="-3" cy="1" r="1" fill={stroke}/>
          <circle cx="4" cy="1" r="1" fill={stroke}/>
          <path d="M -2,5 Q 1,7 4,5" stroke={stroke} strokeWidth="1.2" fill="none"/>
        </g>

        {/* speech bubble with lightbulb = advice */}
        <g transform="translate(48,22)">
          <path d="M -16,-10 Q -16,-18 -8,-18 L 12,-18 Q 20,-18 20,-10 L 20,-2 Q 20,6 12,6 L 4,6 L 0,12 L -2,6 L -8,6 Q -16,6 -16,-2 Z"
                fill="#fff8ec" stroke={stroke} strokeWidth={sw}/>
          {/* lightbulb */}
          <g transform="translate(2,-6)">
            <circle r="5" fill="#ffd84a" stroke={stroke} strokeWidth="1.4"/>
            <rect x="-2" y="4" width="4" height="2.5" fill="#fff" stroke={stroke} strokeWidth="1.2"/>
            <path d="M -8,-5 l 3,2 M 8,-5 l -3,2 M 0,-10 l 0,3"
                  stroke={stroke} strokeWidth="1.3"/>
          </g>
        </g>

        {/* sparkles */}
        <path d="M 170,30 l0,5 M 167.5,32.5 l5,0" stroke={stroke} strokeWidth="1.5" fill="none"/>
      </svg>
    );
  }

  return null;
};

window.ServiceIllustration = ServiceIllustration;
