Pricing Tiers

"use client";

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

export interface PricingTiersPlan {
  name: string;
  description: string;
  monthly: number | null;
  annual: number | null;
  unit: string;
  features: string[];
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingTiersProps {
  eyebrow?: string;
  title?: string;
  plans?: PricingTiersPlan[];
  className?: string;
}

const DEFAULT_PLANS: PricingTiersPlan[] = [
  {
    name: "Starter",
    description: "For small teams sending their first invoices.",
    monthly: 49,
    annual: 39,
    unit: "per month",
    features: ["Up to 100 invoices / mo", "Card & ACH payments", "Automatic reminders", "QuickBooks & Xero sync"],
    cta: { label: "Start free trial", href: "#starter" },
  },
  {
    name: "Growth",
    description: "For finance teams scaling collections.",
    monthly: 199,
    annual: 159,
    unit: "per month",
    features: ["Unlimited invoices", "Bank reconciliation", "Approval workflows", "NetSuite sync", "Priority support"],
    cta: { label: "Start free trial", href: "#growth" },
    featured: true,
  },
  {
    name: "Enterprise",
    description: "For multi-entity organizations.",
    monthly: null,
    annual: null,
    unit: "annual contract",
    features: ["Multi-entity & intercompany", "SSO, SCIM & audit logs", "Custom approval rules", "Dedicated CSM & SLA"],
    cta: { label: "Contact sales", href: "#sales" },
  },
];

/** Three bordered tiers with a monthly/annual segmented toggle; the featured tier has a blue top bar and “Most popular” badge; enterprise shows “Custom”. */
export function PricingTiers({ eyebrow = "Pricing", title = "Plans that scale with your finance team", plans = DEFAULT_PLANS, className }: PricingTiersProps) {
  const [annual, setAnnual] = useState(true);
  return (
    <section aria-labelledby="nc-tiers-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="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h2 id="nc-tiers-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display text-balance">
            {title}
          </h2>
          <div role="group" aria-label="Billing period" className="da-stroke mx-auto mt-8 inline-flex rounded-da-md bg-da-surface-2 p-1">
            {[
              { v: false, l: "Monthly" },
              { v: true, l: "Annual (save 20%)" },
            ].map((o) => (
              <button
                key={o.l}
                type="button"
                aria-pressed={annual === o.v}
                onClick={() => setAnnual(o.v)}
                className={cn(
                  "da-focus da-transition rounded-da-sm px-4 py-1.5 text-sm font-semibold",
                  annual === o.v ? "bg-da-surface shadow-da-sm" : "text-da-muted-fg",
                )}
              >
                {o.l}
              </button>
            ))}
          </div>
        </div>
        <ul className="mx-auto mt-12 grid max-w-5xl gap-4 lg:grid-cols-3">
          {plans.map((p) => {
            const price = annual ? p.annual : p.monthly;
            return (
              <li
                key={p.name}
                className={cn(
                  "da-stroke relative flex flex-col overflow-hidden rounded-da-lg bg-da-surface p-7 text-da-surface-fg",
                  p.featured && "border-da-primary shadow-da-lg",
                )}
              >
                {p.featured && <span aria-hidden className="absolute inset-x-0 top-0 h-1 bg-da-primary" />}
                <div className="flex items-center justify-between">
                  <h3 className="font-da-display text-xl font-bold">{p.name}</h3>
                  {p.featured && <span className="rounded-da-pill bg-da-accent px-2.5 py-0.5 text-xs font-semibold text-da-accent-fg">Most popular</span>}
                </div>
                <p className="mt-2 text-sm text-da-muted-fg">{p.description}</p>
                <p className="mt-6">
                  <span className="font-da-display text-4xl font-extrabold tracking-da-display">{price === null ? "Custom" : `$${price}`}</span>
                  <span className="ml-1 text-sm text-da-muted-fg">{p.unit}</span>
                </p>
                <a
                  href={p.cta.href}
                  className={cn(
                    "da-focus da-transition mt-6 inline-flex h-11 items-center justify-center rounded-da-md font-semibold",
                    p.featured ? "bg-da-primary text-da-primary-fg hover:bg-da-primary/90" : "da-stroke hover:border-da-border-strong hover:bg-da-surface-2",
                  )}
                >
                  {p.cta.label}
                </a>
                <ul className="mt-7 space-y-3 border-t border-da-border pt-6 text-[15px]">
                  {p.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <Check aria-hidden className="mt-0.5 size-4 shrink-0 text-da-primary" strokeWidth={3} />
                      {f}
                    </li>
                  ))}
                </ul>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default PricingTiers;