// figures.jsx — clay-render style 3D figures for Ed & Sharon
// Stylized clay sculpture feel: soft subsurface skin, sculpted hair volumes,
// fabric with clay highlights. Illustrated characters (not likeness portraits).

const VinylEd = ({ size = 180 }) => (
  <svg width={size} height={size * 1.45} viewBox="0 0 200 290" style={{ filter: 'drop-shadow(0 18px 22px rgba(30,24,20,0.32))' }}>
    <defs>
      <radialGradient id="edSkin" cx="32%" cy="26%" r="88%">
        <stop offset="0%" stopColor="#FFDFC4"/>
        <stop offset="55%" stopColor="#EFBC99"/>
        <stop offset="100%" stopColor="#B27F5C"/>
      </radialGradient>
      <radialGradient id="edSkinNeck" cx="50%" cy="10%" r="90%">
        <stop offset="0%" stopColor="#D9A07B"/>
        <stop offset="100%" stopColor="#A67052"/>
      </radialGradient>
      <radialGradient id="edShirt" cx="32%" cy="22%" r="95%">
        <stop offset="0%" stopColor="#A7BCC9"/>
        <stop offset="55%" stopColor="#6E8999"/>
        <stop offset="100%" stopColor="#324A5B"/>
      </radialGradient>
      <radialGradient id="edPants" cx="40%" cy="18%" r="95%">
        <stop offset="0%" stopColor="#40392F"/>
        <stop offset="100%" stopColor="#17140D"/>
      </radialGradient>
      <radialGradient id="edHair" cx="38%" cy="18%" r="95%">
        <stop offset="0%" stopColor="#7A766F"/>
        <stop offset="55%" stopColor="#4C4843"/>
        <stop offset="100%" stopColor="#26231F"/>
      </radialGradient>
      <radialGradient id="edBeard" cx="50%" cy="30%" r="70%">
        <stop offset="0%" stopColor="#8B837A"/>
        <stop offset="60%" stopColor="#615A51"/>
        <stop offset="100%" stopColor="#3A3630"/>
      </radialGradient>
      <radialGradient id="baseDisc" cx="50%" cy="40%" r="70%">
        <stop offset="0%" stopColor="#463D31"/>
        <stop offset="100%" stopColor="#1A160F"/>
      </radialGradient>
    </defs>

    {/* base disc */}
    <ellipse cx="100" cy="272" rx="74" ry="12" fill="url(#baseDisc)"/>
    <ellipse cx="100" cy="268" rx="74" ry="12" fill="#594B3A"/>
    <ellipse cx="100" cy="267" rx="68" ry="8" fill="#2E271E"/>

    {/* shoes — clay sneakers */}
    <ellipse cx="84" cy="260" rx="17" ry="8" fill="#2B241B"/>
    <ellipse cx="84" cy="257" rx="17" ry="5" fill="#3A3126"/>
    <ellipse cx="116" cy="260" rx="17" ry="8" fill="#2B241B"/>
    <ellipse cx="116" cy="257" rx="17" ry="5" fill="#3A3126"/>

    {/* legs */}
    <path d="M72 184 Q 72 216 78 256 L 94 256 L 97 202 L 103 202 L 106 256 L 122 256 Q 128 216 128 184 Z"
          fill="url(#edPants)"/>
    <path d="M97 202 L 103 202 L 106 256 L 100 256 L 97 202 Z" fill="#000" opacity="0.28"/>
    <path d="M75 188 Q 76 208 82 238" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" fill="none" opacity="0.08"/>

    {/* torso */}
    <path d="M50 140 Q 50 118 66 112 L 134 112 Q 150 118 150 140 L 154 190 Q 130 204 100 204 Q 70 204 46 190 Z"
          fill="url(#edShirt)"/>
    {/* upper chest shadow */}
    <path d="M76 112 Q 88 128 100 130 Q 112 128 124 112 L 124 118 Q 112 134 100 134 Q 88 134 76 118 Z" fill="#000" opacity="0.22"/>
    {/* shirt side shadows */}
    <path d="M46 188 Q 70 202 100 202 Q 130 202 154 188 L 154 194 Q 130 204 100 204 Q 70 204 46 194 Z" fill="#000" opacity="0.3"/>
    {/* highlight ribbon */}
    <path d="M66 120 Q 60 150 68 188" stroke="#fff" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.09"/>
    {/* subtle ribbing on knit */}
    <path d="M90 150 Q 100 154 110 150" stroke="#000" strokeWidth="0.7" fill="none" opacity="0.12"/>
    <path d="M86 166 Q 100 170 114 166" stroke="#000" strokeWidth="0.7" fill="none" opacity="0.1"/>

    {/* neck */}
    <path d="M84 104 L 84 122 Q 100 130 116 122 L 116 104 Z" fill="url(#edSkinNeck)"/>
    <path d="M84 118 Q 100 128 116 118 L 116 122 Q 100 130 84 122 Z" fill="#000" opacity="0.25"/>

    {/* head — oversized vinyl proportion */}
    <ellipse cx="100" cy="66" rx="56" ry="60" fill="url(#edSkin)"/>
    {/* soft ambient occlusion below head */}
    <ellipse cx="100" cy="118" rx="30" ry="6" fill="#000" opacity="0.22"/>
    {/* right-side face shadow (clay depth) */}
    <path d="M100 10 Q 156 18 156 66 Q 156 110 132 124 Q 148 100 148 66 Q 148 28 100 20 Z" fill="#000" opacity="0.14"/>

    {/* hair — short, swept, salt-and-pepper */}
    <path d="M44 60 Q 46 18 100 12 Q 154 18 156 60 Q 150 50 140 48 Q 120 36 100 36 Q 80 36 60 48 Q 50 50 44 60 Z"
          fill="url(#edHair)"/>
    {/* hair volume shadow */}
    <path d="M44 60 Q 50 48 60 46 Q 80 36 100 36 Q 80 40 68 48 Q 54 54 44 62 Z" fill="#000" opacity="0.25"/>
    {/* hair highlight */}
    <path d="M60 32 Q 82 22 110 22" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" fill="none" opacity="0.25"/>
    {/* grey temples */}
    <path d="M46 56 Q 50 40 64 36" stroke="#CFCBC4" strokeWidth="2.5" strokeLinecap="round" fill="none" opacity="0.7"/>
    <path d="M154 56 Q 150 40 136 36" stroke="#CFCBC4" strokeWidth="2.5" strokeLinecap="round" fill="none" opacity="0.7"/>

    {/* beard — full, well-trimmed, salt-and-pepper */}
    <path d="M56 74 Q 58 112 100 120 Q 142 112 144 74 Q 140 94 128 100 Q 114 106 100 106 Q 86 106 72 100 Q 60 94 56 74 Z"
          fill="url(#edBeard)"/>
    {/* beard under-shadow */}
    <path d="M56 74 Q 64 100 82 106 Q 100 112 118 106 Q 136 100 144 74 Q 138 104 124 108 Q 110 114 100 114 Q 90 114 76 108 Q 62 104 56 74 Z"
          fill="#000" opacity="0.25"/>
    {/* beard hair strokes */}
    <path d="M70 92 Q 100 106 130 92" stroke="#3E3A34" strokeWidth="1.2" fill="none" opacity="0.5"/>
    {/* mustache */}
    <path d="M78 80 Q 100 88 122 80 Q 116 90 100 90 Q 84 90 78 80 Z" fill="#55514B"/>
    <path d="M78 80 Q 100 84 122 80" stroke="#3A3630" strokeWidth="1" fill="none" opacity="0.5"/>

    {/* eyes — clay-style, rounded */}
    <ellipse cx="78" cy="68" rx="5" ry="6" fill="#fff"/>
    <ellipse cx="122" cy="68" rx="5" ry="6" fill="#fff"/>
    <ellipse cx="78" cy="69" rx="3.5" ry="4.5" fill="#3A2A1A"/>
    <ellipse cx="122" cy="69" rx="3.5" ry="4.5" fill="#3A2A1A"/>
    <circle cx="76.5" cy="67" r="1.5" fill="#fff"/>
    <circle cx="120.5" cy="67" r="1.5" fill="#fff"/>

    {/* eyebrows — sculpted */}
    <path d="M66 56 Q 78 52 92 58" stroke="#2E2A24" strokeWidth="3.5" strokeLinecap="round" fill="none"/>
    <path d="M108 58 Q 122 52 134 56" stroke="#2E2A24" strokeWidth="3.5" strokeLinecap="round" fill="none"/>

    {/* cheeks */}
    <ellipse cx="62" cy="82" rx="9" ry="5" fill="#E89070" opacity="0.4"/>
    <ellipse cx="138" cy="82" rx="9" ry="5" fill="#E89070" opacity="0.4"/>

    {/* forehead highlight (clay sheen) */}
    <ellipse cx="86" cy="40" rx="22" ry="10" fill="#fff" opacity="0.22"/>
    {/* nose bridge highlight */}
    <ellipse cx="100" cy="74" rx="3" ry="8" fill="#fff" opacity="0.18"/>
  </svg>
);

