/* Darwin Cientista — Corpo inteiro (3 poses)
   Estilo flat-tech do Avatar2 estendido: phosphor green (#9FEF00), pele em
   gradient, jaleco escuro, óculos HUD, barba aparada. Cada pose usa o mesmo
   "kit" de cabeça + tronco e troca arms/props.

   viewBox 200×520. Pés ~500.
*/

/* ───────── Defs compartilhados ───────── */
const DarwinDefs = () => (
  <defs>
    <radialGradient id="db-bg" cx="50%" cy="30%" r="80%">
      <stop offset="0%" stopColor="#0d2818"/>
      <stop offset="100%" stopColor="#020806"/>
    </radialGradient>
    <linearGradient id="db-skin" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#d4a684"/>
      <stop offset="50%" stopColor="#b08560"/>
      <stop offset="100%" stopColor="#7a5638"/>
    </linearGradient>
    <linearGradient id="db-skin-arm" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stopColor="#b08560"/>
      <stop offset="60%" stopColor="#9a7350"/>
      <stop offset="100%" stopColor="#6b4830"/>
    </linearGradient>
    <linearGradient id="db-coat" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#1f2a1c"/>
      <stop offset="100%" stopColor="#080c08"/>
    </linearGradient>
    <linearGradient id="db-coat-light" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stopColor="#0a120a"/>
      <stop offset="50%" stopColor="#1a2418"/>
      <stop offset="100%" stopColor="#0a120a"/>
    </linearGradient>
    <linearGradient id="db-pants" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#14180f"/>
      <stop offset="100%" stopColor="#050806"/>
    </linearGradient>
    <linearGradient id="db-lens" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stopColor="#9FEF00" stopOpacity="0.3"/>
      <stop offset="100%" stopColor="#9FEF00" stopOpacity="0.05"/>
    </linearGradient>
    <linearGradient id="db-tablet" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#0e1a0c"/>
      <stop offset="100%" stopColor="#030604"/>
    </linearGradient>
  </defs>
);

/* ───────── Cabeça (compartilhada) ─────────
   Origin at (100, 80). Pequena (rx=32, ry=36) — escala humana de 8 cabeças. */
