Why revenue moved

"use client";
import { RevenueMoved } from "@/components/ui/notchset/blocks/revenue-moved";

const k = (v: number) => `$${v >= 1e6 ? `${(v / 1e6).toFixed(2).replace(/0$/, "")}M` : `${Math.round(v / 1000)}k`}`;
const KEYS = [
  ["new", "New"],
  ["pulled", "Pulled in"],
  ["raised", "Raised"],
  ["slipped", "Slipped"],
  ["lowered", "Lowered"],
  ["lost", "Lost"],
] as const;
/* every period has the same steps in the same order, so the bars travel instead of being redrawn */
const steps = (values: number[], counts: number[], names: string[]) => KEYS.map(([key, label], i) => ({ key, label, value: values[i]!, count: counts[i]!, detail: names[i]! }));
const PERIODS = [
  { key: "q2", label: "Q2", since: "April to June", start: { label: "April 1", value: 812000 }, end: "June 30", steps: steps([118000, 42000, 36500, -94000, -61000, -88000], [3, 1, 2, 2, 1, 2], ["Airtable, Framer, ClickUp", "Shopify", "Stripe, Webflow", "Revolut, Raycast", "PostHog", "Dropbox, Discord"]) },
  { key: "q3", label: "Q3", since: "July to September", start: { label: "July 1", value: 765500 }, end: "Sep 30", steps: steps([212000, 96000, 58000, -142000, -38000, -21000], [4, 2, 2, 1, 1, 1], ["Sentry, Airtable, Calendly, Monzo", "Webflow, Shopify", "Stripe, Framer", "Revolut", "Raycast", "Discord"]) },
  { key: "q4", label: "Q4", since: "October to now", start: { label: "October 1", value: 930500 }, end: "Now", steps: steps([64000, 152000, 97500, -271000, -126000, -48000], [1, 1, 2, 1, 1, 1], ["Airtable", "Sentry", "Stripe, Webflow", "Revolut", "PostHog", "Dropbox"]) },
];

export default function RevenueMovedDemo() {
  return <RevenueMoved title="Won + commit" periods={PERIODS} format={k} countLabel={(n) => `${n} ${n === 1 ? "deal" : "deals"}`} className="w-full max-w-[640px]" />;
}