import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { COLORS, FONT, SPRING_CFG } from "../../styles";

const CHANNELS = [
  { name: "LinkedIn", time: "12:04:03", tint: "rgba(10, 102, 194, 0.28)" },
  { name: "X", time: "12:04:05", tint: "rgba(255, 255, 255, 0.08)" },
  { name: "Instagram", time: "12:04:07", tint: "rgba(225, 48, 108, 0.24)" },
  { name: "TikTok", time: "12:04:09", tint: "rgba(37, 244, 238, 0.18)" },
];

export const TikTokProof = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const inView = spring({ fps, frame, config: SPRING_CFG });

  return (
    <AbsoluteFill style={{ padding: 60 }}>
      <div style={{ fontFamily: FONT, fontSize: 62, fontWeight: 800, color: COLORS.text, letterSpacing: -1.8, marginTop: 50 }}>
        Publish once.
        <br />
        Watch it land.
      </div>
      <div
        style={{
          marginTop: 52,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 22,
          opacity: inView,
          transform: `scale(${0.92 + inView * 0.08})`,
        }}
      >
        {CHANNELS.map((channel, index) => (
          <div
            key={channel.name}
            style={{
              borderRadius: 30,
              border: `1px solid ${COLORS.borderBlue}`,
              background: channel.tint,
              minHeight: 260,
              padding: 24,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              transform: `translateY(${index % 2 === 0 ? -8 : 12}px)`,
            }}
          >
            <div style={{ fontFamily: FONT, color: COLORS.text, fontSize: 30, fontWeight: 700 }}>{channel.name}</div>
            <div style={{ fontFamily: FONT, color: "#86efac", fontSize: 26, fontWeight: 800 }}>LIVE</div>
            <div style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", color: COLORS.textSecondary, fontSize: 22 }}>
              {channel.time}
            </div>
          </div>
        ))}
      </div>
    </AbsoluteFill>
  );
};