const DarwinHead = ({ tilt = 0, lookDown = false }) => (
  <g transform={`rotate(${tilt} 100 80)`}>
    {/* glow */}
    <circle cx="100" cy="80" r="44" fill="#9FEF00" opacity="0.07"/>
    {/* head */}
    <ellipse cx="100" cy="80" rx="32" ry="36" fill="url(#db-skin)"/>
    {/* skull top shading */}
    <path d="M73 65 Q100 32 127 65 Q123 55 100 48 Q77 55 73 65 Z" fill="#7a5638" opacity="0.3"/>
    {/* highlight */}
    <ellipse cx="93" cy="55" rx="8" ry="11" fill="#e6c4a3" opacity="0.35"/>
    {/* ears */}
    <ellipse cx="68" cy="82" rx="3" ry="6" fill="url(#db-skin)"/>
    <ellipse cx="132" cy="82" rx="3" ry="6" fill="url(#db-skin)"/>
    {/* eyebrows */}
    <path d="M76 73 Q86 69 95 72 Q90 75 83 75 Q78 75 76 73 Z" fill="#2a1a0a"/>
    <path d="M105 72 Q114 69 124 73 Q122 75 117 75 Q110 75 105 72 Z" fill="#2a1a0a"/>
    {/* glasses */}
    <g stroke="#9FEF00" strokeWidth="1.4" fill="url(#db-lens)" strokeLinejoin="round">
      <rect x="74" y="77" width="20" height="13" rx="1.5"/>
      <rect x="106" y="77" width="20" height="13" rx="1.5"/>
    </g>
    <line x1="94" y1="82" x2="106" y2="82" stroke="#9FEF00" strokeWidth="1.4"/>
    <path d="M74 82 L66 80" stroke="#9FEF00" strokeWidth="1.4" fill="none"/>
    <path d="M126 82 L134 80" stroke="#9FEF00" strokeWidth="1.4" fill="none"/>
    {/* HUD micro readout */}
    <g fill="#9FEF00" fontFamily="ui-monospace, monospace" fontSize="2.4" opacity="0.9">
      <text x="76" y="82.5">CTR</text>
      <text x="108" y="82.5">CPA</text>
    </g>
    {/* eyes */}
    <circle cx={lookDown ? 84 : 84} cy={lookDown ? 87 : 85} r="1.3" fill="#0a1408"/>
    <circle cx={lookDown ? 116 : 116} cy={lookDown ? 87 : 85} r="1.3" fill="#0a1408"/>
    {/* nose */}
    <path d="M100 95 Q97.5 103 97 108 Q98.5 110 100 110 Q101.5 110 103 108 Q102.5 103 100 95 Z" fill="#9a7050" opacity="0.5"/>
    {/* mustache */}
    <path d="M86 114 Q93 112 100 114 Q107 112 114 114 Q115 117 112 119 Q106 120 100 117 Q94 120 88 119 Q85 117 86 114 Z" fill="#2a1a0a"/>
    {/* mouth */}
    <path d={lookDown ? "M94 121 Q100 122 106 121" : "M94 121 Q100 123 106 121"} stroke="#1a0e08" strokeWidth="0.9" fill="none"/>
    {/* beard */}
    <path
      d="M70 105
         Q68 118 72 128
         Q78 138 86 142
         Q94 145 100 145
         Q106 145 114 142
         Q122 138 128 128
         Q132 118 130 105
         Q124 112 116 114
         Q108 116 100 114
         Q92 116 84 114
         Q76 112 70 105 Z"
      fill="#1f1208"
    />
    {/* beard speckle */}
    <g fill="#5a3e28" opacity="0.55">
      <circle cx="78" cy="120" r="0.3"/>
      <circle cx="82" cy="130" r="0.3"/>
      <circle cx="88" cy="138" r="0.3"/>
      <circle cx="100" cy="142" r="0.3"/>
      <circle cx="112" cy="138" r="0.3"/>
      <circle cx="118" cy="130" r="0.3"/>
      <circle cx="122" cy="120" r="0.3"/>
    </g>
    {/* grey strands */}
    <g fill="#7a6a5a" opacity="0.5">
      <circle cx="80" cy="124" r="0.4"/>
      <circle cx="120" cy="124" r="0.4"/>
    </g>
    {/* neck */}
    <path d="M90 142 L90 156 Q100 161 110 156 L110 142 Z" fill="url(#db-skin)"/>
    <path d="M90 156 Q100 161 110 156" stroke="#7a5638" strokeWidth="0.6" fill="none" opacity="0.5"/>
  </g>
);

