"use client"; import * as React from "react"; import { Badge } from "./badge"; import { Button } from "./button"; import { SegmentedControl } from "./tabs"; import { Slider } from "./slider"; import { Switch } from "./switch"; import { NumberTicker } from "./number-ticker"; /** Usage-based price estimator: seats and volume sliders, add-ons and billing period with a live total. */ export function PricingCalculator() { const [seats, setSeats] = React.useState(12); const [events, setEvents] = React.useState(250); const [sso, setSso] = React.useState(false); const [support, setSupport] = React.useState(true); const [period, setPeriod] = React.useState("yearly"); const perSeat = seats > 50 ? 14 : seats > 20 ? 17 : 20; const volume = Math.max(0, events - 100) * 0.08; const monthly = seats * perSeat + volume + (sso ? 99 : 0) + (support ? 49 : 0); const total = Math.round(period === "yearly" ? monthly * 0.8 : monthly); return (

Estimate your plan

Pay for what you use. Volume discounts apply automatically.

Team seats{seats}

setSeats(v[0]!)} aria-label="Team seats" /> ${perSeat}/seat{seats > 20 ? " · volume discount applied" : ""}

Events per month{events}k

setEvents(v[0]!)} aria-label="Events per month" /> First 100k included

Estimated total per month{period === "yearly" ? `, $${(total * 12).toLocaleString("en-US")} billed yearly` : ""}

{seats} seats × ${perSeat}${seats * perSeat}
Extra events${Math.round(volume)}
SSO$99
Priority support$49

{seats > 50 ? Over 50 seats? Talk to sales for a custom quote : null}

); }

Pricing Calculator

Installation