Explain

"use client";
import type * as React from "react";
import { Explain, GlossaryProvider } from "@/components/ui/notchset/explain";

/* the app's glossary, configured once; every page's ? reads from it */
const GLOSSARY = {
  commit: {
    means: "Deals their owner is confident will close this quarter. It's the number you promise your manager, not a best case.",
    counts: "Open deals marked Commit, closing by Dec 31",
    not: "Best case, pipeline, won",
    more: { label: "Forecast categories in Help", href: "#forecast-categories" },
  },
};

export default function ExplainDemo() {
  const figure = (label: React.ReactNode, value: string, sub: string) => (
    <div className="flex min-w-[160px] flex-1 flex-col gap-1 rounded-[var(--ns-radius-lg)] bg-[var(--ns-panel)] p-4 shadow-[0_0_0_1px_var(--ns-line-soft)]">
      <span className="flex items-center gap-1 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">{label}</span>
      <span className="font-[family-name:var(--ns-font-display)] text-[26px] font-[number:var(--ns-weight-strong)] tabular-nums">{value}</span>
      <span className="text-[length:var(--ns-text-meta)] text-[var(--ns-ink-3)]">{sub}</span>
    </div>
  );
  return (
    <GlossaryProvider glossary={GLOSSARY}>
      <div className="flex w-full max-w-[560px] flex-wrap gap-3">
        {figure("Won", "$286,400", "62% of quota")}
        {figure(
          <>
            Commit <Explain term="Commit" />
          </>,
          "$412,000",
          "9 deals",
        )}
      </div>
    </GlossaryProvider>
  );
}