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

// Scene 05: Social Proof — 810–960 (5s)
// Testimonials + KPI stats

const TESTIMONIALS = [
  {
    quote: 'Cut our expense reporting from 4 hours to 8 minutes. Absolute game-changer.',
    name: 'Sarah K.',
    role: 'CFO, TechStart GmbH',
    rating: 5,
  },
  {
    quote: 'My accountant was blown away. DATEV export works flawlessly, zero corrections needed.',
    name: 'Marcus T.',
    role: 'Freelance Designer',
    rating: 5,
  },
  {
    quote: 'Finally — a tool that handles German receipts perfectly. MwSt. parsing is spot-on.',
    name: 'Jana B.',
    role: 'Steuerberaterin',
    rating: 5,
  },
];

const STATS = [
  { value: '99%', label: 'AI Accuracy Rate' },
  { value: '3s', label: 'Avg. Processing Time' },
  { value: '50k+', label: 'Receipts Processed' },
  { value: '€0', label: 'Manual Entry Cost' },
];

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

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

  return (
    <AbsoluteFill style={{ background: '#000000', opacity: sceneFade * exitFade }}>
      {/* Subtle grid on dark bg */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
          backgroundSize: '80px 80px',
        }}
      />

      {/* Header */}
      <div style={{ position: 'absolute', top: 60, left: 80, right: 80 }}>
        <Reveal delay={5}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: '#059669',
              marginBottom: 10,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <div style={{ width: 26, height: 1, background: '#059669' }} />
            Trusted by thousands
          </div>
        </Reveal>
        <AnimatedHeadline
          text="Don't take our word for it."
          delay={12}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 58,
            letterSpacing: '-0.04em',
            lineHeight: 1.05,
            color: '#FFFFFF',
          }}
        />
      </div>

      {/* Stats row */}
      <div
        style={{
          position: 'absolute',
          top: 230,
          left: 80,
          right: 80,
          display: 'flex',
          gap: 0,
        }}
      >
        {STATS.map((stat, i) => {
          const statSpring = spring({ frame: frame - (20 + i * 12), fps, config: { damping: 16, stiffness: 110, mass: 0.7 } });
          const statOpacity = interpolate(frame - (20 + i * 12), [0, 14], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
          const statY = interpolate(statSpring, [0, 1], [24, 0]);

          return (
            <div
              key={i}
              style={{
                flex: 1,
                padding: '28px 32px',
                borderRight: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none',
                borderBottom: '1px solid rgba(255,255,255,0.08)',
                opacity: statOpacity,
                transform: `translateY(${statY}px)`,
              }}
            >
              <div
                style={{
                  fontFamily: "'Hanken Grotesk', sans-serif",
                  fontWeight: 800,
                  fontSize: 52,
                  letterSpacing: '-0.04em',
                  color: '#FFFFFF',
                  lineHeight: 1,
                  marginBottom: 8,
                }}
              >
                {stat.value}
              </div>
              <div
                style={{
                  fontFamily: 'monospace',
                  fontSize: 9,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  color: '#475569',
                }}
              >
                {stat.label}
              </div>
            </div>
          );
        })}
      </div>

      {/* Testimonials row */}
      <div
        style={{
          position: 'absolute',
          top: 430,
          left: 80,
          right: 80,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}
      >
        {TESTIMONIALS.map((t, i) => {
          const cardSpring = spring({ frame: frame - (55 + i * 18), fps, config: { damping: 16, stiffness: 100, mass: 0.8 } });
          const cardOpacity = interpolate(frame - (55 + i * 18), [0, 14], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
          const cardY = interpolate(cardSpring, [0, 1], [30, 0]);

          return (
            <div
              key={i}
              style={{
                opacity: cardOpacity,
                transform: `translateY(${cardY}px)`,
                border: '1px solid rgba(255,255,255,0.10)',
                padding: '24px 26px',
                background: 'rgba(255,255,255,0.04)',
                display: 'flex',
                flexDirection: 'column',
                gap: 16,
              }}
            >
              {/* Stars */}
              <div style={{ display: 'flex', gap: 3 }}>
                {Array.from({ length: t.rating }).map((_, si) => (
                  <span key={si} style={{ color: '#FBBF24', fontSize: 14 }}>★</span>
                ))}
              </div>

              {/* Quote */}
              <div
                style={{
                  fontFamily: "'Inter', sans-serif",
                  fontSize: 15,
                  color: '#E2E8F0',
                  lineHeight: 1.6,
                  fontStyle: 'italic',
                }}
              >
                "{t.quote}"
              </div>

              {/* Author */}
              <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 14 }}>
                <div
                  style={{
                    fontFamily: "'Hanken Grotesk', sans-serif",
                    fontWeight: 600,
                    fontSize: 14,
                    color: '#FFFFFF',
                    letterSpacing: '-0.01em',
                  }}
                >
                  {t.name}
                </div>
                <div
                  style={{
                    fontFamily: 'monospace',
                    fontSize: 9,
                    color: '#475569',
                    letterSpacing: '0.08em',
                    textTransform: 'uppercase',
                    marginTop: 3,
                  }}
                >
                  {t.role}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </AbsoluteFill>
  );
};
