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

const LightningIcon = () => (
  <svg width={48} height={48} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
    <path d="M13 3L4 14h7v7l9-11h-7V3z" fill="#0E63F6" />
  </svg>
);

const LockIcon = () => (
  <svg width={48} height={48} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
    <path
      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
      fill="#0E63F6"
    />
  </svg>
);

const ListIcon = () => (
  <svg width={48} height={48} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" fill="#0E63F6" />
  </svg>
);

const BENEFITS = [
  {
    Icon: LightningIcon,
    title: "Deploy in a day — not months",
    caption: "Pre-built connectors, one-line config, production-ready from day one.",
    delay: 15,
  },
  {
    Icon: LockIcon,
    title: "Full tool-level permission controls",
    caption: "Grant, restrict, and revoke access to individual tools per agent.",
    delay: 35,
  },
  {
    Icon: ListIcon,
    title: "Complete audit log of every agent action",
    caption: "Know exactly what your AI did, when, and why. Always.",
    delay: 55,
  },
];

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

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

  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        padding: "0 80px",
        gap: 24,
        opacity: fadeIn,
      }}
    >
      <div
        style={{
          fontFamily: FONT,
          fontSize: 50,
          fontWeight: 800,
          color: COLORS.text,
          marginBottom: 4,
          opacity: titleP,
          transform: `translateY(${(1 - titleP) * -20}px)`,
        }}
      >
        Why SquareMCP?
      </div>
      {BENEFITS.map(({ Icon, title, caption, delay }, i) => {
        const p = spring({ fps, frame, config: SPRING_CFG, delay });
        return (
          <div
            key={i}
            style={{
              background: COLORS.bgCard,
              border: `1px solid ${COLORS.border}`,
              borderRadius: 20,
              padding: "26px 36px",
              width: 880,
              display: "flex",
              alignItems: "center",
              gap: 28,
              opacity: p,
              transform: `translateX(${(1 - p) * 60}px)`,
            }}
          >
            <Icon />
            <div>
              <div
                style={{
                  fontFamily: FONT,
                  fontSize: 28,
                  fontWeight: 700,
                  color: COLORS.text,
                  marginBottom: 6,
                }}
              >
                {title}
              </div>
              <div style={{ fontFamily: FONT, fontSize: 19, color: COLORS.textSecondary }}>
                {caption}
              </div>
            </div>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};
