Plan Fit: Usage-Based API

"use client";

import { PlanFit, type PlanFitBilling, type PlanFitPlan } from "@/components/ui/plan-fit";

// A speech-to-text API billed by hours of audio. Build sells extra hours in
// packs, so it stays the cheapest well past its 100 hours, until Scale wins.
const PLANS: PlanFitPlan[] = [
  {
    id: "free",
    name: "Free",
    pitch: "Try it on your own recordings.",
    price: 0,
    included: 5,
    caption: "No card needed",
    features: ["English and Spanish", "Speaker labels", "Community forum"],
    cta: { label: "Start free", href: "#start" },
  },
  {
    id: "build",
    name: "Build",
    pitch: "For apps shipping their first voice feature.",
    price: { monthly: 29, yearly: 23 },
    included: 100,
    overage: { price: 4, per: 10 },
    caption: { monthly: "Billed monthly", yearly: "Billed $276 a year" },
    features: ["40 languages", "Word-level timestamps", "Email support"],
    cta: { label: "Start building", href: "#build" },
  },
  {
    id: "scale",
    name: "Scale",
    pitch: "For products people talk to every day.",
    price: { monthly: 249, yearly: 199 },
    included: 1000,
    overage: { price: 30, per: 100 },
    limit: 2500,
    caption: { monthly: "Billed monthly", yearly: "Billed $2,388 a year" },
    features: ["Live streaming", "Custom vocabulary", "99.9% uptime SLA"],
    cta: { label: "Choose Scale", href: "#scale" },
  },
  {
    id: "enterprise",
    name: "Enterprise",
    pitch: "Dedicated capacity in your own region.",
    price: "Custom",
    caption: "Volume pricing",
    features: ["On-prem or your VPC", "A named engineer", "Signed DPA and SOC 2"],
    cta: { label: "Talk to sales", href: "#sales" },
  },
];

const BILLING: PlanFitBilling[] = [
  { id: "monthly", label: "Monthly" },
  { id: "yearly", label: "Yearly", note: "−20%" },
];

export function PlanFitDemo() {
  return (
    <div className="w-full max-w-5xl">
      <PlanFit
        plans={PLANS}
        unit="hours"
        readoutLabel="hours of audio transcribed per month"
        defaultValue={60}
        max={5000}
        billing={BILLING}
        defaultBilling="monthly"
      />
    </div>
  );
}