const params = defineParams({
  color: { type: 'color', default: '#000000', label: 'Stickman Color' },
  bg: { type: 'color', default: '#ffffff', label: 'Background Color' },
  thickness: { type: 'range', default: 10, min: 4, max: 20, step: 1, label: 'Line Thickness' },
  jackName: { type: 'string', default: 'JACK', label: 'Friend Name' },
  hatColor: { type: 'color', default: '#dc2626', label: 'Hat Color' },
});

function render(ctx) {
  const frame = ctx.relativeFrame;
  const fps = ctx.fps;

  // Narrator (Left) position & motion
  const idleWiggleNarrator = Math.sin(frame * 0.12) * 2;
  const narratorHeadY = 175 + idleWiggleNarrator * 0.5;
  const narratorShoulderY = 230 + idleWiggleNarrator;

  // Jack pop-in progress (triggers when voice says "Jack" around frame 15 = 0.5s)
  const jackPopProgress = Remotion.interpolate(
    frame,
    [12, 24],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
      easing: Remotion.Easing.out(Remotion.Easing.back(1.5))
    }
  );

  // Jack (Right) position & motion
  const idleWiggleJack = frame > 24 ? Math.sin((frame - 24) * 0.15) * 2.5 : 0;
  const jackHeadY = 175 + idleWiggleJack * 0.5;
  const jackShoulderY = 230 + idleWiggleJack;

  // Jack waving arm motion
  const waveAngle = Math.sin(frame * 0.3) * 15;
  const jackRightHandX = 600 + Math.cos(waveAngle * Math.PI / 180) * 10;
  const jackRightHandY = 170 + Math.sin(waveAngle * Math.PI / 180) * 15;

  // Badge & Arrow animation
  const badgePop = Remotion.interpolate(
    frame,
    [16, 28],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
      easing: Remotion.Easing.out(Remotion.Easing.back(1.5))
    }
  );

  return (
    <div style={{
      width: '100%',
      height: '100%',
      backgroundColor: params.bg,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'Inter, system-ui, sans-serif'
    }}>
      <div style={{ width: '100%', height: '100%', position: 'relative' }}>
        <svg viewBox="0 0 800 600" style={{ width: '100%', height: '100%' }}>
          
          {/* NARRATOR (Left Stickman) */}
          <g>
            {/* Torso */}
            <line 
              x1="280" y1="390" 
              x2="280" y2={narratorShoulderY} 
              stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
            />

            {/* Shoulders */}
            <line 
              x1="230" y1={narratorShoulderY} 
              x2="330" y2={narratorShoulderY} 
              stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
            />

            {/* Left Arm (relaxed) */}
            <line 
              x1="230" y1={narratorShoulderY} 
              x2="200" y2="310" 
              stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
            />

            {/* Right Arm (pointing toward Jack) */}
            <line 
              x1="330" y1={narratorShoulderY} 
              x2="385" y2="250" 
              stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
            />

            {/* Legs */}
            <line 
              x1="280" y1="390" 
              x2="220" y2="510" 
              stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
            />
            <line 
              x1="280" y1="390" 
              x2="340" y2="510" 
              stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
            />

            {/* Head & Face */}
            <circle 
              cx="280" cy={narratorHeadY} 
              r="42" fill="none" stroke={params.color} strokeWidth={params.thickness} 
            />
            {/* Eyes looking right */}
            <rect x="282" y={narratorHeadY - 10} width="5" height="7" fill={params.color} rx="2.5" />
            <rect x="300" y={narratorHeadY - 10} width="5" height="7" fill={params.color} rx="2.5" />
            {/* Talking Smile */}
            <path 
              d={`M 275 ${narratorHeadY + 12} Q 290 ${narratorHeadY + 20} 305 ${narratorHeadY + 14}`} 
              fill="none" stroke={params.color} strokeWidth="4" strokeLinecap="round" 
            />
          </g>

          {/* JACK (Right Stickman - Pop-in Reveal) */}
          {jackPopProgress > 0 && (
            <g transform={`translate(520, 390) scale(${jackPopProgress}) translate(-520, -390)`}>
              {/* Torso */}
              <line 
                x1="520" y1="390" 
                x2="520" y2={jackShoulderY} 
                stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
              />

              {/* Shoulders */}
              <line 
                x1="470" y1={jackShoulderY} 
                x2="570" y2={jackShoulderY} 
                stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
              />

              {/* Left Arm */}
              <line 
                x1="470" y1={jackShoulderY} 
                x2="435" y2="310" 
                stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
              />

              {/* Right Arm (Waving) */}
              <line 
                x1="570" y1={jackShoulderY} 
                x2={jackRightHandX} y2={jackRightHandY} 
                stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
              />

              {/* Legs */}
              <line 
                x1="520" y1="390" 
                x2="460" y2="510" 
                stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
              />
              <line 
                x1="520" y1="390" 
                x2="580" y2="510" 
                stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" 
              />

              {/* Head & Happy Face */}
              <circle 
                cx="520" cy={jackHeadY} 
                r="42" fill="none" stroke={params.color} strokeWidth={params.thickness} 
              />
              {/* Eyes */}
              <rect x="502" y={jackHeadY - 10} width="5" height="7" fill={params.color} rx="2.5" />
              <rect x="532" y={jackHeadY - 10} width="5" height="7" fill={params.color} rx="2.5" />
              {/* Big Smile */}
              <path 
                d={`M 498 ${jackHeadY + 12} Q 520 ${jackHeadY + 25} 542 ${jackHeadY + 12}`} 
                fill="none" stroke={params.color} strokeWidth="4" strokeLinecap="round" 
              />

              {/* RED HAT */}
              {/* Cap Dome */}
              <path 
                d={`M 480 ${jackHeadY - 25} Q 520 ${jackHeadY - 72} 560 ${jackHeadY - 25} Z`} 
                fill={params.hatColor} 
                stroke={params.color} 
                strokeWidth="4" 
              />
              {/* Cap Brim */}
              <path 
                d={`M 472 ${jackHeadY - 24} Q 525 ${jackHeadY - 28} 578 ${jackHeadY - 18}`} 
                fill="none" 
                stroke={params.hatColor} 
                strokeWidth="10" 
                strokeLinecap="round" 
              />
              <path 
                d={`M 472 ${jackHeadY - 24} Q 525 ${jackHeadY - 28} 578 ${jackHeadY - 18}`} 
                fill="none" 
                stroke={params.color} 
                strokeWidth="3" 
                strokeLinecap="round" 
              />
              {/* Top Button */}
              <circle 
                cx="520" cy={jackHeadY - 58} 
                r="5" fill="#ffffff" stroke={params.color} strokeWidth="2" 
              />
            </g>
          )}

          {/* JACK NAME BADGE & ARROW */}
          {badgePop > 0 && (
            <g transform={`translate(520, 75) scale(${badgePop}) translate(-520, -75)`}>
              {/* Name Badge Box */}
              <rect 
                x="455" y="15" 
                width="130" height="48" 
                rx="10" 
                fill="#000000" 
              />
              <text 
                x="520" y="48" 
                fill="#ffffff" 
                fontSize="26" 
                fontWeight="900" 
                textAnchor="middle" 
                letterSpacing="2"
              >
                {params.jackName}
              </text>

              {/* Downward Arrow */}
              <path 
                d="M 520 68 L 520 95 M 508 87 L 520 100 L 532 87" 
                fill="none" 
                stroke="#000000" 
                strokeWidth="6" 
                strokeLinecap="round" 
                strokeLinejoin="round" 
              />
            </g>
          )}

        </svg>
      </div>
    </div>
  );
}