const params = defineTextParams([
  { name: 'wtf', defaults: { content: "WTF?!", fontFamily: 'Inter', fontSize: 44, bold: true } },
  { name: 'friend', defaults: { content: "GOOD FRIEND", fontFamily: 'Inter', fontSize: 32, bold: true } },
  { name: 'shhh', defaults: { content: "QUIET", fontFamily: 'Inter', fontSize: 36, bold: true } },
  { name: 'wake', defaults: { content: "WAKE MY PARENTS", fontFamily: 'Inter', fontSize: 32, bold: true } }
], {
  color: { type: 'color', default: '#000000', label: 'Stickman Color' },
  bg: { type: 'color', default: '#ffffff', label: 'Background Color' },
  thickness: { type: 'range', default: 8, min: 4, max: 20, step: 1, label: 'Line Thickness' },
  haloColor: { type: 'color', default: '#f59e0b', label: 'Halo Color' }
});

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

  // 4 SIMPLE ACTS:
  // Act 1 (Frames 0 - 95, 0s - 3.17s): "WTF?!"
  // Act 2 (Frames 95 - 160, 3.17s - 5.33s): "GOOD FRIEND"
  // Act 3 (Frames 160 - 234, 5.33s - 7.8s): "QUIET"
  // Act 4 (Frames 234 - 306, 7.8s - 10.2s): "WAKE MY PARENTS"
  const currentAct = frame < 95 ? 1 : (frame < 160 ? 2 : (frame < 234 ? 3 : 4));

  // ACT 1
  const wtfScale = Remotion.interpolate(frame, [55, 70], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.back(1.5))
  });

  // ACT 2
  const act2Frame = Math.max(0, frame - 95);
  const haloY = Remotion.interpolate(act2Frame, [0, 20], [-50, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.cubic)
  });

  // ACT 3
  const act3Frame = Math.max(0, frame - 160);
  const shhhScale = Remotion.interpolate(act3Frame, [0, 15], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.cubic)
  });

  // ACT 4
  const act4Frame = Math.max(0, frame - 234);
  const isAwake = act4Frame >= 21; 

  // Floating Zzz
  const zzzY = 180 - ((frame * 2) % 45);
  const zzzOpacity = !isAwake ? Remotion.interpolate((frame * 2) % 45, [0, 10, 35, 45], [0, 1, 1, 0]) : 0;

  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 450" style={{ width: '100%', height: '100%' }}>

          {/* ================= ACT 1: WTF FACEPALM ================= */}
          {currentAct === 1 && (
            <g transform="translate(400, 230)">
              {/* Torso */}
              <line x1="0" y1="50" x2="0" y2="150" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
              {/* Head */}
              <circle cx="0" cy="0" r="38" fill="none" stroke={params.color} strokeWidth={params.thickness} />

              {/* Side-eye */}
              <circle cx="-14" cy="-5" r="3.5" fill={params.color} />
              <circle cx="10" cy="-5" r="3.5" fill={params.color} />
              <path d="M -16 16 Q 0 8 16 16" fill="none" stroke={params.color} strokeWidth="4" strokeLinecap="round" />

              {/* Facepalm Arm */}
              <path d="M 0 70 L -30 40 L -12 -5" fill="none" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" strokeLinejoin="round" />
              <ellipse cx="-12" cy="-10" rx="10" ry="14" fill={params.color} />

              {/* Other Arm Resting on Hip */}
              <path d="M 0 70 L 35 90 L 15 110" fill="none" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" strokeLinejoin="round" />

              {/* Simple Black Text */}
              {wtfScale > 0 && (
                <text
                  x="0"
                  y="-65"
                  fill={params.color}
                  fontSize={params.wtfFontSize || 44}
                  fontWeight="bold"
                  fontFamily={params.wtfFontFamily || 'Inter, sans-serif'}
                  textAnchor="middle"
                  opacity={wtfScale}
                >
                  {params.wtfContent || "WTF?!"}
                </text>
              )}
            </g>
          )}

          {/* ================= ACT 2: GOOD FRIEND ================= */}
          {currentAct === 2 && (
            <g transform="translate(400, 220)">
              {/* Torso */}
              <line x1="0" y1="50" x2="0" y2="150" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
              {/* Head */}
              <circle cx="0" cy="0" r="38" fill="none" stroke={params.color} strokeWidth={params.thickness} />

              {/* Gentle Smile */}
              <circle cx="-12" cy="-6" r="3" fill={params.color} />
              <circle cx="12" cy="-6" r="3" fill={params.color} />
              <path d="M -16 10 Q 0 25 16 10" fill="none" stroke={params.color} strokeWidth="4" strokeLinecap="round" />

              {/* Hands on Chest */}
              <path d="M 0 70 L -25 50 L -5 65" fill="none" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" strokeLinejoin="round" />
              <path d="M 0 70 L 25 50 L 5 65" fill="none" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" strokeLinejoin="round" />

              {/* Golden Halo */}
              <ellipse cx="0" cy={-55 + haloY} rx="42" ry="12" fill="none" stroke={params.haloColor} strokeWidth="7" />

              {/* Simple Black Text */}
              <text
                x="0"
                y="180"
                fill={params.color}
                fontSize={params.friendFontSize || 32}
                fontWeight="bold"
                fontFamily={params.friendFontFamily || 'Inter, sans-serif'}
                textAnchor="middle"
              >
                {params.friendContent || "GOOD FRIEND"}
              </text>
            </g>
          )}

          {/* ================= ACT 3: QUIET ================= */}
          {currentAct === 3 && (
            <g transform="translate(400, 230)">
              {/* Torso */}
              <line x1="0" y1="50" x2="0" y2="150" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
              {/* Head */}
              <circle cx="0" cy="0" r="38" fill="none" stroke={params.color} strokeWidth={params.thickness} />

              {/* Focused Eyes */}
              <circle cx="-12" cy="-6" r="3.5" fill={params.color} />
              <circle cx="12" cy="-6" r="3.5" fill={params.color} />

              {/* Finger to Lips ("SHHH!") */}
              <line x1="0" y1="70" x2="0" y2="8" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />

              {/* Simple Black Text */}
              {shhhScale > 0 && (
                <text
                  x="0"
                  y="-65"
                  fill={params.color}
                  fontSize={params.shhhFontSize || 36}
                  fontWeight="bold"
                  fontFamily={params.shhhFontFamily || 'Inter, sans-serif'}
                  textAnchor="middle"
                  opacity={shhhScale}
                >
                  {params.shhhContent || "QUIET"}
                </text>
              )}
            </g>
          )}

          {/* ================= ACT 4: WAKE MY PARENTS ================= */}
          {currentAct === 4 && (
            <g transform="translate(400, 240)">
              {/* Simple Black Text Title */}
              <text
                x="0"
                y="-130"
                fill={params.color}
                fontSize={params.wakeFontSize || 32}
                fontWeight="bold"
                fontFamily={params.wakeFontFamily || 'Inter, sans-serif'}
                textAnchor="middle"
              >
                {params.wakeContent || "WAKE MY PARENTS"}
              </text>

              {/* Bed Frame & Headboard */}
              <rect x="-220" y="-30" width="440" height="110" rx="8" fill="none" stroke={params.color} strokeWidth="6" />
              <line x1="-220" y1="-80" x2="-220" y2="80" stroke={params.color} strokeWidth="8" strokeLinecap="round" />

              {/* Pillows */}
              <rect x="-190" y="-20" width="90" height="40" rx="8" fill="none" stroke={params.color} strokeWidth="4" />
              <rect x="-80" y="-20" width="90" height="40" rx="8" fill="none" stroke={params.color} strokeWidth="4" />

              {/* DAD HEAD & EYES */}
              <g transform="translate(-145, 0)">
                <circle cx="0" cy="0" r="28" fill="#ffffff" stroke={params.color} strokeWidth="5" />
                {!isAwake ? (
                  /* Sleeping Eyes */
                  <path d="M -12 0 Q 0 8 12 0" fill="none" stroke={params.color} strokeWidth="4" strokeLinecap="round" />
                ) : (
                  /* Wide Shocked Open Eyes */
                  <g>
                    <circle cx="-10" cy="-2" r="7" fill={params.color} />
                    <circle cx="10" cy="-2" r="7" fill={params.color} />
                  </g>
                )}
              </g>

              {/* MOM HEAD & EYES */}
              <g transform="translate(-35, 0)">
                <circle cx="0" cy="0" r="28" fill="#ffffff" stroke={params.color} strokeWidth="5" />
                {!isAwake ? (
                  /* Sleeping Eyes */
                  <path d="M -12 0 Q 0 8 12 0" fill="none" stroke={params.color} strokeWidth="4" strokeLinecap="round" />
                ) : (
                  /* Wide Shocked Open Eyes */
                  <g>
                    <circle cx="-10" cy="-2" r="7" fill={params.color} />
                    <circle cx="10" cy="-2" r="7" fill={params.color} />
                  </g>
                )}
              </g>

              {/* Blanket */}
              <rect x="-220" y="20" width="440" height="60" fill="#ffffff" stroke={params.color} strokeWidth="5" />

              {/* Floating Zzz */}
              {!isAwake && (
                <g transform="translate(60, -30)">
                  <text x="0" y={zzzY} fill={params.color} fontSize="28" fontWeight="bold" opacity={zzzOpacity}>Z</text>
                  <text x="22" y={zzzY - 15} fill={params.color} fontSize="22" fontWeight="bold" opacity={zzzOpacity}>z</text>
                </g>
              )}

              {/* Exclamation marks when awake */}
              {isAwake && (
                <text x="-90" y="-55" fill={params.color} fontSize="36" fontWeight="900" textAnchor="middle">!</text>
              )}
            </g>
          )}

        </svg>

      </div>
    </div>
  );
}