const params = defineParams({
  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' },
  jackHatColor: { type: 'color', default: '#dc2626', label: 'Jack Hat Color' },
});

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

  // CAMERA PAN & ZOOM (Tight initial crop on parents sleeping upstairs -> pan down to full house)
  // Frames 0-40: Tight close-up framing only the sleeping parents in bed
  // Frames 40-85: Smooth camera pan down & zoom out
  // Frames 85+: Full view framing both floors / downstairs action
  const panProgress = Remotion.interpolate(
    frame,
    [40, 85],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
      easing: Remotion.Easing.inOut(Remotion.Easing.cubic)
    }
  );

  // 16:9 Aspect Ratio ViewBox Coordinates
  // Start (Tight Parents Crop): x=210, y=120, w=280, h=157.5
  // End (Full House): x=0, y=0, w=800, h=600
  const vbX = Remotion.interpolate(panProgress, [0, 1], [210, 0]);
  const vbY = Remotion.interpolate(panProgress, [0, 1], [120, 0]);
  const vbW = Remotion.interpolate(panProgress, [0, 1], [280, 800]);
  const vbH = Remotion.interpolate(panProgress, [0, 1], [157.5, 600]);

  // Floating Zzz animation upstairs
  const zzz1Y = 160 - ((frame * 2.2) % 70);
  const zzz1Opacity = Remotion.interpolate((frame * 2.2) % 70, [0, 10, 50, 70], [0, 1, 1, 0]);

  const zzz2Y = 160 - (((frame + 18) * 2.2) % 70);
  const zzz2Opacity = Remotion.interpolate(((frame + 18) * 2.2) % 70, [0, 10, 50, 70], [0, 1, 1, 0]);

  const zzz3Y = 160 - (((frame + 36) * 2.2) % 70);
  const zzz3Opacity = Remotion.interpolate(((frame + 36) * 2.2) % 70, [0, 10, 50, 70], [0, 1, 1, 0]);

  // Downstairs gaming motion
  const buttonMash1 = Math.sin(frame * 0.8) * 3;
  const buttonMash2 = Math.cos(frame * 0.9) * 3;

  // TV screen glow pulse
  const tvGlow = Math.sin(frame * 0.3) * 0.2 + 0.8;

  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={`${vbX} ${vbY} ${vbW} ${vbH}`} 
          preserveAspectRatio="xMidYMid slice"
          style={{ width: '100%', height: '100%' }}
        >
          
          {/* HOUSE OUTLINE */}
          {/* Roof */}
          <path d="M 80 160 L 400 40 L 720 160" fill="none" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" strokeLinejoin="round" />
          {/* Outer Walls */}
          <line x1="120" y1="160" x2="120" y2="540" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
          <line x1="680" y1="160" x2="680" y2="540" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
          <line x1="120" y1="540" x2="680" y2="540" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
          
          {/* FLOOR DIVIDER (Upstairs vs Downstairs) */}
          <line x1="120" y1="290" x2="680" y2="290" stroke={params.color} strokeWidth={params.thickness + 2} strokeLinecap="round" />

          {/* ================= UPSTAIRS (PARENTS SLEEPING) ================= */}
          {/* Bed Frame & Headboard */}
          <rect x="240" y="210" width="220" height="80" rx="4" fill="none" stroke={params.color} strokeWidth="6" />
          <line x1="240" y1="170" x2="240" y2="290" stroke={params.color} strokeWidth="8" strokeLinecap="round" />
          
          {/* Pillows */}
          <rect x="250" y="220" width="45" height="25" rx="8" fill="none" stroke={params.color} strokeWidth="4" />
          <rect x="305" y="220" width="45" height="25" rx="8" fill="none" stroke={params.color} strokeWidth="4" />

          {/* Mom & Dad Sleeping Heads */}
          <circle cx="272" cy="232" r="18" fill="none" stroke={params.color} strokeWidth="4" />
          {/* Sleeping Eyes (Closed Lines) */}
          <path d="M 264 232 Q 272 237 280 232" fill="none" stroke={params.color} strokeWidth="3" strokeLinecap="round" />

          <circle cx="327" cy="232" r="18" fill="none" stroke={params.color} strokeWidth="4" />
          <path d="M 319 232 Q 327 237 335 232" fill="none" stroke={params.color} strokeWidth="3" strokeLinecap="round" />

          {/* Blanket covering bodies */}
          <path d="M 240 245 L 460 245 L 460 290 L 240 290 Z" fill="#f1f5f9" stroke={params.color} strokeWidth="5" />

          {/* Nightstand & Lamp */}
          <rect x="160" y="240" width="50" height="50" fill="none" stroke={params.color} strokeWidth="5" />
          <path d="M 175 240 L 195 210 M 170 210 L 200 210" stroke={params.color} strokeWidth="4" strokeLinecap="round" />

          {/* Floating Zzz Animation */}
          <text x="350" y={zzz1Y} fill={params.color} fontSize="28" fontWeight="bold" opacity={zzz1Opacity}>Z</text>
          <text x="375" y={zzz2Y} fill={params.color} fontSize="36" fontWeight="bold" opacity={zzz2Opacity}>Z</text>
          <text x="405" y={zzz3Y} fill={params.color} fontSize="44" fontWeight="bold" opacity={zzz3Opacity}>z</text>


          {/* ================= DOWNSTAIRS (GAMING) ================= */}
          {/* TV Stand */}
          <rect x="160" y="470" width="90" height="70" fill="none" stroke={params.color} strokeWidth="6" />

          {/* TV Screen */}
          <rect x="150" y="370" width="110" height="85" rx="8" fill="#0f172a" stroke={params.color} strokeWidth="6" />
          {/* Animated Pixel Game Graphics on TV */}
          <rect x="165" y="385" width="80" height="55" rx="4" fill="#1e293b" />
          <circle cx="185" cy={412 + Math.sin(frame * 0.4) * 8} r="8" fill="#38bdf8" />
          <rect x={215 + Math.cos(frame * 0.5) * 10} y="405" width="12" height="18" fill="#ef4444" />
          {/* TV Screen Glow Rays */}
          <polygon points="260,380 340,350 340,490 260,445" fill="#38bdf8" opacity={tvGlow * 0.12} />

          {/* Beanbags */}
          <ellipse cx="400" cy="505" rx="45" ry="25" fill="#e2e8f0" stroke={params.color} strokeWidth="5" />
          <ellipse cx="540" cy="505" rx="45" ry="25" fill="#e2e8f0" stroke={params.color} strokeWidth="5" />

          {/* Narrator (Left Gaming Stickman) */}
          <g>
            {/* Sitting Torso */}
            <line x1="390" y1="490" x2="390" y2="400" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
            <circle cx="390" cy="355" r="32" fill="none" stroke={params.color} strokeWidth={params.thickness} />
            {/* Eyes focused left on TV */}
            <circle cx="378" cy="352" r="3" fill={params.color} />
            <circle cx="392" cy="352" r="3" fill={params.color} />
            {/* Focused smile */}
            <path d="M 378 368 Q 388 373 398 368" fill="none" stroke={params.color} strokeWidth="3" strokeLinecap="round" />

            {/* Controller & Arms */}
            <rect x="340" y={420 + buttonMash1} width="30" height="18" rx="6" fill="#000000" />
            <line x1="390" y1="410" x2="355" y2={428 + buttonMash1} stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
          </g>

          {/* Jack with Red Cap (Right Gaming Stickman) */}
          <g>
            {/* Sitting Torso */}
            <line x1="530" y1="490" x2="530" y2="400" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
            <circle cx="530" cy="355" r="32" fill="none" stroke={params.color} strokeWidth={params.thickness} />
            {/* Eyes focused left on TV */}
            <circle cx="518" cy="352" r="3" fill={params.color} />
            <circle cx="532" cy="352" r="3" fill={params.color} />
            {/* Open smile */}
            <path d="M 516 368 Q 528 378 540 368" fill="none" stroke={params.color} strokeWidth="3" strokeLinecap="round" />

            {/* Jack's Red Cap */}
            <path d={`M 500 336 Q 530 300 560 336 Z`} fill={params.jackHatColor} stroke={params.color} strokeWidth="3" />
            <path d={`M 492 336 Q 525 332 555 342`} fill="none" stroke={params.jackHatColor} strokeWidth="7" strokeLinecap="round" />
            <path d={`M 492 336 Q 525 332 555 342`} fill="none" stroke={params.color} strokeWidth="2.5" strokeLinecap="round" />

            {/* Controller & Arms */}
            <rect x="480" y={420 + buttonMash2} width="30" height="18" rx="6" fill="#000000" />
            <line x1="530" y1="410" x2="495" y2={428 + buttonMash2} stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
          </g>

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