Pricing Usage

"use client";

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

export interface PricingUsageTier {
  /** Up to N seats (inclusive). Use Infinity for the last tier. */
  upTo: number;
  perSeat: number;
}

export interface PricingUsageProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  tiers?: PricingUsageTier[];
  min?: number;
  max?: number;
  defaultSeats?: number;
  currency?: string;
  included?: string[];
  cta?: { label: string; href: string };
  className?: string;
}

const DEFAULT_TIERS: PricingUsageTier[] = [
  { upTo: 10, perSeat: 21 },
  { upTo: 50, perSeat: 18 },
  { upTo: 150, perSeat: 15 },
  { upTo: Infinity, perSeat: 12 },
];

/** Seat-based price calculator: range slider, volume tiers highlighted, live monthly/yearly total. */
export function PricingUsage({
  eyebrow = "Pricing",
  title = "Pay per responder. Everyone else is free.",
  description = "Stakeholders, viewers and status-page subscribers never count as seats. Volume discounts apply automatically.",
  tiers = DEFAULT_TIERS,
  min = 1,
  max = 250,
  defaultSeats = 24,
  currency = "$",
  included = ["Unlimited alerts & integrations", "Phone, SMS & push", "3 status pages", "AI postmortems", "SSO on 50+ seats"],
  cta = { label: "Start 14-day trial", href: "#signup" },
  className,
}: PricingUsageProps) {
  const [seats, setSeats] = useState(defaultSeats);
  const [yearly, setYearly] = useState(true);
  const id = useId();
  const tierIndex = tiers.findIndex((t) => seats <= t.upTo);
  const tier = tiers[tierIndex] ?? tiers[tiers.length - 1]!;
  const monthly = seats * tier.perSeat * (yearly ? 0.8 : 1);
  const fmt = (n: number) => `${currency}${Math.round(n).toLocaleString("en-US")}`;
  const pct = ((seats - min) / (max - min)) * 100;

  return (
    <section aria-labelledby={`${id}-title`} className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id={`${id}-title`} className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-[17px] text-da-muted-fg">{description}</p>
        </div>

        <div className="da-stroke mx-auto mt-12 grid max-w-4xl overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md md:grid-cols-[1.4fr_1fr]">
          <div className="p-6 sm:p-8">
            <div className="flex items-center justify-between gap-4">
              <label htmlFor={`${id}-seats`} className="text-sm font-medium">
                On-call responders
              </label>
              <output htmlFor={`${id}-seats`} className="font-da-mono text-2xl font-medium tabular-nums">
                {seats}
              </output>
            </div>
            <input
              id={`${id}-seats`}
              type="range"
              min={min}
              max={max}
              value={seats}
              onChange={(e) => setSeats(Number(e.target.value))}
              className="da-focus mt-4 h-1.5 w-full cursor-pointer appearance-none rounded-full [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-da-primary [&::-moz-range-thumb]:bg-da-surface [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-da-primary [&::-webkit-slider-thumb]:bg-da-surface [&::-webkit-slider-thumb]:shadow-da-sm"
              style={{ background: `linear-gradient(to right, var(--da-primary) ${pct}%, var(--da-muted) ${pct}%)` }}
            />
            <ul className="mt-6 grid grid-cols-2 gap-2 sm:grid-cols-4" aria-label="Volume tiers">
              {tiers.map((t, i) => {
                const from = i === 0 ? min : (tiers[i - 1]?.upTo ?? 0) + 1;
                const active = i === tierIndex;
                return (
                  <li
                    key={i}
                    aria-current={active ? "true" : undefined}
                    className={cn(
                      "da-transition rounded-da-md border px-3 py-2 text-[12px]",
                      active ? "border-da-primary bg-da-accent text-da-accent-fg" : "border-da-border text-da-muted-fg",
                    )}
                  >
                    <span className="block font-da-mono">{t.upTo === Infinity ? `${from}+` : `${from}–${t.upTo}`}</span>
                    <span className="block font-medium">
                      {currency}
                      {t.perSeat}/seat
                    </span>
                  </li>
                );
              })}
            </ul>
            <div className="mt-6 inline-flex rounded-da-md bg-da-muted p-0.5 text-[13px]" role="group" aria-label="Billing period">
              {[
                { v: false, l: "Monthly" },
                { v: true, l: "Yearly −20%" },
              ].map((o) => (
                <button
                  key={o.l}
                  type="button"
                  aria-pressed={yearly === o.v}
                  onClick={() => setYearly(o.v)}
                  className={cn(
                    "da-focus da-transition rounded-[5px] px-3 py-1",
                    yearly === o.v ? "bg-da-surface font-medium shadow-da-sm" : "text-da-muted-fg",
                  )}
                >
                  {o.l}
                </button>
              ))}
            </div>
          </div>
          <div className="flex flex-col border-t border-da-border bg-da-surface-2 p-6 sm:p-8 md:border-t-0 md:border-l">
            <p className="text-sm text-da-muted-fg">Estimated total</p>
            <p className="mt-1 text-4xl font-semibold tracking-tight tabular-nums" aria-live="polite">
              {fmt(monthly)}
              <span className="text-base font-normal text-da-muted-fg">/mo</span>
            </p>
            <p className="mt-1 text-[13px] text-da-muted-fg">{yearly ? `${fmt(monthly * 12)} billed yearly` : "Billed monthly, cancel anytime"}</p>
            <ul className="mt-6 space-y-2 text-[13px]">
              {included.map((f) => (
                <li key={f} className="flex items-center gap-2">
                  <Check aria-hidden className="size-3.5 text-da-accent-fg" />
                  {f}
                </li>
              ))}
            </ul>
            <a
              href={cta.href}
              className="da-focus da-transition mt-8 inline-flex h-10 items-center justify-center rounded-da-md bg-da-primary px-4 text-sm font-medium text-da-primary-fg hover:bg-da-primary/90 md:mt-auto"
            >
              {cta.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingUsage;