import React from 'react';
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
// spotlight-sweep-reveal: 聚光灯摆动扫字
// 暗场 #2a2a28，标题两行常驻 opacity 0.07；亮版同文本用 radial-gradient mask，
// 光斑 x 按 sin 摆动扫两个来回（周期 ~55f），f110 后全字提亮定格，
// 光斑/光锥线性消散并在 f>=125 条件卸载，125–160 真静止 35f。
const BG = '#2a2a28';
const INKW = '#f5f5f3';
const CX = 960;
const CY = 540;
const AMP = 560; // 摆动幅度
const PERIOD = 55; // 单个来回帧数
const SWEEP_END = 110; // 两个来回结束
const REVEAL_END = 125; // 提亮完成，之后真静止
const textStyle: React.CSSProperties = {
fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: 150,
fontWeight: 800,
lineHeight: 1.15,
letterSpacing: '0.04em',
color: INKW,
textAlign: 'center',
whiteSpace: 'pre',
};
const TitleText: React.FC = () => (
{'SPOTLIGHT\nON'}
);
export const SpotlightSweepReveal: React.FC = () => {
const f = useCurrentFrame();
// 光斑 x：sin 摆动，两个来回后停在中心
const sweepF = Math.min(f, SWEEP_END);
const x = CX + AMP * Math.sin((2 * Math.PI * sweepF) / PERIOD);
// 全字提亮（扩散感 out-cubic）
const brighten = interpolate(f, [SWEEP_END, REVEAL_END], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
easing: Easing.out(Easing.cubic),
});
// 光斑/光锥消散（线性）
const fadeOut = interpolate(f, [SWEEP_END, REVEAL_END], [1, 0], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
const sweepAlive = f < REVEAL_END; // 条件卸载，保证末段真静止
const maskGrad = `radial-gradient(circle 380px at ${x}px ${CY}px, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0) 100%)`;
return (
{/* 暗版文字常驻 */}
{sweepAlive && (
<>
{/* 光锥：从顶部收拢到光斑 */}
{/* 落在暗墙上的柔光斑 */}
{/* 亮版文字，按帧移动的 radial mask */}
)}
{/* 全亮定格层 */}
);
};