/* ───────── Tronco / pernas (sem braços — braços variam por pose) ───────── */
const DarwinTorsoLegs = ({ stance = "center" }) => {
  // stance: 'center' | 'wide' (contrapposto)
  const lLegX = stance === "wide" ? 90 : 92;
  const rLegX = stance === "wide" ? 110 : 108;
  return (
    <g>
      {/* shoulders + chest (lab coat open) */}
      <path
        d="M64 165
           Q70 158 82 156
           L118 156
           Q130 158 136 165
           L142 195
           L142 280
           Q138 290 130 292
           L70 292
           Q62 290 58 280
           L64 165 Z"
        fill="url(#db-coat)"
      />
      {/* coat seam left edge — shirt underneath */}
      <path d="M82 156 L82 170 Q88 180 100 180 Q112 180 118 170 L118 156 Z" fill="#1a2018"/>
      {/* shirt collar */}
      <path d="M90 156 L100 168 L110 156 Z" fill="#0a1408"/>
      <path d="M90 156 L100 168 L110 156" stroke="#2a342a" strokeWidth="0.6" fill="none"/>
      {/* shirt buttons */}
      <circle cx="100" cy="190" r="1" fill="#3a4a30"/>
      <circle cx="100" cy="210" r="1" fill="#3a4a30"/>
      <circle cx="100" cy="230" r="1" fill="#3a4a30"/>
      {/* coat lapels (subtle highlight) */}
      <path d="M82 156 L92 230 L90 240" stroke="#2a3528" strokeWidth="0.8" fill="none" opacity="0.6"/>
      <path d="M118 156 L108 230 L110 240" stroke="#2a3528" strokeWidth="0.8" fill="none" opacity="0.6"/>
      {/* breast pocket */}
      <rect x="116" y="180" width="18" height="14" rx="0.5" fill="none" stroke="#2a3528" strokeWidth="0.6"/>
      {/* phosphor pen in pocket */}
      <line x1="120" y1="178" x2="120" y2="186" stroke="#9FEF00" strokeWidth="1.2"/>
      <circle cx="120" cy="177" r="0.8" fill="#9FEF00"/>
      {/* badge */}
      <rect x="118" y="200" width="20" height="6" rx="1" fill="#0a1408" stroke="#9FEF00" strokeWidth="0.5"/>
      <text x="128" y="204.5" textAnchor="middle" fontSize="3.6" fill="#9FEF00" fontFamily="ui-monospace, monospace" fontWeight="600">DARWIN</text>

      {/* belt */}
      <rect x="60" y="278" width="80" height="8" fill="#0a0e08"/>
      <rect x="96" y="280" width="8" height="4" fill="#9FEF00" opacity="0.7"/>
      <rect x="96" y="280" width="8" height="4" fill="none" stroke="#2a3528" strokeWidth="0.5"/>

      {/* pants */}
      <path
        d={`M62 286
            L${lLegX - 8} 480
            L${lLegX + 6} 480
            L99 295
            L101 295
            L${rLegX - 6} 480
            L${rLegX + 8} 480
            L138 286 Z`}
        fill="url(#db-pants)"
      />
      {/* pant crease */}
      <line x1={(lLegX - 1)} y1="300" x2={(lLegX - 1)} y2="475" stroke="#252a1e" strokeWidth="0.5" opacity="0.6"/>
      <line x1={(rLegX + 1)} y1="300" x2={(rLegX + 1)} y2="475" stroke="#252a1e" strokeWidth="0.5" opacity="0.6"/>

      {/* shoes */}
      <ellipse cx={lLegX - 1} cy="492" rx="13" ry="6" fill="#0a0e08"/>
      <ellipse cx={lLegX - 1} cy="490" rx="13" ry="4" fill="#1a1f12"/>
      <path d={`M${lLegX - 12} 492 L${lLegX + 12} 492`} stroke="#9FEF00" strokeWidth="0.6" opacity="0.6"/>
      <ellipse cx={rLegX + 1} cy="492" rx="13" ry="6" fill="#0a0e08"/>
      <ellipse cx={rLegX + 1} cy="490" rx="13" ry="4" fill="#1a1f12"/>
      <path d={`M${rLegX - 12} 492 L${rLegX + 12} 492`} stroke="#9FEF00" strokeWidth="0.6" opacity="0.6"/>
    </g>
  );
};

/* ───────── BG opcional (tech grid + circle) ───────── */
const DarwinBg = () => (
  <g>
    <rect width="200" height="520" fill="url(#db-bg)"/>
    <g stroke="#9FEF00" strokeWidth="0.5" fill="none" opacity="0.18">
      <path d="M10 50 L40 50 L45 55 L45 90"/>
      <path d="M190 60 L160 60 L155 65 L155 95"/>
      <path d="M10 460 L40 460 L45 455 L45 420"/>
      <path d="M190 470 L160 470 L155 465 L155 430"/>
      <circle cx="40" cy="50" r="1.2" fill="#9FEF00"/>
      <circle cx="160" cy="60" r="1.2" fill="#9FEF00"/>
      <circle cx="40" cy="460" r="1.2" fill="#9FEF00"/>
      <circle cx="160" cy="470" r="1.2" fill="#9FEF00"/>
    </g>
    <circle cx="100" cy="80" r="58" fill="#9FEF00" opacity="0.06"/>
    {/* ground glow */}
    <ellipse cx="100" cy="500" rx="80" ry="8" fill="#9FEF00" opacity="0.08"/>
  </g>
);

