const params = defineTextParams([
  { name: 'dialogue', defaults: { content: "I really want to get with this girl. Can she come over?", fontFamily: 'Inter', fontSize: 20, 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' },
  jackHatColor: { type: 'color', default: '#dc2626', label: 'Jack Hat Color' },
  clockColor: { type: 'color', default: '#ef4444', label: 'Clock LED Color' },
});

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

  // ACT SWITCH: 
  // Act 1 (Frames 0-60, 0s-2.0s): Close-up of 01:00 AM Digital Alarm Clock in dark room
  // Act 2 (Frames 60+, 2.0s-7.57s): Living Room - Jack turns to Narrator with Phone & Speech Bubble
  const isAct1 = frame < 60;

  // ------------ ACT 1: DIGITAL CLOCK ------------
  const colonVisible = Math.floor(frame / 12) % 2 === 0; // Blinking colon every 0.4s
  const clockGlow = Math.sin(frame * 0.2) * 0.15 + 0.85;

  // ------------ ACT 2: LIVING ROOM & SPEECH BUBBLE ------------
  const act2Frame = Math.max(0, frame - 60);

  // Exclamation mark spring pop-in (at act2Frame 0 - 20)
  const exScale = Remotion.interpolate(act2Frame, [0, 10, 20], [0, 1.3, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.back(1.5))
  });

  // Phone raise animation (act2Frame 10 - 35)
  const phoneY = Remotion.interpolate(act2Frame, [10, 35], [50, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.cubic)
  });

  // Speech bubble pop-in (at frame 108 = act2Frame 48, when voice says "and said...")
  const bubbleProgress = Remotion.interpolate(frame, [108, 122], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.back(1.4))
  });

  // Jack head tilt turning towards narrator
  const jackHeadTilt = Remotion.interpolate(act2Frame, [0, 25], [0, -12], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Remotion.Easing.out(Remotion.Easing.cubic)
  });

  if (isAct1) {
    return (
      <div style={{
        width: '100%',
        height: '100%',
        backgroundColor: '#090d16',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'monospace, sans-serif'
      }}>
        {/* Subtle Ambient Red Light Glow */}
        <div style={{
          position: 'absolute',
          width: 500,
          height: 300,
          borderRadius: '50%',
          backgroundColor: params.clockColor,
          opacity: 0.12 * clockGlow,
          filter: 'blur(80px)'
        }} />

        {/* Digital Alarm Clock Outer Case */}
        <div style={{
          position: 'relative',
          width: 440,
          height: 220,
          backgroundColor: '#1e293b',
          borderRadius: 24,
          border: '8px solid #334155',
          boxShadow: '0 20px 50px rgba(0,0,0,0.8)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 20
        }}>
          {/* LED Display Screen */}
          <div style={{
            width: '92%',
            height: 140,
            backgroundColor: '#020617',
            borderRadius: 12,
            border: '4px solid #0f172a',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: 'inset 0 0 20px rgba(0,0,0,0.9)'
          }}>
            <div style={{
              color: params.clockColor,
              fontSize: 82,
              fontWeight: 'bold',
              letterSpacing: 4,
              textShadow: `0 0 25px ${params.clockColor}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              <span>01</span>
              <span style={{ opacity: colonVisible ? 1 : 0.1, margin: '0 4px' }}>:</span>
              <span>00</span>
              <span style={{ fontSize: 32, marginLeft: 16, color: '#f87171' }}>AM</span>
            </div>
          </div>

          {/* Clock Brand / Top Buttons */}
          <div style={{ display: 'flex', gap: 16, marginTop: 12 }}>
            <div style={{ width: 40, height: 8, backgroundColor: '#475569', borderRadius: 4 }} />
            <div style={{ width: 80, height: 8, backgroundColor: '#64748b', borderRadius: 4 }} />
            <div style={{ width: 40, height: 8, backgroundColor: '#475569', borderRadius: 4 }} />
          </div>
        </div>

        {/* Nightstand Table Line */}
        <div style={{
          position: 'absolute',
          bottom: 100,
          width: '80%',
          height: 8,
          backgroundColor: '#1e293b',
          borderRadius: 4
        }} />
      </div>
    );
  }

  // ACT 2: LIVING ROOM & SPEECH BUBBLE
  return (
    <div style={{
      width: '100%',
      height: '100%',
      backgroundColor: params.bg,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div style={{ width: '100%', height: '100%', position: 'relative' }}>
        <svg viewBox="0 0 800 450" style={{ width: '100%', height: '100%' }}>
          {/* Ground Floor Line */}
          <line x1="80" y1="380" x2="720" y2="380" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />

          {/* Couch / Beanbags */}
          <path d="M 180 380 C 180 320 280 320 300 380 Z" fill="#e2e8f0" stroke={params.color} strokeWidth="5" />
          <path d="M 500 380 C 500 320 600 320 620 380 Z" fill="#e2e8f0" stroke={params.color} strokeWidth="5" />

          {/* NARRATOR (Left Stickman) */}
          <g transform="translate(240, 240)">
            {/* Body / Torso */}
            <line x1="0" y1="50" x2="0" y2="130" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
            {/* Head */}
            <circle cx="0" cy="0" r="32" fill="none" stroke={params.color} strokeWidth={params.thickness} />
            {/* Eyes looking right at Jack */}
            <circle cx="10" cy="-4" r="3" fill={params.color} />
            <circle cx="24" cy="-4" r="3" fill={params.color} />
            {/* Surprised / Curious Mouth */}
            <circle cx="17" cy="12" r="5" fill="none" stroke={params.color} strokeWidth="3" />
            {/* Arms holding controller */}
            <line x1="0" y1="70" x2="25" y2="85" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
            <rect x="20" y="80" width="22" height="14" rx="4" fill="#000000" />
          </g>

          {/* JACK (Right Stickman turning to narrator) */}
          <g transform={`translate(550, 240) rotate(${jackHeadTilt})`}>
            {/* Body / Torso */}
            <line x1="0" y1="50" x2="-10" y2="130" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
            {/* Head */}
            <circle cx="0" cy="0" r="32" fill="none" stroke={params.color} strokeWidth={params.thickness} />
            {/* Eyes looking left at Narrator */}
            <circle cx="-22" cy="-4" r="3" fill={params.color} />
            <circle cx="-8" cy="-4" r="3" fill={params.color} />
            {/* Talking Mouth */}
            <path d="M -22 10 Q -15 22 -8 10 Z" fill={params.color} />

            {/* Jack's Red Cap */}
            <path d="M -30 -19 Q 0 -56 30 -19 Z" fill={params.jackHatColor} stroke={params.color} strokeWidth="3" />
            <path d="M -38 -19 Q -5 -23 25 -13" fill="none" stroke={params.jackHatColor} strokeWidth="7" strokeLinecap="round" />
            <path d="M -38 -19 Q -5 -23 25 -13" fill="none" stroke={params.color} strokeWidth="2.5" strokeLinecap="round" />

            {/* Raised Arm with Smartphone */}
            <g transform={`translate(0, ${phoneY})`}>
              <line x1="-5" y1="70" x2="-45" y2="45" stroke={params.color} strokeWidth={params.thickness} strokeLinecap="round" />
              {/* Smartphone */}
              <rect x="-65" y="15" width="24" height="42" rx="4" fill="#0f172a" stroke={params.color} strokeWidth="3" />
              {/* Screen Glowing with Girl Avatar / Heart */}
              <rect x="-62" y="19" width="18" height="34" rx="2" fill="#ec4899" />
              <path d="M -53 32 L -57 27 C -59 24 -54 21 -53 25 C -52 21 -47 24 -49 27 Z" fill="#ffffff" />
            </g>

            {/* Exclamation Mark Badge Above Jack's Head */}
            <g transform={`translate(0, -65) scale(${exScale})`}>
              <circle cx="0" cy="0" r="18" fill="#ef4444" stroke={params.color} strokeWidth="3" />
              <text x="0" y="7" fill="#ffffff" fontSize="24" fontWeight="900" textAnchor="middle">!</text>
            </g>
          </g>

          {/* SPEECH BUBBLE & TEXT */}
          {bubbleProgress > 0 && (
            <g transform={`translate(350, 105) scale(${bubbleProgress})`}>
              {/* Speech Bubble Tail pointing to Jack */}
              <path d="M 150 20 L 190 70 L 120 30 Z" fill="#ffffff" stroke={params.color} strokeWidth="4" strokeLinejoin="round" />
              {/* Main Bubble Rectangle */}
              <rect x="-220" y="-65" width="430" height="110" rx="20" fill="#ffffff" stroke={params.color} strokeWidth="5" />

              {/* Direct SVG Text Nodes */}
              <text
                x="-5"
                y="-22"
                fill="#000000"
                fontSize="20"
                fontWeight="bold"
                fontFamily="Inter, system-ui, sans-serif"
                textAnchor="middle"
              >
                "I really want to get with this girl.
              </text>
              <text
                x="-5"
                y="8"
                fill="#000000"
                fontSize="20"
                fontWeight="bold"
                fontFamily="Inter, system-ui, sans-serif"
                textAnchor="middle"
              >
                Can she come over?"
              </text>
            </g>
          )}

        </svg>

      </div>
    </div>
  );
}