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

// Scene 02: The Problem — 210–390 frames (6s)
// Show the pain: manual receipt tracking is a nightmare

const PAIN_POINTS = [
  { icon: '📁', text: 'Receipts piling up in shoeboxes', sub: 'Average accountant wastes 4h/week sorting' },
  { icon: '⌨️', text: 'Manual data entry — typo-prone', sub: 'One error = rejected expense claim' },
  { icon: '🗓️', text: 'Tax season panic & missing docs', sub: '43% of SMBs pay late-filing penalties' },
  { icon: '💸', text: 'Accountant bills through the roof', sub: 'Up to €180/hour for data entry' },
];

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

  const sceneFade = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: 'clamp' });
  const exitFade = interpolate(frame, [175, 195], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Headline counter animation
  const counterProgress = interpolate(frame, [40, 120], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: (t) => 1 - Math.pow(1 - t, 3),
  });
  const hoursWasted = Math.round(counterProgress * 4);
  const costWasted = Math.round(counterProgress * 2880);

  return (
    <AbsoluteFill style={{ opacity: sceneFade * exitFade }}>
      {/* Dark panel left */}
      <div
        style={{
          position: 'absolute',
          left: 0,
          top: 0,
          width: interpolate(frame, [0, 25], [0, 44], { extrapolateRight: 'clamp' }) + '%',
          height: '100%',
          background: '#000000',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          padding: '0 64px',
          overflow: 'hidden',
        }}
      >
        <Reveal delay={18}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: '#EF4444',
              marginBottom: 14,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <div style={{ width: 26, height: 1, background: '#EF4444' }} />
            The Problem
          </div>
        </Reveal>

        <AnimatedHeadline
          text="Manual receipts are killing your time."
          delay={25}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 44,
            letterSpacing: '-0.03em',
            lineHeight: 1.1,
            color: '#FFFFFF',
            marginBottom: 40,
          }}
        />

        {/* Stats counters */}
        <Reveal delay={45}>
          <div style={{ display: 'flex', gap: 32, marginBottom: 40 }}>
            <div>
              <div
                style={{
                  fontFamily: "'Hanken Grotesk', sans-serif",
                  fontWeight: 800,
                  fontSize: 56,
                  letterSpacing: '-0.04em',
                  color: '#EF4444',
                  lineHeight: 1,
                }}
              >
                {hoursWasted}h
              </div>
              <div
                style={{
                  fontFamily: 'monospace',
                  fontSize: 9,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  color: '#94A3B8',
                  marginTop: 6,
                }}
              >
                Wasted per week
              </div>
            </div>
            <div style={{ width: 1, background: '#1E293B' }} />
            <div>
              <div
                style={{
                  fontFamily: "'Hanken Grotesk', sans-serif",
                  fontWeight: 800,
                  fontSize: 56,
                  letterSpacing: '-0.04em',
                  color: '#EF4444',
                  lineHeight: 1,
                }}
              >
                €{costWasted.toLocaleString()}
              </div>
              <div
                style={{
                  fontFamily: 'monospace',
                  fontSize: 9,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  color: '#94A3B8',
                  marginTop: 6,
                }}
              >
                Avg. annual cost
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={60}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 11,
              color: '#475569',
              letterSpacing: '0.05em',
              lineHeight: 1.7,
            }}
          >
            Sound familiar? You're not alone.
            <br />
            <span style={{ color: '#64748B' }}>Over 2 million SMBs still do this manually.</span>
          </div>
        </Reveal>
      </div>

      {/* Right side: pain point cards */}
      <div
        style={{
          position: 'absolute',
          right: 0,
          top: 0,
          width: '56%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          padding: '0 72px 0 48px',
          gap: 16,
        }}
      >
        <Reveal delay={8}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: '#94A3B8',
              marginBottom: 8,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <div style={{ width: 26, height: 1, background: '#E2E8F0' }} />
            Sound familiar?
          </div>
        </Reveal>

        {PAIN_POINTS.map((point, i) => {
          const cardSpring = spring({
            frame: frame - (30 + i * 18),
            fps,
            config: { damping: 16, stiffness: 100, mass: 0.8 },
          });
          const cardOpacity = interpolate(frame - (30 + i * 18), [0, 14], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          });
          const cardX = interpolate(cardSpring, [0, 1], [80, 0]);

          return (
            <div
              key={i}
              style={{
                opacity: cardOpacity,
                transform: `translateX(${cardX}px)`,
                background: '#FFFFFF',
                border: '1px solid #E2E8F0',
                padding: '20px 24px',
                display: 'flex',
                alignItems: 'center',
                gap: 18,
              }}
            >
              <div style={{ fontSize: 28, lineHeight: 1 }}>{point.icon}</div>
              <div>
                <div
                  style={{
                    fontFamily: "'Hanken Grotesk', sans-serif",
                    fontWeight: 600,
                    fontSize: 16,
                    color: '#161C22',
                    letterSpacing: '-0.01em',
                    marginBottom: 4,
                  }}
                >
                  {point.text}
                </div>
                <div style={{ fontFamily: 'monospace', fontSize: 10, color: '#EF4444', letterSpacing: '0.06em' }}>
                  {point.sub}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </AbsoluteFill>
  );
};
