feat(film): pillar 5 — know your true profit

marketing/product-film/src/sequences/Pillar5Profit.tsx

@@ -1,5 +1,35 @@
+import { AbsoluteFill, Sequence } from "remotion";
 import { PillarTitle } from "../components/PillarTitle";
+import { ScreenFrame } from "../components/ScreenFrame";
+import { KenBurns } from "../components/KenBurns";
+import { Cursor } from "../components/Cursor";
+import { Caption } from "../components/Caption";
 import { DURATIONS } from "../timing";
-export const Pillar5Profit: React.FC = () => (
-  <PillarTitle index="⑤" title="Pillar 5" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.pillar5} />
-);
+
+const D = DURATIONS.pillar5;
+const TITLE = 75;
+
+export const Pillar5Profit: React.FC = () => {
+  const afterTitle = D - TITLE;
+  const half = Math.floor(afterTitle / 2);
+  return (
+    <AbsoluteFill>
+      <Sequence durationInFrames={TITLE}>
+        <PillarTitle index="⑤" title="Know your true profit" subtitle="Real margin on every job" startFrame={0} durationInFrames={TITLE} />
+      </Sequence>
+
+      {/* Financial overview — drill into a job */}
+      <Sequence from={TITLE} durationInFrames={half}>
+        <KenBurns durationInFrames={half}><ScreenFrame captureId="owner-snapshot" /></KenBurns>
+        <Cursor from={{ x: 700, y: 360 }} to={{ x: 1250, y: 430 }} moveStartFrame={18} clickAtFrame={42} />
+        <Caption text="Revenue recognized job by job, on a true cost-to-cost basis." startFrame={10} durationInFrames={half - 20} />
+      </Sequence>
+
+      {/* Leaderboard — storm attribution bookend */}
+      <Sequence from={TITLE + half} durationInFrames={afterTitle - half}>
+        <KenBurns durationInFrames={afterTitle - half}><ScreenFrame captureId="leaderboard" /></KenBurns>
+        <Caption text="And every dollar traces back to the storm that started it." startFrame={10} durationInFrames={afterTitle - half - 20} />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};