import React from 'react';
import { useCurrentFrame, useVideoConfig, interpolate, Easing, AbsoluteFill } from 'remotion';

// =============================================================================
// COMPOSITION CONFIG (Required for auto-discovery)
// =============================================================================
export const compositionConfig = {
  id: 'TheRenderHook',
  durationInSeconds: 5,
  fps: 60,
  width: 1080,
  height: 1920,
};

// =============================================================================
// PRE-GENERATED DATA
// =============================================================================
const seededRandom = (seed: number): number => {
  const x = Math.sin(seed * 9999) * 10000;
  return x - Math.floor(x);
};

// Window shatter fragments
const shatterFragments = Array.from({ length: 40 }, (_, i) => ({
  id: i,
  x: seededRandom(i * 1) * 900 - 450,
  y: seededRandom(i * 2) * 1100 - 550,
  rotation: seededRandom(i * 3) * 720 - 360,
  velocityX: (seededRandom(i * 4) - 0.5) * 1200,
  velocityY: (seededRandom(i * 5) - 0.5) * 1200,
  rotationSpeed: (seededRandom(i * 6) - 0.5) * 1080,
  width: 60 + seededRandom(i * 7) * 120,
  height: 60 + seededRandom(i * 8) * 120,
  clipPath: `polygon(${seededRandom(i * 9) * 30}% 0%, 100% ${seededRandom(i * 10) * 30}%, ${100 - seededRandom(i * 11) * 30}% 100%, 0% ${100 - seededRandom(i * 12) * 30}%)`,
}));

// Particle dust for explosion
const dustParticles = Array.from({ length: 60 }, (_, i) => ({
  id: i,
  startX: seededRandom(i * 13) * 800 - 400,
  startY: seededRandom(i * 14) * 900 - 450,
  velocityX: (seededRandom(i * 15) - 0.5) * 800,
  velocityY: (seededRandom(i * 16) - 0.5) * 800,
  size: 3 + seededRandom(i * 17) * 8,
  color: ['#00ffff', '#ff00ff', '#00bfff', '#ffffff'][Math.floor(seededRandom(i * 18) * 4)],
}));

// Background floating particles
const floatingParticles = Array.from({ length: 20 }, (_, i) => ({
  id: i,
  x: seededRandom(i * 19) * 1080,
  startY: 1920 + seededRandom(i * 20) * 200,
  size: 2 + seededRandom(i * 21) * 4,
  speed: 0.3 + seededRandom(i * 22) * 0.5,
  opacity: 0.1 + seededRandom(i * 23) * 0.2,
}));

// Glitch timing data
const glitchFrames = [45, 78, 112, 145, 168];
const previewContents = [
  { type: 'wireframe', color: '#00ffff' },
  { type: 'partial', color: '#ff00ff' },
  { type: 'particles', color: '#00bfff' },
  { type: 'wave', color: '#00ffff' },
  { type: 'cube', color: '#ff00ff' },
  { type: 'bars', color: '#00bfff' },
  { type: 'final', color: '#ffffff' },
];

// Status text timeline
const statusTexts = [
  { start: 30, end: 60, text: 'Initializing render pipeline...' },
  { start: 60, end: 90, text: 'Processing frames...' },
  { start: 90, end: 120, text: 'Applying effects...' },
  { start: 120, end: 150, text: 'Compositing layers...' },
  { start: 150, end: 180, text: 'Finalizing output...' },
];

// Easing presets
const easeOut = Easing.bezier(0.33, 1, 0.68, 1);
const easeInOut = Easing.bezier(0.37, 0, 0.63, 1);
const overshoot = Easing.bezier(0.34, 1.56, 0.64, 1);

// =============================================================================
// SUB-COMPONENTS
// =============================================================================