/* ═══════════════════════════════════════════════════════════════
   POSE 1 — IDLE / MASCOTE
   Em pé, mãos relaxadas, tablet phosphor na mão esquerda.
   ═══════════════════════════════════════════════════════════════ */
const DarwinIdle = ({ size = 260, withBg = false }) => (
  <svg width={size} height={(size * 520) / 200} viewBox="0 0 200 520" xmlns="http://www.w3.org/2000/svg">
    <DarwinDefs/>
    {withBg && <DarwinBg/>}
    <DarwinHead/>
    <DarwinTorsoLegs stance="center"/>

    {/* LEFT ARM — slightly bent, holds tablet at waist */}
    {/* upper arm (shoulder to elbow) */}
    <path
      d="M64 165 Q56 175 54 200 Q53 225 58 245 L72 248 Q78 225 76 200 Q72 175 64 165 Z"
      fill="url(#db-coat)"
    />
    {/* forearm */}
    <path
      d="M58 245 Q56 265 60 280 L80 282 Q82 268 78 248 Z"
      fill="url(#db-coat-light)"
    />
    {/* hand */}
    <ellipse cx="70" cy="288" rx="8" ry="6" fill="url(#db-skin-arm)" transform="rotate(-15 70 288)"/>
    {/* tablet held flat */}
    <g transform="rotate(-6 60 296)">
      <rect x="40" y="284" width="42" height="28" rx="2" fill="url(#db-tablet)" stroke="#9FEF00" strokeWidth="0.6"/>
      {/* screen content — chart */}
      <rect x="43" y="287" width="36" height="22" fill="#020604"/>
      <polyline points="44,304 50,300 56,302 62,295 68,297 74,290 78,288" stroke="#9FEF00" strokeWidth="0.8" fill="none"/>
      <line x1="43" y1="307" x2="79" y2="307" stroke="#9FEF00" strokeWidth="0.3" opacity="0.5"/>
      <text x="44" y="293" fontSize="2.4" fill="#9FEF00" fontFamily="ui-monospace, monospace">+24%</text>
    </g>

    {/* RIGHT ARM — relaxed at side */}
    <path
      d="M136 165 Q146 178 148 205 Q150 240 145 270 Q142 285 138 290 L128 288 Q126 270 130 240 Q132 200 128 170 Z"
      fill="url(#db-coat)"
    />
    {/* hand */}
    <ellipse cx="140" cy="296" rx="7" ry="5.5" fill="url(#db-skin-arm)"/>
    {/* fingers detail */}
    <path d="M134 296 Q138 300 144 298" stroke="#7a5638" strokeWidth="0.6" fill="none" opacity="0.6"/>
  </svg>
);

/* ═══════════════════════════════════════════════════════════════
   POSE 2 — ANOTANDO / PENSANDO
   Prancheta no antebraço esquerdo, mão direita escrevendo com caneta.
   Cabeça inclinada para baixo. Bom para estados de loading/processando.
   ═══════════════════════════════════════════════════════════════ */
