/* =========================================================
Pricing — shared parts
Hooks (reveal, tween), buttons, nav, and the signature
interactive net-effective-rate calculator.
Pricing model (from brief):
base = $2,495 / agent / month
bundle: 2+ agents => 20% off (auto)
commitment: m2m 0 / 3mo 5 / 6mo 10 / 12mo 15 / 12mo upfront 20
discounts are ADDITIVE off the SAME base (never compound)
net = base * (1 - (bundlePct + commitmentPct)/100)
========================================================= */
const { useState, useEffect, useRef } = React;
const BASE_PRICE = 2495;
const DEMO = "https://calendly.com/charles-cardealer/30min";
const COMMIT_OPTIONS = [
{ id: "m2m", label: "Month-to-month", short: "M2M", pct: 0 },
{ id: "3mo", label: "3 months", short: "3 mo", pct: 5 },
{ id: "6mo", label: "6 months", short: "6 mo", pct: 10 },
{ id: "12mo", label: "12 months", short: "12 mo", pct: 15 },
{ id: "12up", label: "12 mo, upfront", short: "12 mo · upfront", pct: 20 },
];
const prefersReducedMotion =
typeof window !== "undefined" &&
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const fmt = (n) => "$" + Math.round(n).toLocaleString("en-US");
/* ---------- Reveal ---------- */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el || prefersReducedMotion) return;
let revealed = false;
const show = () => {
if (revealed) return;
revealed = true;
el.style.transition = "opacity 600ms cubic-bezier(0.2,0,0,1), transform 600ms cubic-bezier(0.2,0,0,1)";
el.style.opacity = "1"; el.style.transform = "translateY(0)";
};
el.style.opacity = "0"; el.style.transform = "translateY(16px)";
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) requestAnimationFrame(() => requestAnimationFrame(show));
const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { show(); io.disconnect(); } }), { threshold: 0.15 });
io.observe(el);
const t = setTimeout(show, 1200);
return () => { io.disconnect(); clearTimeout(t); };
}, []);
return ref;
}
/* ---------- Tween a number toward `value` whenever it changes ---------- */
function useTween(value, duration = 480) {
const [display, setDisplay] = useState(value);
const from = useRef(value);
const raf = useRef(0);
useEffect(() => {
if (prefersReducedMotion) { setDisplay(value); from.current = value; return; }
const start = from.current;
const delta = value - start;
if (delta === 0) return;
const t0 = performance.now();
cancelAnimationFrame(raf.current);
const tick = (now) => {
const p = Math.min(1, (now - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
const cur = start + delta * eased;
setDisplay(cur);
if (p < 1) raf.current = requestAnimationFrame(tick);
else { setDisplay(value); from.current = value; }
};
raf.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf.current);
}, [value, duration]);
useEffect(() => { from.current = display; });
return display;
}
/* ---------- Button ---------- */
function PriceBtn({ children, variant = "primary", href, onClick, icon, pulse }) {
const base = {
display: "inline-flex", alignItems: "center", gap: 10,
padding: "16px 26px", borderRadius: 14, cursor: "pointer",
fontFamily: "var(--font-body)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.01em",
border: "1.5px solid transparent", whiteSpace: "nowrap", position: "relative",
transition: "transform 140ms ease, background 140ms ease, border-color 140ms ease",
};
const variants = {
primary: { background: "var(--cobalt-500)", color: "#fff" },
secondary: { background: "transparent", color: "var(--ink)", borderColor: "var(--line)" },
dark: { background: "#fff", color: "var(--ink)" },
"dark-ghost": { background: "rgba(255,255,255,0.06)", color: "#fff", borderColor: "rgba(255,255,255,0.22)" },
};
const hoverBg = { primary: "var(--cobalt-600)", secondary: "var(--bg-alt)", dark: "#EEF0F3", "dark-ghost": "rgba(255,255,255,0.12)" };
const [hover, setHover] = useState(false);
const style = { ...base, ...variants[variant], ...(hover ? { transform: "translateY(-1px)", background: hoverBg[variant] } : {}) };
const inner = (
{pulse && !prefersReducedMotion ? (
) : null}
{icon === "arrow" ? (
) : null}
{children}
);
const handlers = { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) };
if (href) return {inner};
return ;
}
/* ---------- Nav ---------- */
function PricingNav() {
return (
);
}
/* ---------- Segmented control ---------- */
function Segmented({ options, value, onChange, ariaLabel }) {
return (
{options.map((o) => {
const active = o.value === value;
return (
);
})}
);
}
/* ---------- THE signature calculator ---------- */
function PricingCalculator() {
const [agents, setAgents] = useState(2); // default to the common 2-agent bundle
const [commit, setCommit] = useState("12mo"); // a sensible mid commitment
const bundlePct = agents >= 2 ? 20 : 0;
const commitPct = COMMIT_OPTIONS.find((c) => c.id === commit).pct;
const totalPct = bundlePct + commitPct;
const bundleAmt = BASE_PRICE * (bundlePct / 100);
const commitAmt = BASE_PRICE * (commitPct / 100);
const perAgentNet = BASE_PRICE * (1 - totalPct / 100);
const monthlyTotal = perAgentNet * agents;
const dNet = useTween(perAgentNet);
const dTotal = useTween(monthlyTotal);
const dBundle = useTween(bundleAmt);
const dCommit = useTween(commitAmt);
const agentOpts = [1, 2, 3, 4, 5, 6].map((n) => ({
value: n, label: String(n), note: n === 2 ? "bundle" : undefined,
}));
const commitOpts = COMMIT_OPTIONS.map((c) => ({ value: c.id, label: c.short, note: c.pct ? `${c.pct}%` : undefined }));
const Row = ({ label, sub, amount, tone }) => (
{label}
{sub ?
{sub}
: null}
{amount}
);
return (
{/* Controls */}
How many agents?
{bundlePct ? "20% bundle applied" : "Add a 2nd for 20% off"}
Commitment
{commitPct ? `${commitPct}% commitment off` : "Longer term, bigger savings"}
{/* Breakdown — ink panel */}
Your net effective rate
{fmt(BASE_PRICE)}} />
|
c.id===commit).label}` : "Month-to-month"} amount={commitPct ? "– " + fmt(dCommit) : "—"} tone={commitPct ? "minus" : ""} />
Net effective rate
per agent / month{totalPct ? ` · ${totalPct}% off` : ""}
{fmt(dNet)}
{agents >= 2 ? (
{agents} agents × {fmt(perAgentNet)}
{fmt(dTotal)} /mo
) : null}
Both discounts come off the same {fmt(BASE_PRICE)} base — they never compound. The full price stays visible on purpose.