const VinylSharon = ({ size = 180 }) => (
  <svg width={size} height={size * 1.45} viewBox="0 0 200 290" style={{ filter: 'drop-shadow(0 18px 22px rgba(30,24,20,0.32))' }}>
    <defs>
      <radialGradient id="shSkin" cx="32%" cy="26%" r="88%">
        <stop offset="0%" stopColor="#FFE0C8"/>
        <stop offset="55%" stopColor="#F0C0A2"/>
        <stop offset="100%" stopColor="#BE8A68"/>
      </radialGradient>
      <radialGradient id="shSkinNeck" cx="50%" cy="10%" r="90%">
        <stop offset="0%" stopColor="#DEA482"/>
        <stop offset="100%" stopColor="#AB7555"/>
      </radialGradient>
      <radialGradient id="shTop" cx="32%" cy="22%" r="95%">
        <stop offset="0%" stopColor="#FFFFFF"/>
        <stop offset="55%" stopColor="#F2E9D9"/>
        <stop offset="100%" stopColor="#C3B69C"/>
      </radialGradient>
      <radialGradient id="shJeans" cx="38%" cy="18%" r="95%">
        <stop offset="0%" stopColor="#A7BCCC"/>
        <stop offset="55%" stopColor="#7090A6"/>
        <stop offset="100%" stopColor="#3E566A"/>
      </radialGradient>
      <radialGradient id="shHair" cx="38%" cy="18%" r="95%">
        <stop offset="0%" stopColor="#6A4331"/>
        <stop offset="55%" stopColor="#442818"/>
        <stop offset="100%" stopColor="#20130A"/>
      </radialGradient>
    </defs>

    {/* base disc */}
    <ellipse cx="100" cy="272" rx="74" ry="12" fill="url(#baseDisc)"/>
    <ellipse cx="100" cy="268" rx="74" ry="12" fill="#594B3A"/>
    <ellipse cx="100" cy="267" rx="68" ry="8" fill="#2E271E"/>

    {/* sneakers — white */}
    <ellipse cx="86" cy="260" rx="16" ry="8" fill="#F3EADA"/>
    <ellipse cx="86" cy="257" rx="16" ry="5" fill="#FFF8E8"/>
    <ellipse cx="114" cy="260" rx="16" ry="8" fill="#F3EADA"/>
    <ellipse cx="114" cy="257" rx="16" ry="5" fill="#FFF8E8"/>
    <path d="M72 260 Q 86 264 100 260" stroke="#2B241B" strokeWidth="1.2" fill="none" opacity="0.3"/>
    <path d="M100 260 Q 114 264 128 260" stroke="#2B241B" strokeWidth="1.2" fill="none" opacity="0.3"/>

    {/* jeans */}
    <path d="M74 184 Q 74 216 80 256 L 94 256 L 97 202 L 103 202 L 106 256 L 120 256 Q 126 216 126 184 Z"
          fill="url(#shJeans)"/>
    <path d="M97 202 L 103 202 L 106 256 L 100 256 L 97 202 Z" fill="#000" opacity="0.28"/>
    {/* denim seams */}
    <line x1="82" y1="210" x2="86" y2="246" stroke="#fff" strokeWidth="0.8" opacity="0.18"/>
    <line x1="114" y1="210" x2="118" y2="246" stroke="#fff" strokeWidth="0.8" opacity="0.18"/>

    {/* striped tee — relaxed fit */}
    <path d="M52 140 Q 52 120 68 114 L 132 114 Q 148 120 148 140 L 152 192 Q 128 204 100 204 Q 72 204 48 192 Z"
          fill="url(#shTop)"/>
    {/* horizontal stripes */}
    <path d="M54 148 Q 100 158 146 148" stroke="#CEC1A5" strokeWidth="2.6" fill="none"/>
    <path d="M52 164 Q 100 174 148 164" stroke="#CEC1A5" strokeWidth="2.6" fill="none"/>
    <path d="M50 180 Q 100 190 150 180" stroke="#CEC1A5" strokeWidth="2.6" fill="none"/>
    {/* neckline shadow */}
    <path d="M80 114 Q 92 130 100 132 Q 108 130 120 114 L 120 118 Q 108 134 100 134 Q 92 134 80 118 Z" fill="#000" opacity="0.12"/>
    <path d="M48 190 Q 72 202 100 202 Q 128 202 152 190 L 152 194 Q 128 204 100 204 Q 72 204 48 194 Z" fill="#000" opacity="0.2"/>

    {/* neck */}
    <path d="M88 104 L 88 122 Q 100 130 112 122 L 112 104 Z" fill="url(#shSkinNeck)"/>
    <path d="M88 118 Q 100 128 112 118 L 112 122 Q 100 130 88 122 Z" fill="#000" opacity="0.24"/>

    {/* head */}
    <ellipse cx="100" cy="66" rx="54" ry="60" fill="url(#shSkin)"/>
    <ellipse cx="100" cy="118" rx="28" ry="5" fill="#000" opacity="0.22"/>
    {/* right-side face shadow */}
    <path d="M100 10 Q 154 18 154 66 Q 154 110 130 124 Q 146 100 146 66 Q 146 28 100 20 Z" fill="#000" opacity="0.12"/>

    {/* hair — shoulder-length, framing face, center part */}
    <path d="M42 62 Q 44 16 100 10 Q 156 16 158 62 Q 156 108 150 138 L 136 134 Q 144 100 140 78 Q 130 62 124 60 Q 114 54 100 52 Q 86 54 76 60 Q 70 62 60 78 Q 56 100 64 134 L 50 138 Q 44 108 42 62 Z"
          fill="url(#shHair)"/>
    {/* hair volume shading */}
    <path d="M42 80 Q 50 110 60 134 L 54 136 Q 46 110 42 80 Z" fill="#000" opacity="0.3"/>
    <path d="M158 80 Q 150 110 140 134 L 146 136 Q 154 110 158 80 Z" fill="#000" opacity="0.3"/>
    {/* center part line */}
    <line x1="100" y1="20" x2="100" y2="52" stroke="#20130A" strokeWidth="1.8" opacity="0.6"/>
    {/* hair highlights */}
    <path d="M54 44 Q 72 24 98 20" stroke="#9C6848" strokeWidth="2.2" strokeLinecap="round" fill="none" opacity="0.55"/>
    <path d="M146 44 Q 128 24 102 20" stroke="#9C6848" strokeWidth="2.2" strokeLinecap="round" fill="none" opacity="0.55"/>
    {/* strands */}
    <path d="M54 100 Q 58 116 62 130" stroke="#2A1810" strokeWidth="1" fill="none" opacity="0.5"/>
    <path d="M146 100 Q 142 116 138 130" stroke="#2A1810" strokeWidth="1" fill="none" opacity="0.5"/>

    {/* eyes */}
    <ellipse cx="80" cy="70" rx="5" ry="6" fill="#fff"/>
    <ellipse cx="120" cy="70" rx="5" ry="6" fill="#fff"/>
    <ellipse cx="80" cy="71" rx="3.5" ry="4.5" fill="#3A2A1A"/>
    <ellipse cx="120" cy="71" rx="3.5" ry="4.5" fill="#3A2A1A"/>
    <circle cx="78.5" cy="69" r="1.5" fill="#fff"/>
    <circle cx="118.5" cy="69" r="1.5" fill="#fff"/>
    {/* lashes */}
    <path d="M74 66 Q 80 63 86 66" stroke="#20130A" strokeWidth="1" fill="none" opacity="0.7"/>
    <path d="M114 66 Q 120 63 126 66" stroke="#20130A" strokeWidth="1" fill="none" opacity="0.7"/>

    {/* eyebrows — delicate, arched */}
    <path d="M68 58 Q 80 54 90 58" stroke="#3A2010" strokeWidth="2.6" strokeLinecap="round" fill="none"/>
    <path d="M110 58 Q 120 54 132 58" stroke="#3A2010" strokeWidth="2.6" strokeLinecap="round" fill="none"/>

    {/* cheeks */}
    <ellipse cx="64" cy="84" rx="10" ry="5" fill="#E89070" opacity="0.5"/>
    <ellipse cx="136" cy="84" rx="10" ry="5" fill="#E89070" opacity="0.5"/>

    {/* lips — warm, clay-sculpted */}
    <path d="M88 94 Q 100 100 112 94" stroke="#9A3F2E" strokeWidth="2.2" strokeLinecap="round" fill="none"/>
    <ellipse cx="100" cy="93" rx="8" ry="1.8" fill="#D26F5E" opacity="0.5"/>
    {/* nose hint */}
    <path d="M100 76 Q 99 82 100 86 Q 101 82 100 76" stroke="#B27F5C" strokeWidth="1.2" fill="none" opacity="0.5"/>

    {/* forehead highlight */}
    <ellipse cx="86" cy="40" rx="20" ry="10" fill="#fff" opacity="0.22"/>
    <ellipse cx="100" cy="74" rx="3" ry="8" fill="#fff" opacity="0.16"/>
  </svg>
);

Object.assign(window, { VinylEd, VinylSharon });