const DarwinWriting = ({ size = 260, withBg = false }) => (
  <svg width={size} height={(size * 520) / 200} viewBox="0 0 200 520" xmlns="http://www.w3.org/2000/svg">
    <DarwinDefs/>
    {withBg && <DarwinBg/>}
    <DarwinHead tilt={-8} lookDown/>
    <DarwinTorsoLegs stance="center"/>

    {/* LEFT ARM — bent at 90° holding clipboard against torso */}
    <path
      d="M64 165 Q54 178 52 200 Q50 220 56 235 L72 240 Q78 220 76 200 Q72 175 64 165 Z"
      fill="url(#db-coat)"
    />
    {/* forearm crossing in front */}
    <path
      d="M56 235 Q58 240 65 244 L130 250 Q135 252 138 248 L138 235 Q132 232 120 234 L70 232 Q60 232 56 235 Z"
      fill="url(#db-coat-light)"
    />
    {/* left hand under clipboard */}
    <ellipse cx="138" cy="246" rx="6" ry="5" fill="url(#db-skin-arm)"/>

    {/* CLIPBOARD on forearm */}
    <g>
      <rect x="62" y="218" width="80" height="32" rx="2" fill="#3a2818" stroke="#1a0f08" strokeWidth="0.5"/>
      {/* paper */}
      <rect x="66" y="214" width="72" height="34" rx="1" fill="#e8e2d0"/>
      {/* clip */}
      <rect x="94" y="210" width="16" height="6" rx="1" fill="#9FEF00"/>
      <rect x="98" y="208" width="8" height="4" rx="0.5" fill="#1a2418"/>
      {/* paper content — handwriting lines + sparkline */}
      <g stroke="#1a0e08" strokeWidth="0.5" fill="none" opacity="0.7">
        <line x1="70" y1="222" x2="100" y2="222"/>
        <line x1="70" y1="226" x2="110" y2="226"/>
        <line x1="70" y1="230" x2="95" y2="230"/>
      </g>
      <polyline points="70,242 78,238 84,240 92,234 100,236 108,230 116,232 124,226 132,228" stroke="#9FEF00" strokeWidth="0.7" fill="none"/>
      <text x="70" y="218" fontSize="3" fill="#1a0e08" fontFamily="ui-monospace, monospace" fontWeight="700">ANÁLISE 24H</text>
    </g>

    {/* RIGHT ARM — bent, writing on clipboard */}
    {/* upper arm */}
    <path
      d="M136 165 Q146 178 148 195 Q150 210 144 220 L130 218 Q128 200 130 180 Q132 170 136 165 Z"
      fill="url(#db-coat)"
    />
    {/* forearm reaching down/left toward clipboard */}
    <path
      d="M144 220 Q138 230 128 238 L120 244 L114 240 Q122 230 130 218 Z"
      fill="url(#db-coat-light)"
    />
    {/* right hand */}
    <ellipse cx="118" cy="244" rx="5" ry="4.5" fill="url(#db-skin-arm)" transform="rotate(25 118 244)"/>
    {/* pen */}
    <g transform="rotate(-30 116 244)">
      <line x1="110" y1="245" x2="124" y2="245" stroke="#9FEF00" strokeWidth="1.4"/>
      <circle cx="124" cy="245" r="0.8" fill="#9FEF00"/>
      <line x1="110" y1="245" x2="106" y2="246" stroke="#1a2418" strokeWidth="1.4"/>
    </g>

    {/* thinking ellipsis cloud (subtle) */}
    <g opacity="0.7">
      <circle cx="146" cy="78" r="1.8" fill="#9FEF00" opacity="0.5"/>
      <circle cx="154" cy="68" r="2.4" fill="#9FEF00" opacity="0.7"/>
      <circle cx="166" cy="58" r="3.2" fill="#9FEF00"/>
      <text x="160" y="62" fontSize="3.6" fill="#020806" fontFamily="ui-monospace, monospace" fontWeight="700" textAnchor="middle">…</text>
    </g>
  </svg>
);

/* ═══════════════════════════════════════════════════════════════
   POSE 3 — APRESENTANDO / EXPLICANDO
   Braço direito levantado gesticulando (palma aberta), braço esquerdo
   seguindo um device com gráfico ao lado do corpo. Bom para hero/empty chat.
   ═══════════════════════════════════════════════════════════════ */