const TrafficLights: React.FC = () => (
  <div style={{ display: 'flex', gap: 8, marginLeft: 16 }}>
    <div style={{ width: 14, height: 14, borderRadius: '50%', backgroundColor: '#ff5f57' }} />
    <div style={{ width: 14, height: 14, borderRadius: '50%', backgroundColor: '#febc2e' }} />
    <div style={{ width: 14, height: 14, borderRadius: '50%', backgroundColor: '#28c840' }} />
  </div>
);

const WireframePreview: React.FC<{ frame: number }> = ({ frame }) => {
  const rotation = (frame * 2) % 360;
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="300" height="300" viewBox="0 0 100 100" style={{ transform: `rotate(${rotation}deg)` }}>
        <polygon points="50,10 90,90 10,90" fill="none" stroke="#00ffff" strokeWidth="2" />
        <circle cx="50" cy="50" r="30" fill="none" stroke="#00ffff" strokeWidth="2" />
        <rect x="25" y="25" width="50" height="50" fill="none" stroke="#00ffff" strokeWidth="2" />
      </svg>
    </div>
  );
};

const ParticlePreview: React.FC<{ frame: number }> = ({ frame }) => {
  const particles = Array.from({ length: 30 }, (_, i) => ({
    x: 50 + Math.cos((frame * 0.1 + i * 0.5)) * (20 + i * 2),
    y: 50 + Math.sin((frame * 0.1 + i * 0.7)) * (20 + i * 2),
  }));
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <svg width="100%" height="100%" viewBox="0 0 100 100">
        {particles.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={2} fill="#00bfff" opacity={0.8} />
        ))}
      </svg>
    </div>
  );
};

const WavePreview: React.FC<{ frame: number }> = ({ frame }) => {
  const points = Array.from({ length: 50 }, (_, i) => {
    const x = i * 2;
    const y = 50 + Math.sin((i * 0.3) + frame * 0.15) * 25;
    return `${x},${y}`;
  }).join(' ');
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="100%" height="100%" viewBox="0 0 100 100">
        <polyline points={points} fill="none" stroke="#00ffff" strokeWidth="3" />
      </svg>
    </div>
  );
};

const CubePreview: React.FC<{ frame: number }> = ({ frame }) => {
  const rotation = frame * 3;
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{
        width: 150,
        height: 150,
        border: '3px solid #ff00ff',
        transform: `perspective(500px) rotateY(${rotation}deg) rotateX(${rotation * 0.5}deg)`,
        boxShadow: '0 0 20px #ff00ff',
      }} />
    </div>
  );
};

const ColorBarsPreview: React.FC = () => (
  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
    {['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff', '#ffffff'].map((color, i) => (
      <div key={i} style={{ flex: 1, backgroundColor: color }} />
    ))}
  </div>
);

const FinalPreview: React.FC = () => (
  <div style={{
    width: '100%',
    height: '100%',
    background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%)',
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gridTemplateRows: 'repeat(3, 1fr)',
    gap: 8,
    padding: 20,
  }}>
    {Array.from({ length: 10 }, (_, i) => (
      <div key={i} style={{
        backgroundColor: `hsl(${i * 36}, 70%, 50%)`,
        borderRadius: 8,
        opacity: 0.9,
      }} />
    ))}
  </div>
);

