Pricing — dark highlighted middle tier

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

// The featured card uses the neutral ramp from the Taste preset so it stays
// dark in both light and dark mode.
const plans = [
  { name: "Basic", note: "Just the essentials.", price: "$6", cta: "Choose Basic", href: "/signup?plan=basic", perks: ["25 invoices a month", "Email reminders", "1 user"] },
  { name: "Plus", note: "Everything a growing business needs.", price: "$16", cta: "Start 14-day trial", href: "/signup?plan=plus", featured: true,
    perks: ["Unlimited invoices", "Recurring billing", "Late fees, added for you", "Your logo and colours", "3 users"] },
  { name: "Pro", note: "For finance teams.", price: "$39", cta: "Choose Pro", href: "/signup?plan=pro", perks: ["Everything in Plus", "Approvals", "Accounting sync", "10 users"] },
];

export function PricingDarkMiddle() {
  return (
    <section aria-labelledby="pricing-dark-title" className="bg-surface 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-dark-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Choose how you get paid</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">All plans include card and bank payments. Upgrade when the paperwork starts to pile up.</p>
        </div>

        <div className="mt-10 grid items-center gap-4 md:grid-cols-3 md:gap-0">
          {plans.map((plan, i) => (
            <article
              key={plan.name}
              aria-label={plan.name + " plan"}
              className={cn(
                "flex flex-col gap-6 rounded-xl border p-7",
                plan.featured
                  ? "relative z-10 border-neutral-800 bg-neutral-950 text-neutral-50 shadow-2xl md:px-8 md:py-11"
                  : "border-border bg-bg text-fg",
                !plan.featured && i === 0 && "md:rounded-r-none md:border-r-0",
                !plan.featured && i === plans.length - 1 && "md:rounded-l-none md:border-l-0",
              )}
            >
              <div>
                <div className="flex items-center justify-between gap-2">
                  <h3 className="text-base font-semibold">{plan.name}</h3>
                  {plan.featured && <span className="rounded-full bg-brand-400/25 px-2.5 py-0.5 text-xs font-medium text-brand-100">Best value</span>}
                </div>
                <p className={cn("mt-1.5 text-[13px]", plan.featured ? "text-neutral-400" : "text-fg-subtle")}>{plan.note}</p>
              </div>
              <p className="flex items-baseline gap-2">
                <span className="text-5xl font-semibold tracking-tight tabular-nums">{plan.price}</span>
                <span className={cn("text-[13px]", plan.featured ? "text-neutral-400" : "text-fg-subtle")}>per month</span>
              </p>
              <a
                href={plan.href}
                className={cn(
                  "inline-flex h-9 items-center justify-center rounded text-sm font-medium transition",
                  plan.featured ? "bg-neutral-50 text-neutral-950 hover:bg-neutral-200" : "border border-border-strong text-fg hover:bg-surface",
                )}
              >
                {plan.cta}
              </a>
              <ul className={cn("grid gap-2.5 border-t pt-6 text-[13.5px]", plan.featured ? "border-neutral-800" : "border-border")}>
                {plan.perks.map((perk) => (
                  <li key={perk} className="flex items-start gap-2.5">
                    <Check className={cn("mt-0.5 size-4 shrink-0", plan.featured ? "text-brand-300" : "text-primary")} aria-hidden />
                    {perk}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}