const DarwinPresenting = ({ size = 260, withBg = false }) => (
  <svg width={size} height={(size * 520) / 200} viewBox="0 0 200 520" xmlns="http://www.w3.org/2000/svg">
    <DarwinDefs/>
    {withBg && <DarwinBg/>}
    <DarwinHead tilt={3}/>
    <DarwinTorsoLegs stance="wide"/>

    {/* LEFT ARM — bent holding small device against hip */}
    <path
      d="M64 165 Q54 178 52 205 Q50 235 56 258 L72 260 Q78 235 76 205 Q72 175 64 165 Z"
      fill="url(#db-coat)"
    />
    <path
      d="M56 258 Q54 275 60 290 L78 290 Q82 275 78 258 Z"
      fill="url(#db-coat-light)"
    />
    <ellipse cx="69" cy="298" rx="7" ry="5.5" fill="url(#db-skin-arm)"/>

    {/* RIGHT ARM — raised, gesturing outward with open palm */}
    {/* shoulder + upper arm going up and right */}
    <path
      d="M136 165 Q150 162 162 152 Q172 142 178 128 L168 118 Q158 130 148 140 Q140 150 130 162 Z"
      fill="url(#db-coat)"
    />
    {/* forearm continuing up */}
    <path
      d="M178 128 Q184 116 184 102 L172 98 Q170 110 168 118 Z"
      fill="url(#db-coat-light)"
    />
    {/* sleeve cuff */}
    <line x1="172" y1="98" x2="184" y2="102" stroke="#2a3528" strokeWidth="0.8"/>
    {/* open hand / palm */}
    <g>
      {/* palm */}
      <ellipse cx="180" cy="90" rx="8" ry="9" fill="url(#db-skin-arm)"/>
      {/* fingers */}
      <rect x="174" y="74" width="3" height="10" rx="1.4" fill="url(#db-skin-arm)"/>
      <rect x="178" y="72" width="3" height="12" rx="1.4" fill="url(#db-skin-arm)"/>
      <rect x="182" y="73" width="3" height="11" rx="1.4" fill="url(#db-skin-arm)"/>
      <rect x="186" y="76" width="3" height="9" rx="1.4" fill="url(#db-skin-arm)"/>
      {/* thumb */}
      <ellipse cx="172" cy="92" rx="2.4" ry="4" fill="url(#db-skin-arm)" transform="rotate(-30 172 92)"/>
    </g>

    {/* phosphor "thought beam" — a small chart floating by the open hand */}
    <g opacity="0.95">
      {/* connector dots from palm to hologram */}
      <circle cx="170" cy="78" r="0.8" fill="#9FEF00"/>
      <circle cx="165" cy="68" r="0.6" fill="#9FEF00" opacity="0.7"/>
      <circle cx="159" cy="58" r="0.6" fill="#9FEF00" opacity="0.5"/>
      {/* holo panel */}
      <g transform="translate(120 22)">
        <rect width="44" height="32" rx="2" fill="#020806" stroke="#9FEF00" strokeWidth="0.7" opacity="0.95"/>
        <rect x="0" y="0" width="44" height="32" rx="2" fill="#9FEF00" opacity="0.05"/>
        {/* header */}
        <text x="3" y="6" fontSize="3" fill="#9FEF00" fontFamily="ui-monospace, monospace" fontWeight="700">META · GA4</text>
        {/* bars */}
        <rect x="4"  y="14" width="3" height="14" fill="#9FEF00" opacity="0.5"/>
        <rect x="9"  y="11" width="3" height="17" fill="#9FEF00" opacity="0.7"/>
        <rect x="14" y="16" width="3" height="12" fill="#9FEF00" opacity="0.5"/>
        <rect x="19" y="9"  width="3" height="19" fill="#9FEF00"/>
        <rect x="24" y="12" width="3" height="16" fill="#9FEF00" opacity="0.7"/>
        <rect x="29" y="7"  width="3" height="21" fill="#9FEF00"/>
        <rect x="34" y="13" width="3" height="15" fill="#9FEF00" opacity="0.7"/>
        <rect x="39" y="10" width="3" height="18" fill="#9FEF00"/>
        {/* baseline */}
        <line x1="3" y1="29" x2="42" y2="29" stroke="#9FEF00" strokeWidth="0.4" opacity="0.5"/>
      </g>
    </g>

    {/* tablet on left hand */}
    <g transform="rotate(8 60 304)">
      <rect x="44" y="296" width="36" height="24" rx="2" fill="url(#db-tablet)" stroke="#9FEF00" strokeWidth="0.5"/>
      <rect x="47" y="299" width="30" height="18" fill="#020604"/>
      <text x="49" y="306" fontSize="2.2" fill="#9FEF00" fontFamily="ui-monospace, monospace">Q4 INSIGHTS</text>
      <polyline points="48,314 54,310 60,312 66,306 72,308 76,304" stroke="#9FEF00" strokeWidth="0.7" fill="none"/>
    </g>
  </svg>
);

Object.assign(window, {
  DarwinIdle,
  DarwinWriting,
  DarwinPresenting,
});
