"use client";
import * as React from "react";
import { motion, AnimatePresence } from "motion/react";
import type { Verdict } from "@/types/encounter";
/* ============================================================
WhiteKeyFilter — strips near-white background from RGB PNGs.
Source PNGs have no alpha channel; this SVG filter computes an
alpha mask from luminance (white → 0, dark → 1) and composites
the original color back through it. Apply via `filter: url(#whiteKey)`.
============================================================ */
export function WhiteKeyFilter() {
return (
);
}
/* ============================================================
GoldenFlash — full-screen pulse fired at dramatic moments.
============================================================ */
export function GoldenFlash({
active,
onDone,
}: {
active: boolean;
onDone: () => void;
}) {
return (
{active && (
)}
);
}
/* ============================================================
VerdictRibbon — banner that crosses the stage at encounter end.
============================================================ */
const VERDICT_LABEL: Record = {
blocked: "Blocked",
changes_required: "Changes Required",
approved_with_notes: "Approved · with notes",
};
const VERDICT_COLOR: Record = {
blocked: "#E04C2B",
changes_required: "#E0BB72",
approved_with_notes: "#B9D87B",
};
export function VerdictRibbon({ verdict }: { verdict: Verdict | null }) {
return (
{verdict && (
Council verdict
{VERDICT_LABEL[verdict]}
{/* corner notches */}
)}
);
}
/* ============================================================
FlyingBubble — speech bubble that arcs from its origin point
to the right edge (where the findings panel lives) and fades.
Origin coords are viewport-relative pixels.
============================================================ */
export function FlyingBubble({
originX,
originY,
title,
accent,
onDone,
}: {
originX: number;
originY: number;
title: string;
accent: string;
onDone: () => void;
}) {
// arc target: right edge, slightly above center (panel top region)
const targetX = window.innerWidth - 200;
const targetY = Math.max(120, originY - 80);
return (
{title}
{/* tracer trail */}
);
}