Pricing Columns

"use client";

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

export interface PricingColumnsPlan {
  name: string;
  description: string;
  /** Price per seat per month; null = "Custom". */
  monthly: number | null;
  yearly: number | null;
  unit?: string;
  features: string[];
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingColumnsProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  plans?: PricingColumnsPlan[];
  currency?: string;
  defaultBilling?: "monthly" | "yearly";
  footnote?: string;
  className?: string;
}

const DEFAULT_PLANS: PricingColumnsPlan[] = [
  {
    name: "Free",
    description: "For small teams getting started with on-call.",
    monthly: 0,
    yearly: 0,
    unit: "up to 5 users",
    features: ["Alert routing & escalation", "1 on-call schedule", "Public status page", "Slack integration"],
    cta: { label: "Get started", href: "#signup" },
  },
  {
    name: "Pro",
    description: "For growing engineering orgs with real SLAs.",
    monthly: 29,
    yearly: 24,
    unit: "per user / month",
    features: ["Everything in Free", "Unlimited schedules", "AI postmortem drafts", "Private status pages", "Jira & Linear sync", "SLA reporting"],
    cta: { label: "Start 14-day trial", href: "#trial" },
    featured: true,
  },
  {
    name: "Enterprise",
    description: "For regulated teams operating at scale.",
    monthly: null,
    yearly: null,
    unit: "annual contract",
    features: ["Everything in Pro", "SAML SSO & SCIM", "Audit log & data residency", "99.99% uptime SLA", "Dedicated support engineer"],
    cta: { label: "Contact sales", href: "#sales" },
  },
];

export function PricingColumns({
  eyebrow = "Pricing",
  title = "Simple pricing that scales with your team",
  description = "Start free. Upgrade when your on-call rotation outgrows a spreadsheet.",
  plans = DEFAULT_PLANS,
  currency = "$",
  defaultBilling = "yearly",
  footnote = "Prices in USD. Stakeholders and status page subscribers are always free.",
  className,
}: PricingColumnsProps) {
  const [billing, setBilling] = useState(defaultBilling);
  const titleId = useId();

  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)} aria-labelledby={titleId}>
      <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={titleId} 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 role="group" aria-label="Billing period" className="da-stroke mt-8 inline-flex rounded-da-md bg-da-surface-2 p-1">
            {(["monthly", "yearly"] as const).map((b) => (
              <button
                key={b}
                type="button"
                aria-pressed={billing === b}
                onClick={() => setBilling(b)}
                className={cn(
                  "da-focus da-transition rounded-da-sm px-3.5 py-1.5 text-sm font-medium capitalize",
                  billing === b ? "bg-da-surface text-da-fg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {b}
                {b === "yearly" && <span className="ml-1.5 text-xs text-da-success">−17%</span>}
              </button>
            ))}
          </div>
        </div>

        <ul className="mt-14 grid gap-4 lg:grid-cols-3">
          {plans.map((plan) => {
            const price = billing === "monthly" ? plan.monthly : plan.yearly;
            return (
              <li
                key={plan.name}
                className={cn(
                  "relative flex flex-col rounded-da-lg p-6 sm:p-8",
                  plan.featured
                    ? "bg-da-surface text-da-surface-fg shadow-da-lg ring-1 ring-da-primary/50"
                    : "da-stroke bg-da-surface/50 text-da-surface-fg",
                )}
              >
                {plan.featured && (
                  <div aria-hidden className="absolute inset-x-8 -top-px h-px bg-gradient-to-r from-transparent via-da-primary to-transparent" />
                )}
                <div className="flex items-center justify-between">
                  <h3 className="text-[15px] font-medium">{plan.name}</h3>
                  {plan.featured && <span className="rounded-da-pill bg-da-accent px-2 py-0.5 text-xs font-medium text-da-accent-fg">Most popular</span>}
                </div>
                <p className="mt-2 min-h-[2lh] text-sm text-da-muted-fg">{plan.description}</p>
                <p className="mt-6 flex h-12 items-baseline gap-1.5">
                  <span className="text-4xl font-semibold tracking-da-display tabular-nums">{price === null ? "Custom" : `${currency}${price}`}</span>
                  {plan.unit && <span className="text-sm text-da-muted-fg">{plan.unit}</span>}
                </p>
                <a
                  href={plan.cta.href}
                  className={cn(
                    "da-focus da-transition mt-6 inline-flex h-9 items-center justify-center rounded-da-md text-sm font-medium",
                    plan.featured
                      ? "bg-da-primary text-da-primary-fg shadow-da-sm hover:bg-da-primary/90"
                      : "da-stroke bg-da-surface text-da-surface-fg hover:bg-da-muted",
                  )}
                >
                  {plan.cta.label}
                </a>
                <ul className="mt-8 space-y-3 border-t border-da-border pt-6 text-sm">
                  {plan.features.map((f) => (
                    <li key={f} className="flex gap-2.5">
                      <Check aria-hidden className={cn("mt-0.5 size-4 shrink-0", plan.featured ? "text-da-primary" : "text-da-muted-fg")} />
                      {f}
                    </li>
                  ))}
                </ul>
              </li>
            );
          })}
        </ul>
        {footnote && <p className="mt-8 text-center text-xs text-da-muted-fg">{footnote}</p>}
      </div>
    </section>
  );
}

export default PricingColumns;