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

// Scene 04: Features Showcase — 600–810 (7s)
// Grid of features, each reveals with stagger

const FEATURES = [
  {
    number: '01',
    title: 'AI Accuracy Engine',
    desc: 'Reads vendor, date, line items, VAT, and totals with 99% accuracy across all receipt types.',
    tag: 'CORE AI',
    color: '#000000',
    bg: '#FFFFFF',
  },
  {
    number: '02',
    title: 'Batch Upload Queue',
    desc: 'Drop 50 receipts at once. Live progress bars, instant thumbnails, one-click retry on errors.',
    tag: 'PRODUCTIVITY',
    color: '#1D4ED8',
    bg: '#EFF6FF',
  },
  {
    number: '03',
    title: 'Dual-Sheet Excel Export',
    desc: 'Summary sheet + raw data. DATEV-compatible CSV also included — ready for your accountant.',
    tag: 'EXPORT',
    color: '#059669',
    bg: '#F0FDF4',
  },
  {
    number: '04',
    title: 'Side-by-Side Inspector',
    desc: 'Zoom, pan, rotate the document while editing extracted fields with 2-way bounding box sync.',
    tag: 'REVIEW',
    color: '#7C3AED',
    bg: '#F5F3FF',
  },
  {
    number: '05',
    title: 'Smart Filter & Search',
    desc: 'Filter by date range, category, amount, or status. Instant chip filters. Powerful full-text search.',
    tag: 'SEARCH',
    color: '#B45309',
    bg: '#FFFBEB',
  },
  {
    number: '06',
    title: 'Offline-First Storage',
    desc: 'Your data stays on-device in IndexedDB. No cloud dependency. Privacy-first by design.',
    tag: 'PRIVACY',
    color: '#475569',
    bg: '#F8FAFC',
  },
];

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

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

  return (
    <AbsoluteFill style={{ opacity: sceneFade * exitFade }}>
      {/* Header */}
      <div style={{ position: 'absolute', top: 64, left: 80, right: 80 }}>
        <Reveal delay={5}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: '#475569',
              marginBottom: 10,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <div style={{ width: 26, height: 1, background: '#000' }} />
            Everything you need
          </div>
        </Reveal>
        <AnimatedHeadline
          text="Built for real-world accounting."
          delay={12}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 60,
            letterSpacing: '-0.04em',
            lineHeight: 1.05,
            color: '#000000',
          }}
        />
      </div>

      {/* Feature grid */}
      <div
        style={{
          position: 'absolute',
          top: 220,
          left: 80,
          right: 80,
          bottom: 60,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gridTemplateRows: 'repeat(2, 1fr)',
          gap: 16,
        }}
      >
        {FEATURES.map((feat, i) => {
          const row = Math.floor(i / 3);
          const col = i % 3;
          const cardDelay = 20 + row * 20 + col * 12;

          const cardSpring = spring({
            frame: frame - cardDelay,
            fps,
            config: { damping: 16, stiffness: 100, mass: 0.7 },
          });
          const cardOpacity = interpolate(frame - cardDelay, [0, 12], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          });
          const cardY = interpolate(cardSpring, [0, 1], [30, 0]);

          return (
            <div
              key={i}
              style={{
                background: feat.bg,
                border: '1px solid #E2E8F0',
                padding: '24px 26px',
                opacity: cardOpacity,
                transform: `translateY(${cardY}px)`,
                display: 'flex',
                flexDirection: 'column',
                gap: 10,
                position: 'relative',
                overflow: 'hidden',
              }}
            >
              {/* Number */}
              <div
                style={{
                  position: 'absolute',
                  top: 18,
                  right: 20,
                  fontFamily: 'monospace',
                  fontSize: 48,
                  fontWeight: 700,
                  color: feat.color,
                  opacity: 0.08,
                  lineHeight: 1,
                  letterSpacing: '-0.04em',
                }}
              >
                {feat.number}
              </div>

              {/* Tag */}
              <div
                style={{
                  fontFamily: 'monospace',
                  fontSize: 8,
                  letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                  color: feat.color,
                  background: 'transparent',
                  border: `1px solid ${feat.color}`,
                  padding: '2px 7px',
                  width: 'fit-content',
                  opacity: 0.75,
                }}
              >
                {feat.tag}
              </div>

              {/* Title */}
              <div
                style={{
                  fontFamily: "'Hanken Grotesk', sans-serif",
                  fontWeight: 700,
                  fontSize: 18,
                  letterSpacing: '-0.02em',
                  color: '#161C22',
                  lineHeight: 1.2,
                }}
              >
                {feat.title}
              </div>

              {/* Desc */}
              <div
                style={{
                  fontFamily: "'Inter', sans-serif",
                  fontSize: 13,
                  color: '#475569',
                  lineHeight: 1.55,
                }}
              >
                {feat.desc}
              </div>
            </div>
          );
        })}
      </div>
    </AbsoluteFill>
  );
};