// =============================================================================
// MAIN COMPONENT
// =============================================================================
const TheRenderHook: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Phase calculations
  const windowFadeIn = frame <= 20;
  const previewInit = frame > 20 && frame <= 30;
  const renderProgress = frame > 30 && frame <= 180;
  const completionBurst = frame > 180 && frame <= 220;
  const windowExplosion = frame > 220 && frame <= 240;
  const textReveal = frame > 240 && frame <= 280;
  const arrowPhase = frame > 280;
  const showWindow = frame <= 220;

  // Window appearance
  const windowOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const windowScale = interpolate(frame, [0, 20], [0.95, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', easing: overshoot });

  // Progress bar calculation with realistic stutters
  const getProgress = (f: number): number => {
    if (f < 30) return 0;
    if (f >= 180) return 100;
    const progressFrame = f - 30;
    const totalProgressFrames = 150;
    
    // Non-linear progress with stutters
    if (progressFrame < 20) return interpolate(progressFrame, [0, 20], [0, 23], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
    if (progressFrame < 50) return interpolate(progressFrame, [20, 50], [23, 45], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
    if (progressFrame < 90) return interpolate(progressFrame, [50, 90], [45, 78], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
    if (progressFrame < 130) return interpolate(progressFrame, [90, 130], [78, 94], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
    return interpolate(progressFrame, [130, 150], [94, 100], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', easing: overshoot });
  };

  const progress = getProgress(frame);

  // Glitch effect calculations
  const isGlitching = glitchFrames.some(gf => Math.abs(frame - gf) < 3);
  const glitchOffsetX = isGlitching ? (seededRandom(frame) - 0.5) * 20 : 0;
  const rgbSplitAmount = isGlitching ? 5 : 0;

  // Completion burst glitch (frames 180-200)
  const burstGlitch = frame > 180 && frame <= 195;
  const burstIntensity = burstGlitch ? interpolate(frame, [180, 187, 195], [0, 1, 0], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }) : 0;
  const burstFlash = frame > 183 && frame < 186 ? 0.8 : 0;
  const burstSplitX = burstIntensity * 20;
  const burstTearOffset = burstIntensity * 30;

  // Done checkmark animation
  const showDone = frame > 200 && frame <= 220;
  const doneScale = interpolate(frame, [200, 215], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', easing: overshoot });
  const doneOpacity = interpolate(frame, [200, 205], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });

  // Get current preview type
  const getPreviewIndex = (f: number): number => {
    if (f < 30) return -1;
    const cycleFrame = (f - 30) % 25;
    const cycleIndex = Math.floor((f - 30) / 25);
    return cycleIndex % previewContents.length;
  };

  // Get current status text
  const getCurrentStatus = (f: number): string => {
    if (f < 30) return 'Initializing...';
    const status = statusTexts.find(s => f >= s.start && f < s.end);
    return status?.text || 'Finalizing output...';
  };

  // Window explosion animation
  const explosionProgress = interpolate(frame, [220, 240], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', easing: easeOut });

  // Text reveal animations
  const line1Opacity = interpolate(frame, [240, 250], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const line1X = interpolate(frame, [240, 255], [-100, 0], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', easing: overshoot });

  const line2Opacity = interpolate(frame, [250, 260], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const line2GlitchOffset = frame > 250 && frame < 258 ? (seededRandom(frame) - 0.5) * 10 : 0;

  const line3Opacity = interpolate(frame, [260, 270], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const line3Scale = interpolate(frame, [260, 275], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', easing: overshoot });

  // Text glow pulse after settle
  const textGlow = frame > 275 ? interpolate((frame - 275) % 40, [0, 20, 40], [0, 10, 0], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }) : 0;

  // Arrow animation
  const arrowOpacity = interpolate(frame, [280, 290], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const arrowBounce = frame > 280 ? Math.sin((frame - 280) * 0.3) * 15 : 0;
  const arrowGlow = frame > 280 ? interpolate((frame - 280) % 20, [0, 10, 20], [5, 15, 5], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }) : 0;

  // Preview cycling speed increases over time
  const previewCycleSpeed = interpolate(frame, [30, 180], [6, 2], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const currentPreviewIndex = Math.floor((frame - 30) / previewCycleSpeed) % previewContents.length;

  // Scanline effect
  const scanlineY = (frame * 8) % 600;

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a1a' }}>
      {/* Noise texture overlay */}
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E")`,
        pointerEvents: 'none',
      }} />

      {/* Floating particles (after explosion) */}
      {frame > 240 && floatingParticles.map(particle => {
        const y = particle.startY - (frame - 240) * particle.speed * 3;
        if (y < -10) return null;
        return (
          <div
            key={particle.id}
            style={{
              position: 'absolute',
              left: particle.x,
              top: y,
              width: particle.size,
              height: particle.size,
              backgroundColor: '#00ffff',
              borderRadius: '50%',
              opacity: particle.opacity * interpolate(frame, [240, 260], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }),
            }}
          />
        );
      })}

      {/* Render Window */}
      {showWindow && (
        <div
          style={{
            position: 'absolute',
            left: '50%',
            top: '50%',
            transform: `translate(-50%, -50%) scale(${windowScale}) translateX(${glitchOffsetX + (burstGlitch ? burstSplitX : 0)}px)`,
            width: 900,
            opacity: windowOpacity,
            filter: burstGlitch ? `blur(${burstIntensity * 2}px)` : 'none',
          }}
        >
          {/* Window frame */}
          <div
            style={{
              backgroundColor: '#252525',
              borderRadius: 12,
              border: '1px solid #333333',
              boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
              overflow: 'hidden',
            }}
          >
            {/* Title bar */}
            <div
              style={{
                backgroundColor: '#1e1e1e',
                padding: '12px 16px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                borderBottom: '1px solid #333333',
              }}
            >
              <TrafficLights />
              <span style={{
                fontFamily: 'Montserrat, sans-serif',
                fontSize: 24,
                color: 'rgba(255,255,255,0.5)',
                fontWeight: 500,
              }}>
                Render Output
              </span>
              <div style={{ width: 62 }} />
            </div>

            {/* Preview area with tear effect during burst */}
            <div style={{ position: 'relative' }}>
              {burstGlitch && (
                <>
                  {/* Top tear */}
                  <div style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    height: '50%',
                    overflow: 'hidden',
                    transform: `translateX(${-burstTearOffset}px)`,
                    zIndex: 10,
                  }}>
                    <div style={{
                      width: 820,
                      height: 600,
                      margin: '20px auto',
                      backgroundColor: '#0a0a0a',
                      borderRadius: 8,
                    }} />
                  </div>
                  {/* Bottom tear */}
                  <div style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    height: '50%',
                    overflow: 'hidden',
                    transform: `translateX(${burstTearOffset}px)`,
                    zIndex: 10,
                  }}>
                    <div style={{
                      width: 820,
                      height: 600,
                      margin: '20px auto',
                      backgroundColor: '#0a0a0a',
                      borderRadius: 8,
                    }} />
                  </div>
                </>
              )}
              
              {/* Main preview */}
              <div
                style={{
                  width: 820,
                  height: 600,
                  margin: '20px auto',
                  backgroundColor: '#0a0a0a',
                  borderRadius: 8,
                  overflow: 'hidden',
                  position: 'relative',
                  opacity: burstGlitch ? 0 : 1,
                }}
              >
                {/* RGB split layers during glitch */}
                {(isGlitching || burstGlitch) && (
                  <>
                    <div style={{
                      position: 'absolute',
                      inset: 0,
                      backgroundColor: 'rgba(255,0,0,0.3)',
                      transform: `translateX(${-rgbSplitAmount - burstSplitX}px)`,
                      mixBlendMode: 'screen',
                    }} />
                    <div style={{
                      position: 'absolute',
                      inset: 0,
                      backgroundColor: 'rgba(0,255,255,0.3)',
                      transform: `translateX(${rgbSplitAmount + burstSplitX}px)`,
                      mixBlendMode: 'screen',
                    }} />
                  </>
                )}

                {/* Scanline during render */}
                {renderProgress && (
                  <div style={{
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    top: scanlineY,
                    height: 2,
                    backgroundColor: 'rgba(0,255,255,0.3)',
                    boxShadow: '0 0 10px rgba(0,255,255,0.5)',
                    zIndex: 5,
                  }} />
                )}

                {/* Preview content */}
                {previewInit && (
                  <div style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: 'Montserrat, monospace',
                    fontSize: 32,
                    color: 'rgba(255,255,255,0.5)',
                    opacity: frame % 6 < 3 ? 1 : 0.5,
                  }}>
                    Initializing...
                  </div>
                )}

                {renderProgress && (
                  <>
                    {currentPreviewIndex === 0 && <WireframePreview frame={frame} />}
                    {currentPreviewIndex === 1 && (
                      <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <span style={{
                          fontFamily: 'Montserrat, sans-serif',
                          fontSize: 120,
                          fontWeight: 900,
                          color: '#ff00ff',
                          opacity: 0.7,
                          clipPath: `inset(0 ${50 - (frame % 20) * 2.5}% 0 0)`,
                        }}>
                          RENDER
                        </span>
                      </div>
                    )}
                    {currentPreviewIndex === 2 && <ParticlePreview frame={frame} />}
                    {currentPreviewIndex === 3 && <WavePreview frame={frame} />}
                    {currentPreviewIndex === 4 && <CubePreview frame={frame} />}
                    {currentPreviewIndex === 5 && <ColorBarsPreview />}
                    {currentPreviewIndex === 6 && <FinalPreview />}
                  </>
                )}

                {showDone && (
                  <div style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    opacity: doneOpacity,
                    transform: `scale(${doneScale})`,
                  }}>
                    <FinalPreview />
                    <div style={{
                      position: 'absolute',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: 120,
                      height: 120,
                      borderRadius: '50%',
                      backgroundColor: 'rgba(0,255,136,0.2)',
                      border: '4px solid #00ff88',
                      boxShadow: '0 0 40px rgba(0,255,136,0.5)',
                    }}>
                      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#00ff88" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                      </svg>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Status bar */}
            <div style={{ padding: '20px 40px 30px' }}>
              {/* Status text and percentage */}
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 12,
              }}>
                <span style={{
                  fontFamily: 'Montserrat, sans-serif',
                  fontSize: 28,
                  color: showDone ? '#00ff88' : 'rgba(255,255,255,0.7)',
                  fontWeight: showDone ? 700 : 400,
                }}>
                  {showDone ? 'Complete!' : getCurrentStatus(frame)}
                </span>
                <span style={{
                  fontFamily: 'Montserrat, sans-serif',
                  fontSize: 36,
                  color: '#ffffff',
                  fontWeight: 700,
                }}>
                  {Math.round(progress)}%
                </span>
              </div>

              {/* Progress bar */}
              <div style={{
                width: '100%',
                height: 20,
                backgroundColor: '#333333',
                borderRadius: 10,
                overflow: 'hidden',
                position: 'relative',
              }}>
                {/* Progress fill */}
                <div style={{
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  bottom: 0,
                  width: `${progress}%`,
                  background: showDone
                    ? 'linear-gradient(90deg, #00ff88 0%, #00cc6a 100%)'
                    : 'linear-gradient(90deg, #00ffff 0%, #ff00ff 50%, #00bfff 100%)',
                  borderRadius: 10,
                  boxShadow: showDone
                    ? '0 0 20px rgba(0,255,136,0.5)'
                    : `0 0 ${10 + progress * 0.2}px rgba(0,191,255,0.5)`,
                }} />
                {/* Glow overlay */}
                <div style={{
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  bottom: 0,
                  width: `${progress}%`,
                  background: 'linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%)',
                  borderRadius: 10,
                }} />
              </div>

              {/* Time estimate */}
              {!showDone && (
                <div style={{
                  marginTop: 12,
                  fontFamily: 'Montserrat, sans-serif',
                  fontSize: 22,
                  color: 'rgba(255,255,255,0.5)',
                }}>
                  ⏱ Estimated: {((100 - progress) * 0.003).toFixed(1)}s remaining
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Burst flash overlay */}
      {burstFlash > 0 && (
        <div style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: `rgba(255,255,255,${burstFlash})`,
          pointerEvents: 'none',
        }} />
      )}

      {/* Explosion fragments */}
      {windowExplosion && shatterFragments.map(fragment => {
        const fragX = fragment.x + fragment.velocityX * explosionProgress;
        const fragY = fragment.y + fragment.velocityY * explosionProgress;
        const fragRotation = fragment.rotation + fragment.rotationSpeed * explosionProgress;
        const fragOpacity = 1 - explosionProgress;

        return (
          <div
            key={fragment.id}
            style={{
              position: 'absolute',
              left: '50%',
              top: '50%',
              width: fragment.width,
              height: fragment.height,
              backgroundColor: '#252525',
              border: '1px solid #333333',
              transform: `translate(-50%, -50%) translate(${fragX}px, ${fragY}px) rotate(${fragRotation}deg)`,
              opacity: fragOpacity,
              clipPath: fragment.clipPath,
            }}
          />
        );
      })}

      {/* Dust particles */}
      {windowExplosion && dustParticles.map(particle => {
        const pX = particle.startX + particle.velocityX * explosionProgress;
        const pY = particle.startY + particle.velocityY * explosionProgress;
        const pOpacity = 1 - explosionProgress;

        return (
          <div
            key={`dust-${particle.id}`}
            style={{
              position: 'absolute',
              left: '50%',
              top: '50%',
              width: particle.size,
              height: particle.size,
              backgroundColor: particle.color,
              transform: `translate(${pX}px, ${pY}px)`,
              opacity: pOpacity,
            }}
          />
        );
      })}

      {/* Hook text reveal */}
      {frame > 240 && (
        <div style={{
          position: 'absolute',
          left: '50%',
          top: '38%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
        }}>
          {/* Line 1: Create Videos */}
          <div style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 76,
            fontWeight: 900,
            color: '#ffffff',
            opacity: line1Opacity,
            transform: `translateX(${line1X}px)`,
            textShadow: `0 0 ${textGlow}px rgba(255,255,255,0.5)`,
            margin: 0,
          }}>
            Create Videos
          </div>

          {/* Line 2: With Code */}
          <div style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 76,
            fontWeight: 900,
            color: '#ffffff',
            opacity: line2Opacity,
            transform: `translateX(${line2GlitchOffset}px)`,
            textShadow: `0 0 ${textGlow}px rgba(255,255,255,0.5)`,
            marginTop: 20,
          }}>
            With <span style={{
              color: '#00ffff',
              textShadow: `0 0 ${10 + textGlow}px rgba(0,255,255,0.7)`,
            }}>Code</span>
          </div>

          {/* Line 3: In Seconds */}
          <div style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 64,
            fontWeight: 700,
            color: 'rgba(255,255,255,0.9)',
            opacity: line3Opacity,
            transform: `scale(${line3Scale})`,
            textShadow: `0 0 ${textGlow}px rgba(255,255,255,0.4)`,
            marginTop: 24,
          }}>
            In Seconds
          </div>
        </div>
      )}

      {/* Arrow CTA */}
      {frame > 280 && (
        <div style={{
          position: 'absolute',
          left: '50%',
          top: '85%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
          opacity: arrowOpacity,
        }}>
          {/* Arrow */}
          <div style={{
            transform: `translateX(${arrowBounce}px)`,
            filter: `drop-shadow(0 0 ${arrowGlow}px rgba(0,255,255,0.8))`,
          }}>
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M12 5l7 7-7 7" />
            </svg>
          </div>

          {/* Text below arrow */}
          <div style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 28,
            fontWeight: 500,
            color: 'rgba(255,255,255,0.7)',
            marginTop: 16,
            opacity: interpolate(frame, [290, 300], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }),
          }}>
            See what's possible
          </div>
        </div>
      )}
    </AbsoluteFill>
  );
};

export default TheRenderHook;