Pricing Volume

"use client";

import { useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface PricingVolumeProps {
  title?: string;
  description?: string;
  /** Monthly payment volume steps (USD). */
  steps?: number[];
  defaultStep?: number;
  className?: string;
}

function rate(volume: number) {
  if (volume >= 2_000_000) return 0.009;
  if (volume >= 500_000) return 0.012;
  if (volume >= 100_000) return 0.015;
  return 0.019;
}

/** Volume-based fee calculator: stepped slider of monthly payment volume, the blended rate tier highlighted in a tier table, and an estimated monthly fee vs. a typical 2.9% processor. */
export function PricingVolume({
  title = "Transparent pricing that drops as you grow",
  description = "One blended rate for card, ACH and SEPA. No setup fees, no monthly minimums.",
  steps = [25_000, 50_000, 100_000, 250_000, 500_000, 1_000_000, 2_000_000, 5_000_000],
  defaultStep = 3,
  className,
}: PricingVolumeProps) {
  const id = useId();
  const [i, setI] = useState(defaultStep);
  const volume = steps[i] ?? steps[0]!;
  const r = rate(volume);
  const fee = volume * r;
  const typical = volume * 0.029;
  const fmt = (n: number) => `$${Math.round(n).toLocaleString("en-US")}`;
  const tiers = [
    { label: "Up to $100k", rate: 0.019 },
    { label: "$100k – $500k", rate: 0.015 },
    { label: "$500k – $2M", rate: 0.012 },
    { label: "$2M+", rate: 0.009 },
  ];

  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <h2 id={`${id}-t`} className="font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>
        <div className="da-stroke mt-10 grid overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md lg:grid-cols-[1.4fr_1fr]">
          <div className="p-6 sm:p-8">
            <label htmlFor={id} className="text-sm font-semibold">
              Monthly payment volume
            </label>
            <p className="mt-2 font-da-mono text-3xl font-medium tabular-nums" aria-live="polite">
              {fmt(volume)}
            </p>
            <input
              id={id}
              type="range"
              min={0}
              max={steps.length - 1}
              step={1}
              value={i}
              onChange={(e) => setI(Number(e.target.value))}
              aria-valuetext={fmt(volume)}
              className="da-focus mt-4 w-full accent-(--da-primary)"
            />
            <table className="mt-6 w-full text-sm">
              <caption className="sr-only">Rate tiers</caption>
              <tbody>
                {tiers.map((t) => (
                  <tr key={t.label} className={cn("border-b border-da-border last:border-0", t.rate === r && "bg-da-accent font-semibold text-da-accent-fg")}>
                    <th scope="row" className="px-3 py-2.5 text-left font-inherit">
                      {t.label}
                    </th>
                    <td className="px-3 py-2.5 text-right font-da-mono">{(t.rate * 100).toFixed(1)}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="flex flex-col border-t border-da-border bg-da-surface-2 p-6 sm:p-8 lg:border-t-0 lg:border-l">
            <p className="text-sm text-da-muted-fg">Estimated Ledgerly fees</p>
            <p className="mt-1 font-da-display text-4xl font-extrabold tracking-da-display">{fmt(fee)}</p>
            <p className="text-sm text-da-muted-fg">per month at {(r * 100).toFixed(1)}%</p>
            <div className="mt-6 rounded-da-md bg-da-success/10 p-4">
              <p className="text-sm">vs. {fmt(typical)} with a typical 2.9% processor</p>
              <p className="mt-1 font-da-display text-xl font-bold text-da-success">Save {fmt(typical - fee)}/mo</p>
            </div>
            <a
              href="#signup"
              className="da-focus da-transition mt-auto inline-flex h-11 items-center justify-center rounded-da-md bg-da-primary font-semibold text-da-primary-fg hover:bg-da-primary/90 max-lg:mt-6"
            >
              Get started
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingVolume;