"use client";
import { useEffect, useState } from "react";
import { metricCharts } from "@/content/metrics";
import { cn } from "@/lib/cn";
/** Returns true one frame after `visible` turns true, so CSS transitions run from their initial state. */
function useDrawn(visible: boolean) {
const [drawn, setDrawn] = useState(false);
useEffect(() => {
if (!visible) return;
const frame = requestAnimationFrame(() => setDrawn(true));
return () => cancelAnimationFrame(frame);
}, [visible]);
return drawn;
}
/** Grouped bars: Campaign A wins on cheap leads, Campaign B wins on pipeline. Relative shapes only. */
export function PipelineChart({ visible }: { visible: boolean }) {
const drawn = useDrawn(visible);
const { stages, series } = metricCharts.saas;
const baseline = 236;
const maxHeight = 176;
const centers = [104, 248, 392, 536];
return (
);
}
/** Platform-reported ROAS climbs while blended MER stays flat and contribution margin slips. */
export function MerRoasChart({ visible }: { visible: boolean }) {
const drawn = useDrawn(visible);
const { platformRoas, blendedMer, contributionMargin } = metricCharts.ecommerce;
const left = 48;
const right = 592;
const step = (right - left) / (platformRoas.length - 1);
const y = (value: number) => 196 - ((value - 0.3) / 0.5) * 140;
const points = (values: number[]) => values.map((value, i) => `${left + i * step},${y(value)}`);
const roasPoints = points(platformRoas);
const merPoints = points(blendedMer);
const gapPolygon = [...roasPoints, ...[...merPoints].reverse()].join(" ");
const lastX = left + (platformRoas.length - 1) * step;
return (
);
}