Pricing — tiers with an enterprise row

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

const plans = [
  { name: "Starter", seats: "Up to 2 users", price: "$12", perks: ["Unlimited invoices", "Reminders", "Card and bank payments"], href: "/signup?plan=starter" },
  { name: "Team", seats: "Up to 10 users", price: "$32", perks: ["Everything in Starter", "Approvals", "Client portal"], href: "/signup?plan=team", recommended: true },
  { name: "Scale", seats: "Up to 40 users", price: "$89", perks: ["Everything in Team", "Accounting sync", "Audit log"], href: "/signup?plan=scale" },
];

const enterprise = ["SSO and SCIM", "Multiple entities", "Invoiced billing", "Dedicated manager", "99.9% uptime SLA"];

export function PricingWithEnterprise() {
  return (
    <section aria-labelledby="pricing-ent-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 id="pricing-ent-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Pricing for teams of every size</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">Self-serve plans for most businesses, and a custom contract when you need one.</p>
        </div>

        <div className="mt-10 grid gap-4 md:grid-cols-3">
          {plans.map((plan) => (
            <article
              key={plan.name}
              aria-label={plan.name + " plan"}
              className={cn("flex flex-col gap-5 rounded-xl border border-border bg-bg p-6", plan.recommended && "border-primary ring-1 ring-primary")}
            >
              <div className="flex items-start justify-between gap-3">
                <div>
                  <h3 className="text-base font-semibold text-fg">{plan.name}</h3>
                  <p className="mt-1 text-[13px] text-fg-subtle">{plan.seats}</p>
                </div>
                <p className="text-right">
                  <span className="block text-3xl font-semibold tracking-tight tabular-nums text-fg">{plan.price}</span>
                  <span className="text-[13px] text-fg-subtle">per month</span>
                </p>
              </div>
              <ul className="grid gap-2.5 text-[13.5px] text-fg">
                {plan.perks.map((p) => (
                  <li key={p} className="flex items-start gap-2.5"><Check className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden />{p}</li>
                ))}
              </ul>
              <a
                href={plan.href}
                className={cn(
                  "mt-auto inline-flex h-9 items-center justify-center rounded text-sm font-medium transition",
                  plan.recommended ? "bg-primary text-primary-fg hover:bg-primary-hover" : "border border-border-strong text-fg hover:bg-surface",
                )}
              >
                Start free trial
              </a>
            </article>
          ))}
        </div>

        <div className="mt-4 grid gap-6 rounded-xl border border-border bg-surface p-7 lg:grid-cols-[1fr_auto] lg:items-center lg:gap-10 lg:px-9">
          <div>
            <div className="flex flex-wrap items-center gap-2">
              <h3 className="text-lg font-semibold text-fg">Enterprise</h3>
              <span className="rounded-full border border-border-strong px-2 py-0.5 text-xs font-medium text-fg-muted">Custom contract</span>
            </div>
            <p className="mt-2 text-sm text-fg-muted">For finance teams with more than 40 people, several entities or their own security review.</p>
            <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-[13.5px] text-fg-muted">
              {enterprise.map((f) => (
                <li key={f} className="inline-flex items-center gap-1.5"><Check className="size-3.5 text-primary" aria-hidden />{f}</li>
              ))}
            </ul>
          </div>
          <div className="flex flex-wrap gap-2.5">
            <a href="/security" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 text-[15px] font-medium text-fg transition hover:bg-surface">Read the security brief</a>
            <a href="/contact-sales" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">
              Talk to sales <ArrowRight className="size-4" aria-hidden />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}