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

const LEFT_APPS = ["Email", "LinkedIn", "Slack", "Notes", "Sheets", "Docs"];

export const TikTokProblem = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const leftIn = spring({ fps, frame, config: SPRING_CFG });
  const rightIn = spring({ fps, frame: Math.max(0, frame - 12), config: SPRING_CFG });
  const divider = interpolate(frame, [4, 24], [0.25, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ padding: 60, flexDirection: "column" }}>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 70,
          fontWeight: 800,
          color: COLORS.text,
          letterSpacing: -2,
          lineHeight: 1,
          marginTop: 44,
          marginBottom: 42,
        }}
      >
        8 tabs vs
        <br />
        1 gateway
      </div>
      <div style={{ display: "flex", flex: 1, gap: 28 }}>
        <div
          style={{
            flex: 1,
            opacity: leftIn,
            transform: `translateX(${(1 - leftIn) * -80}px) rotate(${-4 + (1 - leftIn) * -8}deg)`,
          }}
        >
          <div
            style={{
              borderRadius: 32,
              border: `1px solid rgba(239, 68, 68, 0.4)`,
              background: "rgba(35, 10, 16, 0.88)",
              padding: 28,
              height: "100%",
            }}
          >
            <div style={{ fontFamily: FONT, color: "#fca5a5", fontSize: 30, fontWeight: 700, marginBottom: 20 }}>
              Before
            </div>
            <div style={{ display: "grid", gap: 16 }}>
              {LEFT_APPS.map((app, index) => (
                <div
                  key={app}
                  style={{
                    borderRadius: 20,
                    padding: "18px 20px",
                    background: `rgba(255,255,255,${0.06 + index * 0.01})`,
                    border: "1px solid rgba(255,255,255,0.06)",
                    fontFamily: FONT,
                    color: COLORS.text,
                    fontSize: 28,
                    fontWeight: 600,
                    transform: `translateX(${index % 2 === 0 ? -12 : 18}px)`,
                  }}
                >
                  {app}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div
          style={{
            width: 6,
            borderRadius: 999,
            background: `linear-gradient(180deg, rgba(255,255,255,0.05), rgba(14, 99, 246, ${divider}), rgba(255,255,255,0.05))`,
          }}
        />

        <div
          style={{
            flex: 1,
            opacity: rightIn,
            transform: `translateX(${(1 - rightIn) * 80}px)`,
          }}
        >
          <div
            style={{
              borderRadius: 32,
              border: `1px solid ${COLORS.borderBlue}`,
              background: "rgba(9, 16, 36, 0.92)",
              padding: 28,
              height: "100%",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              gap: 20,
            }}
          >
            <div style={{ fontFamily: FONT, color: COLORS.accentLight, fontSize: 30, fontWeight: 700 }}>
              After
            </div>
            {["AI agent", "SquareMCP", "Connected tools"].map((item, index) => (
              <div
                key={item}
                style={{
                  borderRadius: 22,
                  padding: "24px 22px",
                  background: index === 1 ? "rgba(14, 99, 246, 0.22)" : "rgba(255,255,255,0.05)",
                  border: `1px solid ${index === 1 ? COLORS.borderBlue : "rgba(255,255,255,0.08)"}`,
                  fontFamily: FONT,
                  color: COLORS.text,
                  fontSize: 30,
                  fontWeight: index === 1 ? 800 : 600,
                  textAlign: "center",
                }}
              >
                {item}
              </div>
            ))}
            <div style={{ fontFamily: FONT, color: COLORS.textSecondary, fontSize: 24, lineHeight: 1.35 }}>
              One entry point for auth, permissions, posting, notes, and internal systems.
            </div>
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};
