/**
 * HookScene Component
 *
 * Opening hook with expert avatar fade-in and hook text.
 * Duration: ~2.5s
 */

import React from 'react';
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { ExpertAvatar } from '../components/ExpertAvatar';
import { AnimatedText } from '../components/AnimatedText';
import { darkPalette } from '../lib/colors';
import type { HookScene as HookSceneType } from '../types/video-script';

type HookSceneProps = {
  scene: HookSceneType;
  expert: { name: string; title: string; avatarUrl: string };
};

export const HookScene: React.FC<HookSceneProps> = ({ scene, expert }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Background fade from black
  const bgOpacity =
    scene.visual === 'fade-in'
      ? interpolate(frame, [0, fps * 0.5], [0, 1], { extrapolateRight: 'clamp' })
      : 1;

  // Expert avatar appears
  const avatarOpacity = interpolate(frame, [5, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Text appears after avatar
  const textOpacity = interpolate(frame, [15, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 60,
        opacity: bgOpacity,
      }}
    >
      {/* Expert avatar */}
      <div style={{ opacity: avatarOpacity, marginBottom: 24 }}>
        <ExpertAvatar
          name={expert.name}
          avatarUrl={expert.avatarUrl}
          size="large"
          animate
        />
      </div>

      {/* Expert name and title */}
      <div style={{ opacity: avatarOpacity, textAlign: 'center', marginBottom: 48 }}>
        <div
          style={{
            color: darkPalette.text,
            fontSize: 36,
            fontWeight: 600,
            marginBottom: 8,
          }}
        >
          {expert.name}
        </div>
        <div
          style={{
            color: darkPalette.textMuted,
            fontSize: 24,
          }}
        >
          {expert.title}
        </div>
      </div>

      {/* Hook text */}
      <div style={{ opacity: textOpacity, textAlign: 'center', maxWidth: 800, paddingLeft: 40, paddingRight: 40 }}>
        <AnimatedText
          text={scene.text}
          style={{
            color: darkPalette.text,
            fontSize: 48,
            fontWeight: 700,
            lineHeight: 1.3,
          }}
          fadeInDuration={0}
        />
      </div>
    </div>
  );
};
