import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from 'remotion';
import { AnimatedHeadline } from '../components/AnimatedHeadline';
import { Reveal } from '../components/Reveal';

// Scene 06: CTA — 960–1050 (3s)
// Big, punchy final call to action

export const Scene06CTA: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const sceneFade = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });

  // Pulsing button glow
  const glowIntensity = interpolate(
    Math.sin((frame / 15) * Math.PI),
    [-1, 1],
    [0.5, 1]
  );

  // URL reveal progress
  const urlProgress = interpolate(frame, [50, 80], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Background white sweep from left
  const sweepWidth = interpolate(frame, [0, 25], [0, 100], { extrapolateRight: 'clamp' });

  // Final logo fade
  const logoOpacity = interpolate(frame, [20, 45], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  const url = 'scanreceipts.app';
  const visibleChars = Math.floor(urlProgress * url.length);

  return (
    <AbsoluteFill
      style={{
        opacity: sceneFade,
        background: '#FFFFFF',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Grid bg */}
      <div
        style={{
          position: 'absolute',
          inset: '-10%',
          backgroundImage:
            'linear-gradient(#E2E8F0 1px, transparent 1px), linear-gradient(90deg, #E2E8F0 1px, transparent 1px)',
          backgroundSize: '80px 80px',
          opacity: 0.3,
        }}
      />

      {/* Radial highlight */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,150,105,0.06) 0%, transparent 70%)',
        }}
      />

      {/* Content */}
      <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 900 }}>
        {/* Logo */}
        <div
          style={{
            opacity: logoOpacity,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 14,
            marginBottom: 40,
          }}
        >
          <div
            style={{
              width: 52,
              height: 52,
              border: '2.5px solid #000000',
              background: '#FFFFFF',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: "'Hanken Grotesk', sans-serif",
              fontWeight: 800,
              fontSize: 17,
              letterSpacing: '-0.02em',
            }}
          >
            SR
          </div>
          <div
            style={{
              fontFamily: "'Hanken Grotesk', sans-serif",
              fontWeight: 800,
              fontSize: 24,
              letterSpacing: '-0.03em',
              color: '#000000',
            }}
          >
            ScanReceipts
          </div>
        </div>

        {/* Main CTA headline */}
        <AnimatedHeadline
          text="Stop wasting hours."
          delay={18}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 90,
            letterSpacing: '-0.045em',
            lineHeight: 1.0,
            color: '#000000',
            justifyContent: 'center',
            marginBottom: 6,
          }}
        />
        <AnimatedHeadline
          text="Start in 30 seconds."
          delay={28}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 90,
            letterSpacing: '-0.045em',
            lineHeight: 1.0,
            color: '#059669',
            justifyContent: 'center',
            marginBottom: 44,
          }}
        />

        {/* CTA Button */}
        <Reveal delay={42} direction="scale">
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'column',
              gap: 20,
            }}
          >
            <div
              style={{
                background: '#000000',
                color: '#FFFFFF',
                padding: '20px 52px',
                fontFamily: 'monospace',
                fontSize: 15,
                letterSpacing: '0.1em',
                textTransform: 'uppercase',
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                boxShadow: `0 0 ${40 * glowIntensity}px ${12 * glowIntensity}px rgba(5,150,105,${0.15 * glowIntensity})`,
              }}
            >
              <span style={{ fontSize: 18 }}>→</span>
              Try Free — No Credit Card
            </div>

            {/* URL typewriter */}
            <div
              style={{
                fontFamily: 'monospace',
                fontSize: 14,
                color: '#64748B',
                letterSpacing: '0.06em',
                display: 'flex',
                alignItems: 'center',
                gap: 4,
              }}
            >
              <span style={{ opacity: 0.4 }}>https://</span>
              <span style={{ color: '#000000', fontWeight: 600 }}>
                {url.slice(0, visibleChars)}
              </span>
              {urlProgress < 1 && (
                <span
                  style={{
                    display: 'inline-block',
                    width: 2,
                    height: 14,
                    background: '#000000',
                    opacity: Math.sin(frame * 0.3) > 0 ? 1 : 0,
                  }}
                />
              )}
            </div>
          </div>
        </Reveal>

        {/* Badges row */}
        <Reveal delay={60}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              gap: 28,
              marginTop: 36,
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: '#64748B',
              borderTop: '1px solid #E2E8F0',
              paddingTop: 24,
            }}
          >
            {['✓ Free Forever Plan', '✓ GDPR Compliant', '✓ DATEV Export', '✓ No Setup Required'].map((b, i) => (
              <span key={i}>{b}</span>
            ))}
          </div>
        </Reveal>
      </div>
    </AbsoluteFill>
  );
};
