PricingSeats

npx shadcn@latest add "https://designpass.dev/r/PricingSeats-TS-TW.json"

/*!
 * PricingSeats, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/pricing-seats
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import { useState, type CSSProperties } from "react";
import ShinyText from "@/components/text/ShinyText";
import JellyButton from "@/components/controls/JellyButton";
import SlideToggle from "@/components/controls/SlideToggle";
import SpringSlider from "@/components/controls/SpringSlider";

export type PricingSeatsProps = {
  className?: string;
  eyebrow?: string;
  title?: string;
  subcopy?: string;
  /** Dollars per seat per month on monthly billing. */
  pricePerSeatMonthly?: number;
  /** Dollars per seat per month when billed annually. */
  pricePerSeatAnnual?: number;
  minSeats?: number;
  maxSeats?: number;
  defaultSeats?: number;
  includedFeatures?: string[];
  ctaLabel?: string;
  onCtaClick?: () => void;
  annualSavings?: string;
  defaultPeriod?: "monthly" | "annual";
};

const BLOCK_RAIL = "mx-auto w-full min-w-0 max-w-5xl px-4 sm:px-6 lg:px-8";

const DEFAULT_FEATURES = [
  "Shared inbox and triage tools",
  "Slack + webhook routing",
  "90-day retention",
  "Email support",
];

/**
 * Seat / usage configurator: SpringSlider sets headcount, live total updates,
 * annual defaulted. Expansion revenue pattern for seat-based SaaS.
 */
export default function PricingSeats({
  className = "",
  eyebrow = "Pricing",
  title = "Pay for seats. Scale when the team does.",
  subcopy = "Drag the slider to match your roster. Annual billing locks the lower per-seat rate.",
  pricePerSeatMonthly = 29,
  pricePerSeatAnnual = 23,
  minSeats = 1,
  maxSeats = 50,
  defaultSeats = 5,
  includedFeatures = DEFAULT_FEATURES,
  ctaLabel = "Continue",
  onCtaClick,
  annualSavings = "Save ~20% per seat annually",
  defaultPeriod = "annual",
}: PricingSeatsProps) {
  const [seats, setSeats] = useState(defaultSeats);
  const [period, setPeriod] = useState<"monthly" | "annual">(defaultPeriod);
  const annual = period === "annual";
  const perSeat = annual ? pricePerSeatAnnual : pricePerSeatMonthly;
  const total = perSeat * seats;

  return (
    <section className={`w-full overflow-x-clip ${className}`.trim()} aria-label="Pricing">
      <div className={`${BLOCK_RAIL} py-12 sm:py-16 lg:py-20`}>
        <div className="mx-auto max-w-2xl text-center">
          {eyebrow ? (
            <p className="mb-2 font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--tpl-accent,#52525b)] sm:mb-3 sm:text-[11px]">
              {eyebrow}
            </p>
          ) : null}
          <ShinyText
            color="var(--tpl-ink, #18181b)"
            shineColor="var(--tpl-accent, #a05cff)"
            midColor="color-mix(in srgb, var(--tpl-accent, #a05cff) 45%, var(--tpl-ink, #18181b))"
            speed={2.6}
            rest={1.6}
            className="text-balance text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl"
          >
            {title}
          </ShinyText>
          {subcopy ? (
            <p className="mt-3 text-pretty text-sm leading-relaxed text-[color:var(--tpl-ink-muted,#52525b)] sm:text-base">
              {subcopy}
            </p>
          ) : null}
        </div>

        <div className="mx-auto mt-10 max-w-xl rounded-2xl border border-[color:var(--tpl-card-border,#e4e4e7)] bg-[var(--tpl-card,#fff)] p-6 sm:mt-12 sm:p-8">
          <div
            className="flex flex-col items-center gap-2"
            style={{
              ["--dp-text" as string]: "var(--tpl-ink)",
              ["--dp-bg" as string]: "var(--tpl-card)",
              ["--dp-control-track" as string]:
                "color-mix(in srgb, var(--tpl-ink) 10%, var(--tpl-card))",
            }}
          >
            <SlideToggle
              ariaLabel="Billing period"
              size={36}
              value={period}
              onChange={setPeriod}
              options={[
                { value: "monthly", label: "Monthly" },
                {
                  value: "annual",
                  label: "Annual",
                  accent: "var(--tpl-accent, #a05cff)",
                },
              ]}
            />
            {annual && annualSavings ? (
              <p className="text-xs font-medium text-[color:var(--tpl-accent,#a05cff)]">
                {annualSavings}
              </p>
            ) : null}
          </div>

          <div
            className="mt-8"
            style={{
              ["--dp-text" as string]: "var(--tpl-ink)",
              ["--dp-bg" as string]: "var(--tpl-card)",
              ["--dp-control-track" as string]:
                "color-mix(in srgb, var(--tpl-ink) 12%, var(--tpl-card))",
              ["--dp-accent" as string]: "var(--tpl-accent, #a05cff)",
            }}
          >
            <SpringSlider
              ariaLabel="Number of seats"
              label="Seats"
              min={minSeats}
              max={maxSeats}
              step={1}
              value={seats}
              onChange={setSeats}
              showValue
              size={36}
            />
          </div>

          <div className="mt-8 text-center">
            <p className="text-sm text-[color:var(--tpl-ink-muted,#52525b)]">
              {seats} {seats === 1 ? "seat" : "seats"} × ${perSeat}/mo
            </p>
            <p className="mt-2 text-5xl font-bold tracking-tight text-[color:var(--tpl-ink,#18181b)]">
              ${total}
              <span className="ml-1 text-base font-medium text-[color:var(--tpl-ink-muted,#52525b)]">
                /mo
              </span>
            </p>
            <p className="mt-1 text-xs text-[color:var(--tpl-ink-muted,#52525b)]">
              {annual ? "Billed annually" : "Billed monthly"}
            </p>
          </div>

          <ul className="mt-8 space-y-2 text-sm text-[color:var(--tpl-ink-muted,#52525b)]">
            {includedFeatures.map((feature) => (
              <li key={feature} className="flex gap-2">
                <span aria-hidden className="text-[color:var(--tpl-accent,#a05cff)]">
                  ✓
                </span>
                <span>{feature}</span>
              </li>
            ))}
          </ul>

          <div className="mt-8">
            <JellyButton
              type="button"
              className="w-full"
              onClick={onCtaClick}
              style={
                {
                  "--jb-bg": "var(--tpl-accent, #a05cff)",
                  "--jb-ink": "var(--tpl-accent-contrast, #fff)",
                } as CSSProperties
              }
            >
              {ctaLabel}
            </JellyButton>
          </div>
        </div>
      </div>
    </section>
  );
}