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

const WarningIcon = () => (
  <svg width={44} height={44} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#ef4444" />
  </svg>
);

const CARDS = [
  { text: "No access controls", delay: 8 },
  { text: "No audit logs", delay: 28 },
  { text: "No revocation", delay: 48 },
];

export const Scene2Problem = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const fadeIn = interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" });
  const subtitleP = spring({ fps, frame, config: SPRING_CFG, delay: 75 });

  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        padding: "0 80px",
        gap: 28,
        opacity: fadeIn,
      }}
    >
      {CARDS.map((card, i) => {
        const p = spring({ fps, frame, config: SPRING_CFG, delay: card.delay });
        return (
          <div
            key={i}
            style={{
              background: "rgba(239, 68, 68, 0.07)",
              border: "1px solid rgba(239, 68, 68, 0.25)",
              borderRadius: 18,
              padding: "28px 44px",
              display: "flex",
              alignItems: "center",
              gap: 24,
              width: 780,
              opacity: p,
              transform: `translateX(${(1 - p) * -80}px)`,
            }}
          >
            <WarningIcon />
            <span
              style={{
                fontFamily: FONT,
                fontSize: 44,
                fontWeight: 700,
                color: COLORS.text,
              }}
            >
              {card.text}
            </span>
          </div>
        );
      })}
      <div
        style={{
          fontFamily: FONT,
          fontSize: 26,
          color: COLORS.textSecondary,
          textAlign: "center",
          marginTop: 8,
          maxWidth: 700,
          lineHeight: 1.55,
          opacity: subtitleP,
          transform: `translateY(${(1 - subtitleP) * 20}px)`,
        }}
      >
        Most teams bolt AI onto internal systems with zero governance.
      </div>
    </AbsoluteFill>
  );
};
